Adding CMS Layout Templates

Last modified by Mike Plant on Thu, August 11, 2011 12:19
Source|Old Revisions  

This is an old revision of the document!


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. Unfortunately this requires digging into the core code a little, but the fix is very quick and should only take a couple of minutes.

Step 1: Backup and Copy

Make a backup of file we will be working with, it is located here:

app/code/core/Mage/Page/etc/config.xml

To avoid updates overriding your changes, create a “local” copy of this file to be used instead of the core file and place it here:

app/code/local/Mage/Page/etc/config.xml

Step 2: 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 3: Add Template to Config

Edit config.xml to add the new layout template to the available options.

On line ~47(version 1.5.1.0) find:

  1.         <page>
  2.             <layouts>
  3.                 <empty module="page" translate="label">
  4.                     <label>Empty</label>
  5.                     <template>page/empty.phtml</template>
  6.                     <layout_handle>page_empty</layout_handle>
  7.                 </empty>
  8.                 <one_column module="page" translate="label">
  9.                     <label>1 column</label>
  10.                     <template>page/1column.phtml</template>
  11.                     <layout_handle>page_one_column</layout_handle>
  12.                     <is_default>1</is_default>
  13.                 </one_column>
  14.                 <two_columns_left module="page" translate="label">
  15.                     <label>2 columns with left bar</label>
  16.                     <template>page/2columns-left.phtml</template>
  17.                     <layout_handle>page_two_columns_left</layout_handle>
  18.                 </two_columns_left>
  19.                 <two_columns_right module="page" translate="label">
  20.                     <label>2 columns with right bar</label>
  21.                     <template>page/2columns-right.phtml</template>
  22.                     <layout_handle>page_two_columns_right</layout_handle>
  23.                 </two_columns_right>
  24.                 <three_columns module="page" translate="label">
  25.                     <label>3 columns</label>
  26.                     <template>page/3columns.phtml</template>
  27.                     <layout_handle>page_three_columns</layout_handle>
  28.                 </three_columns>
  29.             </layouts>
  30.         </page>

And insert the XML code for the new template where you want it to appear in the following format:

  1. <layout_description>
  2.     <label>Layout Name</label>
  3.     <template>page/template_name.phtml</template>
  4. </layout_description>

Here is an example of the finished code block after inserting a new template named home.phtml:

  1.         <page>
  2.             <layouts>
  3.                 <empty module="page" translate="label">
  4.                     <label>Empty</label>
  5.                     <template>page/empty.phtml</template>
  6.                     <layout_handle>page_empty</layout_handle>
  7.                 </empty>
  8.                 <home module="page" translate="label">
  9.                     <label>Home</label>
  10.                     <template>page/home.phtml</template>
  11.                     <layout_handle>page_home</layout_handle>
  12.                 </home>
  13.                 <one_column module="page" translate="label">
  14.                     <label>1 column</label>
  15.                     <template>page/1column.phtml</template>
  16.                     <layout_handle>page_one_column</layout_handle>
  17.                     <is_default>1</is_default>
  18.                 </one_column>
  19.                 <two_columns_left module="page" translate="label">
  20.                     <label>2 columns with left bar</label>
  21.                     <template>page/2columns-left.phtml</template>
  22.                     <layout_handle>page_two_columns_left</layout_handle>
  23.                 </two_columns_left>
  24.                 <two_columns_right module="page" translate="label">
  25.                     <label>2 columns with right bar</label>
  26.                     <template>page/2columns-right.phtml</template>
  27.                     <layout_handle>page_two_columns_right</layout_handle>
  28.                 </two_columns_right>
  29.                 <three_columns module="page" translate="label">
  30.                     <label>3 columns</label>
  31.                     <template>page/3columns.phtml</template>
  32.                     <layout_handle>page_three_columns</layout_handle>
  33.                 </three_columns>
  34.             </layouts>
  35.         </page>

Using the same steps, and modifying them for each template, you can create new layout templates for use on any CMS page.

Step 4: Use Local Config

To avoid editing core files and updates overwriting our modifications; we have made the changes in our local directory. Currently, Magento 1.5.1.0 uses the files in core so we must also tell Magento to use our local Config.xml file instead.

To do this modify:

app/etc/modules/Mage_All.xml

And change the Mage_page codePool to local instead of core:

  1. <xml version = "1.0"?>
  2.        <config>
  3.            <modules>
  4.                <Mage_Page>
  5.                    <active>true</ active>
  6.                    <codePool>**local**</ codePool>
  7.                    <depends>
  8.                        <Mage_Core/>
  9.                    </depends>
  10.                </Mage_Page>
  11.            </modules>
  12.        </config>

You can now update to the core, and your local file changes will remain intact.

Although you may need to modify the Mage_All.xml, if overwritten to tell Magento to load your local config file.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs