Adding CMS Layout Templates
You may find that you want to add additional layout template options to the CMS section that can be chosen when creating or editing a page in the admin interface.
Step 1: Create New Template |
Create a new template file in the following directory (you may want to simply copy an existing template, such as 1column.phtml) and name it with an appropriate name (ie: home.phtml if that template will be used for your home page).
app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/page/
whereas YOUR_INTERFACE typically remains “default” and YOUR_THEME can also be “default” (please see Design-Guide about proper naming of themes and interfaces)
Step 2: Create a new module |
In order to customize the configuration of Magento without hacking into existing files we need to create a new module. This is very simple. The module will only contain a configuration file that updates the section that lists the available templates for the CMS.
We’ll call the module Banana (just a example) and its package name Fruit (also just an example).
Note: You may (and probably should) choose a different module/package name, just be consistent throughout the process.
We need to tell Magento about our new module, so create a new file:
app/etc/modules/Fruit_Banana.xml
with the following content:
- <?xml version="1.0"?>
- <config>
- <modules>
- <Fruit_Banana>
- <active>true</active>
- <codePool>local</codePool>
- <depends>
- <Mage_Page />
- </depends>
- </Fruit_Banana>
- </modules>
- </config>
Now we need to actually create the module itself. Create the following file (and the neccessary folder structure):
app/code/local/Fruit/Banana/etc/config.xml
with the following content:
- <?xml version="1.0"?>
- <config>
- <modules>
- <Fruit_Banana>
- <version>0.1.0</version>
- </Fruit_Banana>
- </modules>
- <global>
- <page>
- <layouts>
- <INTERNAL_NAME_FOR_YOUR_NEW_LAYOUT translate="label">
- <label>LAYOUT_NAME</label>
- <template>page/LAYOUT_FILE_NAME.phtml</template>
- <layout_handle>LAYOUT_HANDLE</layout_handle>
- </INTERNAL_NAME_FOR_YOUR_NEW_LAYOUT>
- <!-- add more layouts here -->
- </layouts>
- </page>
- </global>
- </config>
The capitalized parts need to be filled in by you.
Any new layouts you want to add should to be in the following format:
- <layout_description label="translate">
- <label>Layout Name</label>
- <template>page/template_name.phtml</template>
- <!-- defining the layout handle is optional -->
- </layout_description>
Using the same steps, and modifying them for each template, you can create new layout templates for use on any CMS page.
You're done! |
Also, take a look at the config.xml of the Page module in the Mage package; it defines the layouts that come with Magento:
app/code/core/Mage/Page/etc/config.xml
On line ~47(version 1.5.1.0) find:
- <page>
- <layouts>
- <empty module="page" translate="label">
- <label>Empty</label>
- <template>page/empty.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>
- <is_default>1</is_default>
- </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>
- </page>
If you don’t care for updating Magento and love hacking core files (something you generally shouldn’t do, unless you know what you’re doing) you can also just update this file (app/code/core/Mage/Page/etc/config.xml). Beware though that Magento updates can override the changes you’ve made.



