Custom Template Layout in Magento template – CMS page template

There are some default template page in Magento linke 1column.phtml, 2column-right.phtml etc…
If you want to such add cms page template follow the steps.
1. Design your html template
2. Rename your html template with .phtml exertion
3. Add Magento codes to your template …
let your html tpl is…
<head>
</head>
<body>
<div> your content area </div>
</body>

Adding magento codes..

<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body>
<div>
<?php echo $this->getChildHtml('global_notices') ?>
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
</body>

You can write inline css or write css for this page in skin
/skin/frontend/default/default/css/style.css or in your template’s skin css file.

4. Now you have to add this cms page template to magento

go to /app/code/core/Mage/Page/etc
open config.xml. (let your template file name is ‘about.phtml’)
add below code in config.xml inside the ‘layouts’ tag

<about_tpl module="page" translate="label">
<label>About Template</label>
<template>page/about.phtml</template>            <layout_handle>page_about_tpl</layout_handle></about_tpl>

5. Move your ‘about.phtml’ file to
/app/design/frontend/base/default/template/page
directory or move to your  template’s template’s template/page/ directory.

All done, now you can see your template in admin->cms->page
select any page and click the design tab to set your design.

To use about.phtml as default in magento pages like catalog, checkout, cart, etc you have to edit xml layout of thous page. let you want to use about.phtml as checkout page, open checkout.xml find out existing template reference and replace by about.phtml.

then you must add template reference in page.xml
add

<page_about_tpl translate="label">
<label>About Template</label>
<reference name="root">
<action method="setTemplate">   <template>page/about.phtml</template>
</action>
<action method="setIsHandle">
<applied>1</applied>
</action>
</reference>
</page_about_tpl>

Best of luck.

  • Md. Benzir Hasan

    Thanks,it’s for it..