"How to add series" #1: Adding new layout template for Magento

Hello everyone! Today, Travis asked me to compete with him in sharing Magento knowledge in Magestore blog. Well, of course, I have no fear, and I want to start the competition with “How to add” series. And let’s start with How to add new layout template for Magento.

As we know, Magento provides some defined layouts: 1column, 2 columns (left and right), 3 columns. But I am sure that when working with Magento, sometimes you have to create a new layout for custom page, for example, 3 columns only for cms page.

You can make modification directly in app/code/core/Page/etc/config.xml but if you don’t want to touch core file, I recommend you to follow these steps:

Create config.xml under app/code/local/Magestore/Page/etc

<?xml version="1.0" encoding="utf-8"?>
<config>
<modules>
<Magestore_Page>
<version>0.1.0</version>
</Magestore_Page>
</modules>
<global>
<page>
<layouts>
<three_columns_cms module="page" translate="label">
<label>3 columns for cms page</label>
<template>page/3columns-cms.phtml</template>
<layout_handle>page_three_columns_cms</layout_handle>
</three_columns_cms>
</layouts>
</page>
</global>
</config>

Now, open app/etc/modules and create file Magestore_Page.xml

<?xml version="1.0"?>
<config>
<modules>
<Magestore_Page>
<active>true</active>
<codePool>local</codePool>
</Magestore_Page>
</modules>
</config>

You have to create a file named ‘3columns-cms.phtml’ under app/design/frontend/[YOUR_PACKAGE]/[YOUR_THEME]/template/page.

Now, log in your admin, go to Cms -> Manage pages, click Add new page. In Custom Design tab, you can find new layout you just created:

Here, you can find the package created by above steps: New Layout Template