How To Theme for Concrete5

Posted by admin on February 18, 2011


Template Areas: Each area on your template is divided among "areas" where you can add different blocks.  These block can be anything from navigation to YouTube videos.

Page Types: There is a default page type, which your pages will automatically default to... I suggest having the following types (yours will vary depending on the type of sub-pages you plan)

  1. Home Page
  2. Full Page
  3. Left Sidebar or Right Sidebar


Look at your design, decide what areas you will have content in.  Most will have:

  1. Header
  2. Header Nav
  3. Main Content Area
  4. Sidebar
  5. Footer

Some designs I have two footer areas, some have persistent Call To Action bar under the nav and above the content area.  Plan for where these content areas should be, and what kind of min/ max amounts of flexibility to have.

The standard naming conventions are:

  • Header Nav - This area holds the header autonavigation block. This is typically the "top level" pages on a site.
  • Header - This area holds the header image.
  • Main - This is the template's main content area.
  • Sidebar - This area is present if the template contains a sidebar.

which can be found at:

Code snippets:


Pretty much all you need to remove is the title tag and any tags. Replace that with:

<?php Loader::element('header_required'); ?>


This tag will auto-generate a title tag, and all Meta tags for you site in your header.

Script Tags:

For any references to files, images or scripts / css in your header and in the rest of your theme that reside in your theme's folder, you'll want to have Concrete5 create the url... this piece of code does the trick:

<?php print $this->getThemePath() . "/" ?>


Remember to put at the beginning all .css, .js and image references to files with this code.


Remember to use the standard naming conventions... doing this will help if you plan to change themes, and if you want to have the theme work on multiple installs without too many issues.

Wherever you want to have content that is editable - simple add the following code:

$a = new Area('Header'); 

*** Change the 'Header' to the area name that corresponds to where you are editing.

If you want to limit the number of blocks able to be added, simple add the line:


Where 3 is the max number of allowed blocks in this area. 

So it would look like:

$a = new Area('Header'); 

If you are wanting to limit the types of blocks allowed, the best thing to do is use advanced permissions and set the block types through that interface. (

There is a better way now to call your CSS files.



Instead.  It is the new way to do it.