Magento — Add Custom Structural Block Reference
on May 20, 2013
Magento is built on a modular model, which gives the software a lot of flexibility in terms of layout and scale. One such example of this is the ability to create new structural blocks. Magento provides some structural blocks by default and many content blocks, which can be placed inside structural blocks. If you are not familiar with this concept, you can brush up by reading the Designer’s Guide to Magento.
This article will provide a little background on structural blocks as well as a guide to creating and populating a new structural block.
Structural Blocks Defined
Structural blocks are the parent blocks of content blocks. Structural blocks serve to position content blocks within the context of a given page (or page layout) in your store. In other words, structural blocks create the visual structure for a store page. Examples of structural blocks include the header, the left column, the right column, and the content area. See below for diagrams of structural blocks and content blocks.
Creating a Structural Block
Although it can seem a bit daunting at first, creating a custom structural block only involves 3 steps and we’ve provided examples of all the code that you will need to use. Familiarity with Magento is helpful, but if you can handle copying and pasting, you should be able to succeed. If you get stuck on any of these steps, please leave a comment and we will post any needed clarifications. We will detail how to add a structural block in the footer; however, it is easy to add a structural blocks to other areas of the page by changing the location of code in the necessary .phtml file (see step 1 below).
1) Place the Structural Block
We need to instruct Magento on where to output the new structural block. Go to app/design/frontend/your_package/your_theme/template/page/
and locate the .phtml file (or files) that your template is using, typically 1column.phtml, 2columns-left.phtml, 2columns-right.phtml, or 3columns.phtml. Open the .phtml file and add the below code based on where you would like the new structural block to appear. For this guide, we have named our block “customblock”.
<div><?php echo $this->getChildHtml('customblock') ?></div>
For example, to add customblock above the footer, the code in your .phtml file should resemble the below. The new code that we added is on line 10:
<div class="main-container col2-right-layout"> <div class="main"> <?php echo $this->getChildHtml('breadcrumbs') ?> <div class="col-main"> <?php echo $this->getChildHtml('global_messages') ?> <?php echo $this->getChildHtml('content') ?> </div> <div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div> </div> <div><?php echo $this->getChildHtml('customblock') ?></div> </div>
2) Populate the Structural Block with Content
Now that the new structural block has been properly placed, we need to populate it with content. To do this create a new file called customblock.phtml in app/design/frontend/your_package/your_theme/template/
. Once the file is created, add your content. For our purposes, we will use the below code which will display “Custom Structural Block”, however, any content that you need may be added to customblock.phtml.
<h1 style="background-color:yellow">Custom Structural Block</h1>
3) Add a New Reference Using local.xml
Now we need to add a reference so that Magento knows that the customblock structural block exists and where to locate the customblock.phtml file that we created in step 2. To do this without modifying any Magento core files, we can use our local.xml file. If you have not already created a local.xml file, create a file with this name in app/design/frontend/your_package/your_theme/layout/
and add the below code. If you are already using a local.xml file, simply integrate the code into it.
<?xml version="1.0" encoding="UTF-8"?> <layout> <default> <reference name="root"> <block type="core/text_list" name="customblock" as="customblock" translate="label"> <label>Custom Block</label> </block> </reference> <reference name="customblockreference"> <block type="core/template" name="customblock" template="customblock.phtml" /> </reference> </default> </layout>
Now clear your cache and refresh your front end. The new custom block should appear highlighted in yellow right above the footer. Nice work! We hope you found this guide helpful.
Guys This is great work, loved the ease in which this has been explained. Kudos! to you guys
Try this method, but no work for me. Copy and paste this code and create all files.
Make sure you followed all steps exactly. Did you make sure to edit the files for the appropriate theme?
@Denis the reference name and block name are same. change it and work
Sorry dear this code not working for me , am new in magento am following just your point but out put nothing any idea ?
Have you double checked your code and references?
I’m new to Magento and this is not working.
Are you sure that on line 10 name=”customblock” is correct?
Steph, yes that is correct, but on the above line, try changing the
<reference name="customblock">
to something else. See cakiem.vn’s comment above. Does that work for you?This doesn’t work for me either. Very discouraging when following a basic tutorial can’t produce a result.
not worked. please tell something else
Sorry guys, there was a type in the code that has been corrected. The reference and the block name were the same, which should not be the case. The code in the post is up to date and working now. Thanks!
Hey All,
The code I see in this post is:
Custom Block
However this was incorrect for me. The issue was in
”
”
should be as we are referencing the block that we just defined in the root.
“”
should probably have a unique name instead so it should be
” ”
For developers learning Magento I strongly suggest that you try and get your hands on a copy of the video training series “Fundamentals of Magento Development”.
hello Sir,
Can anybody explain me page.xml with all attributes because I am unable to understand the page.xml structure.