CMS pages


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">

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">

Markup tags

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


  • 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="">Help</a>
<a href="">Privacy Policy</a>
<a href="">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="">Green Pants</a>
<a href="">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="" />

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="{package}/{theme}/img/aragorn.jpg">
<script src="{package}/{theme}/js/legolas.js"></script>
<link href="{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'}}


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

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