Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Adding a New Layout for Index Page
 
vishal_2811
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2011-04-17
 

Dear All,

Here are the steps to create a NEW layout:-

1. Copy app/code/core/Mage/Page/etc/config.xml to app/code/local/Mage/Page/etc/config.xml and between “<page<layouts>..........</layouts></page>” tag paste the code below

<homepage module="page" translate="label">
    <
label>Home Page</label>
    <
template>page/home-page.phtml</template>
    <
layout_handle>home_page</layout_handle>
</
homepage>

2. Register your custom module by adding a new file (Mage_Local.xml) to app/etc/modules by pasting the code below

<?xml version="1.0"?>
<config>
    <
modules>
        <
Mage_Page>
            <
active>true</active>
            <
codePool>local</codePool>
            <
depends>
                <
Mage_Core/>
            </
depends>
        </
Mage_Page>
    </
modules>
</
config>

After this go to Admin->CMS->Pages->Add New Page->Design........here into the “Layout” dropdown you must see the new layout name you just created ("Home Page” in my case). Now create a New page and assignt this layout ("Home Page") to it.

3. Now create a file with the name home-page.phtml under app/design/frontend/default/default/template/page and paste the code below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<
head>
<?php echo $this->getChildHtml('head'?>
<meta name="google-site-verification" content="5s4cOPihj4w5iO2kaaYl5_BZSV1S3Nf82zFp8b4ZuUM" />
</
head>
<
body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start'?>
<div class="wrapper"<?php echo $this->getChildHtml('global_notices'?>
  
<div class="page"<?php echo $this->getChildHtml('header'?>
    
<div id="banner">
      <
div class="left"><img src="<?php echo $this-> getSkinUrl('images/banner_txt.png')?>" class="txt"/></div>
      <
div class="right"><img src="<?php echo $this-> getSkinUrl('images/slide.jpg')?>" /></div>
    </
div>
    <
div class="main-container col2-right-layout">
      <
div class="main">
        
<?php echo $this->getChildHtml('breadcrumbs'?>
        
<div class="col-main">
            
<?php echo $this->getChildHtml('global_messages'?>
            <?php 
echo $this->getChildHtml('content'?>
        
</div>
        <
div class="col-right sidebar"><?php echo $this->getChildHtml('right'?></div></div>
        
        <
div class="blog-feed"><?php echo $this->getChildHtml('blog_content'?></div>
        <
div class="blog-feed"><?php echo $this->getChildHtml('testimonials'?></div>
        
      </
div>
    </
div>
    
<?php echo $this->getChildHtml('footer'?> <?php echo $this->getChildHtml('before_body_end'?> </div>
</
div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</
html>

It must be noted here that I wanted to place “blog_content” and “testimonials” divs out of the main container div (as footer/left/right divs are) somethign like this

<div class="main">
    <
div class="col-main"></div>
    <
div class="col-right sidebar"></div>
    <
div class="blog-feed">......For Blogs.......</div>
    <
div class="blog-feed">......For Testimonials........</div>
</
div>

Previously Blog and Testimonial div were into the main content i.e. inside the “col-main” div, something like

<div class="main">
    <
div class="col-main">
        <
div>Other content..........</div>
        <
div class="blog-feed">......For Blogs.......</div>
        <
div class="blog-feed">......For Testimonials........</div>
    </
div>
    <
div class="col-right sidebar"></div>
</
div>

4. So for this just go to app/design/frontend/default/default/layout/page.xml and into the tag “<default translate="label" module="page">" add following

<block type="core/template" name="blog_content" as="blog_content" template="catalog/product/middlebottom.phtml">
    <
label>Blog Column</label>
</
block>

<
block type="core/template" name="testimonials" as="testimonials" template="testimonials/testimonials.phtml">
    <
label>Testimonials</label>
</
block>
before <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"> (near about line number 112). Note that these “blog_content” and “testmonials” references will be used into the file “home-page.phtml” created above into the step 3
<div class="blog-feed"><?php echo $this->getChildHtml('blog_content'?></div>
<
div class="blog-feed"><?php echo $this->getChildHtml('testimonials'?></div>

Now open the page into the URL, created in step 2 above, you must see the design according to the newly created layout “Home Page” and of course both of the DIVs (blog_content and testimonials) should be out of the main DIV like

<div class="main">
    <
div class="col-main"></div>
    <
div class="col-right sidebar"></div>
    <
div class="blog-feed">......For Blogs.......</div>
    <
div class="blog-feed">......For Testimonials........</div>
</
div>

See the attachment.

That’s all,
smile

Image Attachments
Screenshot.png
 
Magento Community Magento Community
Magento Community
Magento Community
 
aalinn
Member
 
Total Posts:  50
Joined:  2009-05-05
 

I’ve followed these instructions, but cannot get the “Home Page” template to appear in my “Layout” drop-down menu under CMS > Pages > Add New Page > Design. I’m sure the problem exists somewhere between keyboard and chair. What am I missing? I’m using the free Grayscale_red theme on Magento ver. 1.7.0.1

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top