Adding static blocks to specific CMS pages with Magento layouts

Adding static blocks to specific CMS pages with Magento layouts

While working on a project, I had to add a unique static block between header and main content of the CMS page on each CMS page. Element had to be fully customizable via Magento admin panel and it had to be easy to create on new CMS pages, easily modifiable and removable. Since that element needed to be placed outside of the main content, it couldn’t have been added using CMS in Magento admin. It had to be added using Magento layouts. Here’s how I achieved that.

As you may know, Magento only offers the following handles for CMS pages:

  • Homepage handle and 404-page handle
  • A handle for all CMS pages

If a CMS block had to be shown on the homepage, we would use the homepage handle in our local.xml file. In the same way, if the same static block had to be shown on all CMS pages, we would have used a handle for all CMS pages.

But what about individual user-created CMS pages?

Frontend developer’s solution

Luckily, Magento enables us to define a custom layout for every CMS page by editing it from CMS editor on the Magento admin panel. That way, layout for a CMS page is modified using defined values for that specific page which are stored in the database.

First, we will create a static block that we want to add to a specific CMS page which we’ll name static-block-1 and apply some simple styles to it.

<div class=”element-blue”>
<h3>Static Block 1</h3>
<p>This is blue static element 1 </p>
</div>

Next, we will create a new CMS page that will contain the created static block which will be added through Layout Update XML on Designs tab, along with a header and one paragraph. For this example, we’ll use 1 column layout for all CMS pages.

<reference name="root">
<block type="cms/block" name="myelement">
<action method="setBlockId"><block_id>static-block-1</block_id></action>
</block>
</reference>

And finally, we have to update our template files and add a line of code which calls our element. Since we used 1 column layout for all CMS pages and we will modify 1column.phtml template file. If you want to add the elements to CMS pages that use some other template (like 2columns-left), you need to modify those files. 

<div class="page">
<?php echo $this->getChildHtml('header') ?>
<?php echo $this->getChildHtml('myelement') ?>
…

For this example, I’ve made one additional static block that is different than the first one and two additional CMS pages – one for the new element I’ve created and another one that won’t have any layout updates and because of that, It won’t contain any of the elements that we’ve created.

Results

CMS page 1 with blue static block:

CMS page 1

HTML code of CMS page 1:

01-code-1

CMS page 2 with green static block:

02-cms-2

HTML code of CMS page 2:

02-code-2

CMS page 3 for which we didn’t set any layout updates in its XML and therefore it doesn’t show any created static blocks.

03-cms-3

HTML code of the CMS page 3:

03-code-3

The good and the bad and the alternative

Although this is a really quick and simple solution that works well, it becomes tedious when you have to go through these same steps for every element that you want to add, even on a project that had 6 or 7 CMS pages.

If you want a more backend-oriented solution for this, Tim Reynolds, Magento Certified Developer, wrote an article on a topic of adding widgets to specific CMS pages in which he used event observers to generate unique handles for each CMS page.

So, how do you like this approach? Feel free to share your solutions in the comment section. If you’re going to need any help regarding your Magento development, we would be more than happy to offer you insights and various solutions. Happy coding!

Related Inchoo Services

You made it all the way down here so you must have enjoyed this post! You may also like:

How to generate SSH keys for Git authorization Hrvoje Ivancic
, | 21

How to generate SSH keys for Git authorization

Local development with Valet+ Damir Korpar
Damir Korpar, | 0

Local development with Valet+

Prevent PO Boxes in shipping address field on Checkout Nikola Stojiljkovic
Nikola Stojiljkovic, | 8

Prevent PO Boxes in shipping address field on Checkout

7 comments

  1. Hi Adrian, Thanks for putting up the details here, It’s nicely explain. I also visited Tim’s article which also provides insight. I have a website related to clothing manufacturing for which I want to use a different static blocks which appears on the right side column. If I make any page layout as 2 or 3 panel the same static blocks appears there. I have two questions:
    1. Is it possible to have different static block for different page on the left/right panel?
    2. Is it possible to make static block dynamically change after every 2 minutes?

    Thanks for taking your time out. Please provide your suggestion and comment. Thank you looking forward for your reply.

  2. Article not for a beginner and expert don’t need it..
    My aim is to tell you please break down to each and every steps which you explained.

    1. Hello,
      if you want to use the method described in the article, for homepage you can follow the steps as I described. Since Homepage is a CMS page, you can add a layout update and edit the proper .phtml file. As for the category page, you’ll have to use your local.xml file and category page handlers to set your block

      <catalog_category_view>
      <reference name="root">
      <block type="cms/block" name="myelement">
      <action method="setBlockId"><block_id>static-block-1</block_id></action>
      </block>
      </reference>
      </catalog_category_view>

      and call the block from the …/template/catalog/category/view.phtml or (page.phtml) using the following code:

      <?php echo $this->getChildHtml('myelement') ?>

      Adrian

  3. I think, that you forget write about layout update for cms page 2:

    <reference name="myelement">
    <action method="setBlockId">
    <block_id>static-block-2</block_id>
    </action>
    </reference>

    Also attribute “after” is useless in this case. It works only for core/text_list blocks.

    1. Hello,
      I’ve tested and updated the code in the article. Thank you for pointing that out to me. Regarding the code for other elements, as I’ve mentioned in the article, those elements are created additionally just as an example to showcase the functionality and customization of those elements. Also, those elements are created in the same way as the first one so I didn’t think there was a reason to write all of the codes again.

      Adrian

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.