Monday, March 25, 2013

Add custom page layout

Here is now you can add a custom page layout (similar to 1column, 2columns,....) without editing the core files.
Create a new module. Let's call it Easylife_Layout.
For this you need 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> 
                <custom_layout module="page" translate="label">
                    <label>Custom layout</label>
                    <template>page/custom_layout.phtml</template>
                    <layout_handle>custom_layout</layout_handle>
                </custom_layout> 
            </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 (I recommend creating it inside the base/default theme so it will be available for all the custom themes)
<?xml version="1.0"?> 
<layout>
    <custom_layout translate="label">
        <label>Custom layout</label>
        <reference name="root">
            <action method="setTemplate"><template>page/custom_layout.phtml</template></action>
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </custom_layout> 
</layout>
app/design/frontend/{interface}/{theme}/template/page/custom_layout.phtml - the page html - feel free to customize it as you want. this is just a copy of 1column.phtml with some new added classes (I recommend creating it inside the base/default theme so it will be available for all the custom themes)
<!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') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper custom-layout">
    <?php echo $this->getChildHtml('global_notices') ?>
    <div class="page">
        <?php echo $this->getChildHtml('header') ?>
        <div class="main-container custom-layout-container">
            <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>
        </div>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
That's it. If you want to load your layout in a custom layout xml file (let's say for your custom entities display) just add this inside the page handle
<update hande="custom_layout" />
The new layout should be available for all the CMS pages and category/product display settings.

1 comment:

  1. I'm unable to set the template in this way. In my custom layout xml file I'd written





    you had not mentioned it correctly

    ReplyDelete