Magento:create new / Add New CMS Page Layout

Magento: Add New CMS Page Layout

Want to take your Magento Themes to the next level? Have multiple layouts? If you’re looking to add a new page layout in Magento, create a custom layout or create a new theme layout then this solution is probably for you.

First we have to create a module. Create file:app/etc/modules/Mage_Page.xml

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

Then copy this whole folder: app/code/core/Mage/Page toapp/code/local/Mage

What we’ve done is taken a core module and copied it into our local module. This lets us override any core functionality without have to worry about it breaking in future update (or undoing if you mess up).

Now we need to edit: app/code/core/Mage/Page/etc/config.xml and look around line 46 and you can define your own layout, I’m going to call mine “home”

<layouts> <home module="page" translate="label"> <label>Home</label> <template>page/home.phtml</template> <layout_handle>page_home</layout_handle> </home> <empty module="page" translate="label"> <label>Empty</label> <template>page/one-column.phtml</template> <layout_handle>page_empty</layout_handle> </empty> <one_column module="page" translate="label"> <label>1 column</label> <template>page/1column.phtml</template> <layout_handle>page_one_column</layout_handle> </one_column> <two_columns_left module="page" translate="label"> <label>2 columns with left bar</label> <template>page/2columns-left.phtml</template> <layout_handle>page_two_columns_left</layout_handle> </two_columns_left> <two_columns_right module="page" translate="label"> <label>2 columns with right bar</label> <template>page/2columns-right.phtml</template> <layout_handle>page_two_columns_right</layout_handle> </two_columns_right> <three_columns module="page" translate="label"> <label>3 columns</label> <template>page/3columns.phtml</template> <layout_handle>page_three_columns</layout_handle> </three_columns> </layouts>

Now all you have to do is make a template for this page. Navigate to your theme directory:app/design/frontend/YOUR_THEME/YOUR_THEME/template/page/ and create a new template called home.phtml. I suggest using another existing template as a starting point, such as 3columns.phtml so that you know what variables to work around. This will enable a custom layout option for CMS pages once you’re finished. I’ve tested this with 1.3 series but nothing previous or after that. If you have any comments or questions feel free to post them here or read the forum on Magento’s site for more details.