November 29, 2008

Creating custom regions in Drupal themes

Filed under: Tips — Tags: , — Webopius @ 7:31 pm

Other Drupal articles

Drupal articles

A lot of people in the Drupal world have been asking about how to create custom themes beyond the traditional 2 or 3 column layout with a header above and a footer below. The tip below applies to Drupal 6.

Standard Drupal Themes

Most Drupal themes have a number of pre-defined regions that you can use in your templates – $header, $footer, $left, $right and $content. Within your theme, you will do something like this in your page.tpl.php file to render the relevant region on the web page:


<?php if ($left): ?>
<div id="sidebar-left" class="sidebar">
<?php print $left ?>
</div>
<?php endif; ?>

The example above outputs the content of all blocks that have been mapped by the administrator to the left sidebar region.

Great so far, but what if you want do something a bit more creative with your web site? For example, if you ran an online newspaper with a leading feature article section and sub-sections for sports, education and finance, you would find the $left, $right, $content model pretty limiting.

External resources for this article:

Drupal Panels Module
Drupal Views Module

Of course, you could use the excellent panels module for Drupal but at the time of writing, this isn’t released for Drupal 6 yet, it’s pretty complex and like many developers, myself included, you may want to have complete control over the layout of your site and the number of div wrappers.

The solution

The solution is actually very simple but like many things, not obvious unless you know. It’s not even clearly documented in the comprehensive and excellent Pro Drupal Development book by John VanDyk.

Here’s what you do.

In your theme’s .info file, include the following section:


regions[left] = Left Sidebar
regions[right] = Right Sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

This just repeats the standard region types available in all themes. Now, add lines like this:


regions[sportsnews] = Sports News
regions[financenews] = Finance News

Go into the Drupal admin system and view the blocks page (admin -> site building -> blocks). You should see your new regions listed and available for you to add blocks into. If you don’t you may need to refresh your theme by going to the admin -> site building -> themes page and saving the configuration.

Now, you can add blocks to these new regions and they can be rendered on your site by simply including them in your page.tpl.php file like this:


<div>
Sport news blocks here...
<?php print $sportsnews ?>
</div>
<div>
Finance news here...
<?php print $financenews ?>
</div>

Easy?! You now have complete control over the layout of your page, the naming of the regions and the content that is displayed in these regions. We combine this technique along with the Views Module to create new view based blocks.

In the newspaper example above, we would create a new block type view called ‘Sports News’ based on Nodes but filtered by a custom Taxonomy we created called ‘Sports’. We’d then map this block to the ‘Sports News’ region we created earlier.

I hope Drupal developers find this post useful. If I haven’t made anything clear, please post a comment and I will do all I can to help.

  • Tags