Magento Website : How to create new template?

Step 1: Backup

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

app/code/core/Mage/Page/etc/config.xml
Step 2: Create new template

Create a new template file in the following directory (you may chose to simply copy an existing template, such as 1column.phtml) and name is with an appropriate name.

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

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

On line ~175 find:

[box]

<cms>

<layouts>

<empty>

<label>Empty</label>

<template>page/one-column.phtml</template>

</empty>

<one_column>

<label>1 column</label>

<template>page/1column.phtml</template>

</one_column>

<two_columns_left>

<label>2 columns with left bar</label>

<template>page/2columns-left.phtml</template>

</two_columns_left>

<two_columns_right>

<label>2 columns with right bar</label>

<template>page/2columns-right.phtml</template>

</two_columns_right>

<three_columns>

<label>3 columns</label>

<template>page/3columns.phtml</template>

</three_columns>

</layouts>

</cms>

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

[box]

<layout_description>

Layout Name

<template>page/template_name.phtml</template>

</layout_description>

[/box]

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

[box]

<cms>

<layouts>

<empty>

<label>Empty</label>

<template>page/one-column.phtml</template>

</empty>

<home>

<label>Home</label>

<template>page/home.phtml</template>

</home>

<one_column>

<label>1 column</label>

<template>page/1column.phtml</template>

</one_column>

<two_columns_left>

<label>2 columns with left bar</label>

<template>page/2columns-left.phtml</template>

</two_columns_left>

<two_columns_right>

<label>2 columns with right bar</label>

<template>page/2columns-right.phtml</template>

</two_columns_right>

<three_columns>

<label>3 columns</label>

<template>page/3columns.phtml</template>

</three_columns>

</layouts>

</cms>

[/box]

Using the same steps, and modifying them for your application, you can crate new layout templates for use on any CMS page.

Be aware that until Magento changes the way layout templates are invoked, any update to the Magento code base will overwrite your changes, so make sure you have a backup of config.xml before you upgrade your Magento installation. The templates themselves will be fine, but you won’t be able to select them in the admin interface until you update config.xml so they show up.

To avoid this, make the change in (make a backup of config.xml and copy):

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

Then in: app/etc/modules/Mage_All.xml Added in:

[box]

<xml version = “1.0”?>

<config>

<modules>

<Mage_Page>

<active> true </ active>

<codePool> local </ codePool>

<depends>

<Mage_Core/>

</ depends>

</ Mage_Page>

</ modules>

</ config>

[/box]

Then finally, in the local module CMS, create folders Page and etc in local Mage, see :

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

And in this file, make the amendment, it is untouchable by updating the core, because it is in the local folder.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s