Add a Static Block to a Page in Magento

In Magento there are three ways to display static blocks on a page, hopefully this post can help you do it.

Create a Static Block

Regardless of which method you use, you need a static block to work with. The very first step is to create a static block:

  • Login to the Magento admin.
  • Navigate to CMS > Static Blocks.
  • From the Static Blocks page, click the Add New Block button in the top right corner of the page.
  • From the New Block page, enter a human readable title into the Block Title field, such as “Summer Sale Banner”.
  • In the Identifier field, enter the ID for the static block. This identifier will be used later to import the block into a page. Make sure the Identifier is lowercase and separated by underscores to conform to Magento‚Äôs ID syntax, something like “summer_sale_banner”
  • Select the Store View of which your new block will belong. Leave this set to All Store Views unless you have good reason not to.
  • Set the Status to Enabled.
  • Enter some content into the Content field.
  • Click the Save Block button to create your static block.

Shortcode Method

The shortcode static block method in Magento is used to display the content of a static block inline within the content of a CMS page. To do that, put a shortcode snippit for the block into the Content Section (WYSIWYG editor) of a CMS page.

The following code will place a static block with the ID of “summer_sale_banner” inline in a CMS page:

{{block type="cms/block" block_id="summer_sale_banner"}}

PHP/PHTML Method

If a static block needs to be placed outside the content area of a CMS page, or used on a non CMS page, the quickest method is to call the block directly from a .phtml file. You can turn-on the Magento Path Hints feature in the admin by going to System > Configuration > Advanced > Developer > Debug in order to locate the .phtml file for the area you want to edit.

Once you have found the correct .phtml file to edit (and copied it into your theme), including the following code will place a static block with the ID of “summer_sale_banner” on the page:

<?php
    echo
        $this->
        getLayout()->
        createBlock('cms/block')->
        setBlockId('summer_sale_banner')->
        toHtml()
    ;
?>

XML Layout Method

Putting a code snippet in a .phtml is the easiest way to add a static block to a page, but for maximum extensibility it is best if you can add static blocks through the Magento XML template system. Admittedly this method takes an understanding of Magento’s Layout XML system, but it provides the most upgrade-proof and consolidated way of implementing static blocks in a Magento theme. There are a number of reasons to not use this method, one being that if you need to include a static block within the content of a regular module block, you may need to do some fancy customizations to get what you want.

XML layout updates should be put in the theme’s local.xml file. The following definition can be used to define a static block with the ID of “summer_sale_banner” on a page:

<block type="cms/block" name="summer_sale_banner" before="-">
      <action method="setBlockId"><block_id>summer_sale_banner</block_id></action>
</block>

In practice you will want to define the template and the location within it that the static block should appear by wrapping the definition in the proper tags within the local.xml file. Although a real local.xml file would contain much more, the following example shows the complete content of a local.xml file which defines a static block with the ID “summer_sale_banner” within the “footer” section of the “default” template.

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="footer">
            <block type="cms/block" name="summer_sale_banner">
                <action method="setBlockId"><block_id>summer_sale_banner</block_id></action>
            </block>
        </reference>
    </default>
</layout>