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 to app/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.
To day I try searching with bing, and I find your site and this useful post. Thank you. I need it.
HELP!
Thank you for this tutorial but I have hit a snag. I did everything exactly as you stated above. I got the new layout to show up in the drop-down menu in the Admin / CMS section. I created the new page from the Admin / CMS with my new layout but when I go to preview the page it just redirects me back to the home page… wtf?!?!?
Please… any assistance with this is greatly appreciated!!
Thanks!!!
j.
The way you describe about new CMS Page Layout i like that. Thank u so much.