How To Add CMS Layout Template To A Web Page?

Some times you want to add additional layout template rather than the layout template given by Magento by default to a page from the admin interface. By creating this custom layout we have more choice to add CMS layout template options to the CMS page and this layout can also assign to your custom module.

In order to create a custom layout you have to create a new module. For doing this you have to create only the configuration file that updates the section that lists the availableCMS layout templates. Here Multiple_Layout is my module where Multiple is the namespace and Layout is the module-name. The code of the etc file is in the following directory app>code>local>Multiple>Layout>etc

Also Read: Top Nine Websites With Astounding Webpage Designs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0"?>
<config>
<modules>
<Multiple_Layout>
<version>0.0.1</version>
</Multiple_Layout>
</modules>
<global>
<page>
<layouts>
<custom_layout module="page" translate="label">
<label>Custom layout</label>
<template>custom_layout.phtml</template>
<layout_handle>custom_layout</layout_handle>
</custom_layout>
</layouts>
</page>
</global>
</config>

Here custom_layout name is the layout name. You can assign page template design as custom_layout. Then go to the following directory app > etc > modules. Create the XML file Multiple_Layout.xml to enable your module

Code:

1
2
3
4
5
6
7
8
9
<?xml version="1.0"?>
<config>
<modules>
<Multiple_Layout>
<active>true</active>
<codePool>local</codePool>
</Multiple_Layout>
</modules>
</config>

Then in app > design > frontend > your interface > your theme > template. Just create the template file custom_layout.phtml. In this file we describe the layout design, whether it is 1column or 2column-left or 2column-right or 3column. Just copy the code from the corresponding phtml file. This file is located in the app > design > frontend > base > default > template > page directory. I have added the 2columns-left.phtml codes. My custom_layout.phtml files code is given below

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div class="main-container col2-left-layout">
<div class="main">
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('breadcrumbs') ?>
<?php echo $this->getChildHtml('content') ?>
<?php echo $this->getChildHtml('new-content') ?>
</div>
<div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
</div>
</div>
<?php echo $this->getChildHtml('footer') ?>
<?php echo $this->getChildHtml('global_cookie_notice') ?>
<?php echo $this->getChildHtml('before_body_end') ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>

CMS Layout Template Design

Following this, in app > design > frontend > your interface > your theme > layout just create the local.xml file. It is used to assign blocks in your layout.The code is

Code:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0"?>
<layout>
<custom_layout>
<reference name="left">
<block type="core/template" name="searchbox" template="catalogsearch/form.mini.phtml" />
<block type="core/template" name="newquick" template="quick/quick.phtml" />
<block type="core/template" name="new" template="news-event/news-event.phtml" />
<block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribe.phtml"/>
</reference>
</custom_layout>
</layout>

In this layout I have inserted blocks like searchbox, newsletter and custom block in the left bar. That’s all as your custom layout is ready for use.

Adding a new reference in Magento

In magento we have few structual blocks like header, footer, content, etc. These structual blocks are used to display the template files or other blocks. Our goal is to create a new structural block.

To create a new structural block just declare the block in your page.xml file. This File is located in app > design > frontend > base> default > layout. In page.xml just add the following code under the <default> tag.

Code:

1
2
3
<block type="core/text_list" name="new-content" as="new-content" translate="label">
<label>New Content Area</label>
</block>

Your new structural block is created. Here, “new-content” is the reference name. Call this structural block in your template in the following way

Code:

1
<?php echo $this->getChildHtml('new-content') ?>

Then in your app > design > frontend > your interface > your theme > layout, create the local.xml file. In this xml file just add what you want to display in your newly created block. I have assigned a phtml file.

Code:

1
2
3
4
5
6
7
<layout>
<default>
<reference name="new-content">
<block type="core/template" name="my_view_script" template="hello/world.phtml" />
</reference>
</default>
</layout>

Then create the word.phtml file in your app > design > frontend > your interface > your theme > template under ‘Hello’ folder. In this template file, you can display what you want to display

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