CMS pages

Layout

Layout Name	Usage
1 column	Default. Designed for the majority of content (long-form text or complex HTML).
2 columns with left bar	Never used.
2 columns with right bar	Never used.
3 columns	Never used.
Custom: XYZ	Custom templates are created as needed for complex content / multi-column layouts. This ensures content is designed for rather than shoehorning into Magento’s generic multi-column layouts.

Layout update XML

When a CMS page contains long-form content only (headings, paragraphs, lists, inline images) use the std class so standard formatting applies:

<reference name="cms.wrapper">
    <action method="setElementClass">
        <value>std</value>
    </action>
</reference>

When the CMS page contains patterns and other complex HTML, unset the class value. It must be explicitly set as empty:

<reference name="cms.wrapper">
    <action method="setElementClass">
        <value></value>
    </action>
</reference>

Markup tags

Markup tags simplify content management by abstracting references to internal URLs and content.

Syntax

• No space after opening curly brace
• No space before closing curly brace
• Prefer single-quotes around values (exception: quote escaping)

# Good
{{tag property='value'}}         # Nice and simple
{{tag property="Men's Jeans"}}   # Use double-quotes to escape single-quotes in content

# Bad
{{ tag property='value'}}    # No space after opening curly brace
{{tag property='value' }}    # No space before closing curly brace
{{ tag property='value' }}   # No inner spaces on both curly braces
{{tag property="value"}}     # Use single quotes if possible

Store URL

Output an absolute URL with the trailing slash. Works with up to three segments.

# Usage
<a href="{{store url='help'}}">Help</a>
<a href="{{store url='privacy-policy'}}">Privacy Policy</a>
<a href="{{store url='men/pants/denim'}}">Men’s Denim Pants</a>

# Output
<a href="http://site.com/help/">Help</a>
<a href="http://site.com/privacy-policy/">Privacy Policy</a>
<a href="http://site.com/men/pants/denim/">Men’s Denim Pants</a>

Store direct URL

Output an absolute URL without the trailing slash. It’s necessary for linking URLs with parameters and directly to files with extensions.

# Usage
<a href="{{store direct_url='men/pants?color=31'}}">Green Pants</a>
<a href="{{store direct_url='media/content/size-chart.pdf'}}">Size Chart PDF</a>

# Output
<a href="http://site.com/men/pants?color=31">Green Pants</a>
<a href="http://site.com/media/content/size-chart.pdf">Size Chart PDF</a>

Media URL

Output an absolute URL to the media directory.

# Usage
<img src="{{media url='hobbiton/frodo.jpg'}}" />

# Output
<img src="http://site.com/media/hobbiton/frodo.jpg" />

Skin URL

Output an absolute URL to the skin/frontend/{package}/{theme} directory.

# Usage
<img src="{{skin url='img/aragorn.jpg'}}">
<script src="{{skin url='js/legolas.js'}}"></script>
<link href="{{skin url='css/gimli.css'}}" rel="stylesheet" media="screen">

# Output
<img src="http://site.com/skin/frontend/{package}/{theme}/img/aragorn.jpg">
<script src="http://site.com/skin/frontend/{package}/{theme}/js/legolas.js"></script>
<link href="http://site.com/skin/frontend/{package}/{theme}css/gimli.css" rel="stylesheet" media="screen">

CMS blocks

Render a CMS block directly into a CMS page/block.

{{block type='cms/block' block_id='the_block_id'}}

Templates

Render a PHTML file directly into a CMS page/block.

{{block type='core/template' template='cms-content/page/index.phtml'}}

Reference

• Magento User Guide: Markup Tag Syntax