Add New Page Layout – Magento

In most of the magento themes I’ve developed, I used a custom layout for home page because usually there are lots of home page specific units in it. If an existing page layout is customized to match the home page design, it woudl effect to other pages too. Therefor the best option is to create a new page template for home page. So, in this article I’m going to explain how a new page template can be added to a magento website.

This involves creating a new module in magento. Let me call it as Muaw_HomeLayout. Ok, enough talks, lets start. Here are the steps.

Create Module Config File

Define your new module in a config file. For that, Create Muaw_HomeLayout.xml file in following location.

app/etc/modules/Muaw_HomeLayout.xml

Here is the code.

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

2. Create actual layout file

Create actual layout file in the following location. It would be enough to copy and rename default one to test the module.

app/design/frontend/<package_name>/<theme_name>/template/page/custom-home-page.phtml

. This file will contain all the codings to render the page and childHtml calls.

3. Define Config File

Module config file should be defined in the mentioned location bellow.

app/code/local/muaw/HomeLayout/etc/config.xml

Here is the code.

<?xml version="1.0"?>
<config>
    <modules>
        <Muaw_HomeLayout>
            <version>0.0.1</version>
        </Muaw_HomeLayout>
    </modules>
    <global>
        <page>
            <layouts>
                <new_cms_layout module="page" translate="label">
                    <label>Home Page</label>
                    <template>page/custom-home-page.phtml</template>
                    <layout_handle>lookbook</layout_handle>
                </new_cms_layout>
            </layouts>
        </page>
    </global>
</config>

Congratulations! you have added a new page layout to your magento website. Clean cache and reload admin area. And navigate to CMS->Pages and select a page. Select “Design” Tab. You will see “Home Page” in the “Layout” dropdown.