Magento – Add custom content layouts for CMS pages

Magento

Sometimes in the main content block of your theme, the design requires to have a complicated CMS page content layout that stray from using basic linear content (Adding blocks below whatever is under the main content block). You may want various blocks to be set anywhere you want EG the homepage..

This post shows a good clean way to use the layout XML and PPH in your layout files to position blocks of content exactly where you want inside your main content block.

One possible solution would be to add Magento’s block tag shortcode into the CMS page content editor:

{{block type="wjfeatured/wjfeatured" template="wjfeatured/accordian.phtml" limit="5" position_set="1"}}

You could then add as many CMS or other module blocks and arrange them in DIVs to get the desired layout. This isn’t bad as such.. actually its quite cool. But could get a little difficult to manage from a store editors point of view. If the store user doesn’t understand your HTML, but still wants to manage various content, the layout could break quite easily. Not to mention you don’t get to take full advantage of Magento’s Custom Design (being able to overwrite your XML over selected dates.. Great for seasonal promotions).

Here is how you would add a block under the content.


   /block>

That’s cool, but as I said before it will only appear linear, meaning only allows you to add blocks above or below the content block..
So what we’ll do is add a new custom block called something like ‘custom_content’ that will appear below the existing content block, and apply a new HTML template so we can do what we want to it..

You want to add a new custom block in page.xml that we will reference after in the Design tab on the Magneto CMS edit page screen.

Enter in page.xml (inside the block name=”root”):

	    
	    
	    

Notice we have given the name of the new block “custom_content”.. We will now reference this block in the CMS Design screen, instead of the Content screen. Then set the template of the custom_content. In this case a homepage template file (home.phtml)


   
   

    
   

This will now inject your blocks into the layout file using the getChildHtml() method. Note the value of ‘name’ in the block element matches the value in the method..

getChildHtml('featured') ?>

That’s it! Seems a bit complicated but once you’ve got your head around Magento’s layout XML it works quite smoothly.

Hope this helps anyone, feel free to comment for any help.