It turns out that once you understand Magento’s complicated template/layout structure it becomes pretty easy to add content blocks wherever your website needs them. This is just a quick explanation of how that works.

So first things first, find your page layout file. This will be under the app/design folder in your themes layout folder and will be named page.xml. This file contins an element called default that (in magento terms) is called a Hook. A hook represents a page, or page type – in this case the default hook is the layout for any page that hasn’t got it’s own specific hook. Usually everything will be defined in here and then the other hooks will add and remove blocks, rather than starting from scratch each time. Inside the hook element you will then find a number of blocks, the most interesting to us are the header and footer blocks. There are other blocks defined but the header and footer are the bext example as they are built using their own templates and contain both specific blocks and a block that can have other blocks added to it (a text_list). Following the same way those blocks work we want to define a block that in our design will go after our pages main content but before the footer. Lets start with the basics…

<block type="core/text_list" name="content.footer" as="content_footer" translate="label">
   <label>Content Footer</label>
</block>

This code snippet creates a text_list block called content_footer. A text_list is simply a container block and we can then add other blocks to it using layout xml – this is exactly how the left and right blocks work for the left and right columns. We want to have a little bit more control over the design, so lets look at using a phtml template for displaying the whole block…

<block type="core/template" name="content.footer" as="content_footer" translate="label" template="page/html/content_footer.phtml">
   <label>Content Footer</label>
</block>

So, here we are no longer using a text_list but a template and we have an additional attribute to specify the template file itself. This enables us to write raw HTML and PHP in the template but really we want to integrate with Magento’s layout XML a bit more – so we can have different content based on the category or product we are viewing for example.

<block type="core/template" name="content.footer" as="content_footer" translate="label" template="page/html/content_footer.phtml">
   <label>Content Footer</label>

   <block type="cms/block" name="social_media" before="design_store">
      <action method="setBlockId"><block_id>social_media</block_id></action>
   </block>

   <block type="core/text_list" name="additional_content" as="additional_content" translate="label">
      <label>Additional Content</label>
   </block>
</block>

Now we have a template block with a phtml file specified and inside that block we have two more templates – one is a cms block and the other is a text list. This gives us some content that will be displayed from the cms block and a second block that can contain other blocks, as defined in other layout xml. Lets take a look at the phtml file to see how this is actually rendered on the page.

<div class="some_cms_content"><?php echo $this->getChildHtml('social_media') ?></div>
<?php echo $this->getChildHtml('additional_content') ?>

Our first line is a simple HTML div, the content of which is set by the call to getChildHtml with the parameter ‘social_media’. This renders the block specified in the layout xml with the name social_media. Looking back at our example layout xml we see that this is the cms block.

The second line renders the other block – a text list. If that is how we leave our site then nothing will be rendered in that second line, but we now have a named block to which we can add as many other blocks as we like from other layout xml. For example, the wishlist layout file could add the content of the wishlist to that area using the following xml.

<reference name="additional_content">
   <block type="wishlist/customer_sidebar" name="wishlist_sidebar" as="wishlist" template="wishlist/sidebar.phtml"/>
</reference>

Of course, you can also do this from anywhere that you can set the layout xml – so for a specific product, category or cms page.