In Magento, static blocks are short snippets of HTML that can be called from template pages.

Static blocks are an excellent way to add sidebar content, manage category banners, or even add content sliders to a site’s home page, category pages, or product pages.

In this short tutorial, I will demonstrate how to add a home page merchandising image using static blocks and Magento version 1.4.1.1.

Step No. 1: Create the Static Block

In the Magento administration panel, navigate to CMS > Static Blocks. Select “Add New Block” from the right-hand side of the page.

The new block tool asks me for four fields of information. “Block Title” is the internal name for the block and should describe its purpose. “Identifier” is how the block will be specified in the layout XML, so this must be a valid XML name. For my example, I used “test.”

“Status” is self explanatory, as is “Content.” For this tutorial, I am adding an image file. The image is stored in the images folder at skin > frontend > default > modern, wherein “default” is the package name and “modern” is the theme name, both of which can vary depending on your implementation.

Magento static blocks don’t accept PHP. So I use some block-specific mark up to get the URL for the skin, and then add the folder and file specifics.

<img src="{{skin url=images/merchandising-image.png}}" alt="merchandising example banner shows a cookie topped with a chocolate" />

Saving the block finishes the first step.

Step No. 2: Update the Layout File

Magento uses XML layout files to help dynamically position blocks. For my example, I am adding a static block to the home page, so I need to work with page.xml. But, for example, if I were adding content to product category pages, catalog.xml would be the proper XML file.

To find the layout files, I navigate to app > design > frontend > default > modern > layout.

I am going to place my static block in the header section of the page. So I look for the code with a name of “header.” In my copy of page.xml, the appropriate code started on line 66.

                <block type="core/text_list" name="top.menu" as="topMenu"/>
                <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
                <block type="page/template_links" name="top.links" as="topLinks"/>
                <block type="page/html_wrapper" name="top.bar" as="topBar" translate="label">
                    <action method="setElementClass"><value>top-bar</value></action>
                    <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
                </block>
                <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
                    <label>Page Header</label>
                    <action method="setElementClass"><value>top-container</value></action>
                </block>
            </block>

To this section, I added the following code.

<block type="cms/block" name="test">
    <action method="setBlockId"><block_id>test</block_id></action>
</block>

After my change, this section of page.xml looked like the following.

            <block type="page/html_header" name="header" as="header">
                <block type="core/text_list" name="top.menu" as="topMenu"/>
                <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
                <block type="page/template_links" name="top.links" as="topLinks"/>
                <block type="page/html_wrapper" name="top.bar" as="topBar" translate="label">
                    <action method="setElementClass"><value>top-bar</value></action>
                    <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
                </block>
                <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
                    <label>Page Header</label>
                    <action method="setElementClass"><value>top-container</value></action>
                </block>
                <block type="cms/block" name="test">
                    <action method="setBlockId"><block_id>test</block_id></action>
                </block> 
            </block>

Step No. 3: Modify the Template File

Next, I need to modify the template file to reference my static block. For my example, this will be header.phtml, which is located at app > design > frontend > default > modern > template > page > html.

In header.phtml, I need to place the following code exactly where I want my static block to appear. It can go anywhere within the file.

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

As a comparison, the screen capture below shows the example home page, before I added the code above to the header.phtml template file.

The next image shows the site after this step has been implemented.

Summing Up

Static blocks are an excellent way to add content to any page in the Magento platform. Regardless of where you want the block to appear, the process is the same: (1) make the block; (2) update the layout file; and (3) modify the template file.

There are two problems that sometimes arise when adding blocks. So, if your static block is not showing up for some reason, (1) try flushing the Magento cache from the platform administration panel, or (2) try renaming (changing the identifier) or recreating the block.

Related Articles

• Add Custom PHTML Templates to Magento CMS Pages
• Magento Commerce Theme Basics
• Seven Magento Videos for the Holidays

Search Terms

• Magento
• templates
• home page design