Add Custom Layouts for CMS and Category – Magento 1.7 Guide

layoutmagento-1.7modulepage-layoutstemplate

I have a category in my store that requires a totally different layout to the standard Magento layouts. So I created a new copy of the 1column.phtml and renamed it and made one small change to test.

Now the problem is that the custom layout is not showing up. I created a module (which is working as it is seen in the Admin > Config > Advanced overview).

My files and contents are as follows:

app/etc/modules/Test_Page.xml

    <?xml version="1.0"?>
<config>
    <modules>
        <Test_Page>
            <active>true</active>
            <codePool>community</codePool>
            <version>0.1.0</version>
            <depends>
                <Mage_Page />
            </depends>
        </Test_Page>
    </modules>
</config>

app/code/local/Test/Page/etc/config.xml

    <?xml version="1.0"?>
<config>
    <modules>
        <Test_Page>
            <version>0.1.0</version>
        </Test_Page>
    </modules>
    <global>
        <page>
            <layouts>
                <homepage module="page" translate="label">
                    <label>Homepage</label>
                    <template>page/home.phtml</template>
                    <layout_handle>homepage</layout_handle>
                </homepage>

                <!-- add more layouts here -->
            </layouts>
        </page>
    </global>
    <frontend>
        <layout>
            <updates>
                <Test_Page>
                    <file>test_page.xml</file>
                </Test_Page>
            </updates>
        </layout>
    </frontend>
</config>

app/design/frontend/test/default/layout/test_page.xml

    <?xml version="1.0"?> 
<layout>
    <homepage translate="label">
        <label>Home Page</label>
        <reference name="root">
            <action method="setTemplate"><template>page/home.phtml</template></action>
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </homepage> 
</layout>

I can't see anything I've screwed up, It's being read as a module but the custom layout is not being shown up 🙁

Best Answer

In order to make it appear in the layout dropdown you need to create a custom module (you can also add something in a core file but please don't do that). Let's name the extension Easylife_Layout. For this you need to create the following files: app/etc/modules/Easylife_Layout.xml - the declaration file

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

app/code/local/Easylife/Layout/etc/config.xml - the configuration file 

<?xml version="1.0"?> 
<config>
    <modules>
        <Easylife_Layout>
            <version>0.0.1</version>
        </Easylife_Layout>
    </modules>
    <global>
        <page>
            <layouts> 
                <lookbook module="page" translate="label">
                    <label>Lookbook</label>
                    <template>page/1column-lookbook.phtml</template>
                    <layout_handle>lookbook</layout_handle>
                </lookbook> 
            </layouts>
        </page>
    </global>
    <frontend>
        <layout>
            <updates>
                <easylife_layout>
                    <file>easylife_layout.xml</file>
                </easylife_layout>
            </updates>
        </layout>
    </frontend>
</config>

app/design/frontend/{interface}/{theme}/layout/easylife_layout.xml - the layout file

<?xml version="1.0"?> 
<layout>
    <lookbook translate="label">
        <label>Lookbook</label>
        <reference name="root">
            <action method="setTemplate"><template>page/1column-lookbook.phtml</template></action>
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </lookbook> 
</layout>

The last one is necessary in case you want to be able to reference your custom layout in layout files. Something like:

<update hande="lookbook" />

Clear the cache and...that's it. Le tme know if it works for you.

Related Topic