Creating Custom Regions In Drupal 6 Themes

Previously, I covered the topic of creating custom regions in Drupal 5 themes. However, Drupal 6 introduced a new process for creating custom regions in themes and it is still one of the topics people ask about most frequently.

So, here's a tutorial on how to create custom regions in your Drupal 6 themes. In this example I will use the Garland theme, and insert a new region called 'Uber content', which I'll position above everything in the main content area.

Custom Drupal 6 theme region

It's basically a two-step process:

  • step 1 - define the custom region in your theme's .info file
  • step 2 - insert some PHP in your theme's page.tpl.php file wherever you would like the new region to appear

Step 1 - define the custom region in your theme's .info file

All Drupal 6 themes contain a .info file. This is a required element in Drupal 6 themes which allows Drupal to 'see' your theme.

The .info file for your Drupal 6 theme will be located within the root of the theme's main folder.
e.g. Garland's .info theme file is located at:

/themes/garland/garland.info

whilst a non-core .info theme will (should ;) ) be located at:

/sites/all/themes/mytheme/mytheme.info

('mytheme' should be replaced with the actual name of your theme e.g. 'acquia_marina')

So, let's open Garland's .info file (garland.info). It contains the following:

; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $
name = Garland
description = Tableless, recolorable, multi-column, fluid width theme (default).
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css

; Information added by drupal.org packaging script on 2009-04-30
version = "6.11"
project = "drupal"
datestamp = "1241050838"

The first thing we want to check is whether or not any regions have already been defined in our theme's .info file.

Regions are defined in the form:

regions[regionname] = Region name

We can see that there are no regions defined in Garland's .info file. However, there are regions available to our blocks in Garland's blocks admin section (admin/build/block). So, what's the deal? Well, unless otherwise specified in the .info file, all Drupal 6 themes contain a set of default regions - namely: Left sidebar, Right sidebar, Content, Header, and Footer. Garland is one such theme.

We are about to change that! We are going to declare a new theme region in the .info file:

regions[ubercontent] = Uber content

However, whilst adding just that line to our .info file will declare the ubercontent region successfully it will also wipe out all of the default regions, and result in warnings on the blocks page:

Drupal 6 warning messages

Instead, when declaring a new region for the first time via the theme's .info file we must also declare all of the default regions as well as the new region. So, we must add:

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[ubercontent] = Uber content

to the theme's .info file, which will give us a final .info of:

; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $
name = Garland
description = Tableless, recolorable, multi-column, fluid width theme (default).
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[ubercontent] = Uber content

; Information added by drupal.org packaging script on 2009-04-30
version = "6.11"
project = "drupal"
datestamp = "1241050838"

Empty the cache

Long story short, whenever we make changes to a Drupal 6 theme's .info file we must empty the cache for those changes to be found. Two easy ways to do so are:

  • navigate to your site's admin 'Performance' page (admin/settings/performance), scroll down to the bottom section entitled 'Clear cached data' and click on the button marked 'Clear cached data'
  • install the devel module, enable the block which this module generates, and within that block there will be an 'Empty cache' link that you can click

Upon emptying the cache you should receive a success message saying 'Caches cleared'.
Now we’re ready for step 2.

Step 2 - insert some PHP in your theme's page.tpl.php file wherever you would like the region to appear

This step is still the same as for custom regions in Drupal 5 themes.

Open your theme's page.tpl.php file and determine where you want the new custom region to appear. In Garland we are going to insert our ubercontent region above all of the other main content. To do so, we open Garland's page.tpl.php file and locate the following code (lines 66-67):

...
<div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">
<?php print $breadcrumb; ?>
...

we then insert our new code:

<?php print $ubercontent ?>

with the result being:

...
<div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">
<?php print $ubercontent ?>
<?php print $breadcrumb; ?>
...

save, and we're done. Content can now successfully be added to and displayed in our new 'Uber content' region.

Custom Drupal 6 theme region

Custom Drupal 6 theme region

Further reading

For more info on the .info you should check out the Drupal 6 theme guide, specifically:

42 comments

Palócz István May 29th, 2009 @ 7:47am

Why not create a new subtheme and use garland for base theme? Don't forget: Every time you hack core God kills a kitten!

pp

Laurence May 29th, 2009 @ 11:37am

@ Palócz - yes, clearly, I am not advocating hacking core. Garland was simply used as an example (which is universally recognised) to demonstrate the process. And I wanted the focus of the tutorial to be on creating custom regions, not setting up alternate themes.

Lalit Kumar June 1st, 2009 @ 10:25am

:-) Thank you so much.. This is what I was looking for... its really very helpful.. thanks again and keep it up doing such gud things...

Leon June 13th, 2009 @ 3:52pm

Hi,

I spent the last day or two trying to find a way to put the number of nodes in one term category using views (exactly like you did on you categories section on the right sidebar).

Any chance that you could give me some hint about how to do it? (Is with views it self or with other module)?

Thanks in advance, and, you have a great web site here! :)

Laurence June 14th, 2009 @ 11:57am

@ Lalit - cool, glad it was helpful.

@ Leon - it's done using some custom PHP which I put in a block. Check out a previous post - Lhmdesign Redesign Write Up - which shows the actual code I used (scroll down to the subsection 'Categories'). Just be aware that the code posted is for Drupal 5 so it may be slightly different in Drupal 6, although it should point you in the right direction.

Atea Webdevelop... June 23rd, 2009 @ 9:13pm

Was looking for this, thanks for sharing!

Pip July 4th, 2009 @ 11:03am

Yes this is one of the topic I was searching to learn for some time to have customized region in the right corner of the page. I have learnt the nuances and now i will try to implement with my drupal 6.

Eugene July 5th, 2009 @ 7:36pm

This article helped me the most. Thanks.

Guest July 27th, 2009 @ 1:03pm

Perfect!

Jackson Jacob July 29th, 2009 @ 6:55am

good Tutorial, Thnx...

Oni July 30th, 2009 @ 1:04am

Excellent Tutorial! This is exactly what I was looking for. Thank you!

Steve July 30th, 2009 @ 4:33pm

I found this very helpful, except that the page.tpl.php file for the theme I used isn't as simple as the one for garland, so I can't get it to work. I'm using the jaded theme from agileware. It's an awesome theme, except it's very complicated php, and I know nothing about PHP.

Laurence August 7th, 2009 @ 12:33pm

Hi everyone, thanks for the comments :)

@ Steve - yes I downloaded the Jaded theme to have a look and its 'page.tpl.php' file is definitely different to Garland! However, the principle is exactly the same - you just need to insert:

<?php print $ubercontent ?>

wherever you want the new region to appear. So, let's say you want it to appear above the main content. In Jaded's 'page.tpl.php' file you'd find the code (lines 58-59):

...
<div class="PostContent">
<?php if ($breadcrumb): echo theme('breadcrumb', $breadcrumb); endif; ?>
...

and insert it like so:

...
<div class="PostContent">
<?php print $ubercontent ?>
<?php if ($breadcrumb): echo theme('breadcrumb', $breadcrumb); endif; ?>
...

Hope that helps you out.

Jeril August 9th, 2009 @ 3:24pm

I have created my region exactly how you have mentioned for my website using Drupal 6 and I have placed a drupal block to this custom region created. Now I do not want this block to appear on certain pages of my drupal website, so under the configuration section of that particular block, I have set the constraint in "Show on every page except the listed pages.". When I do so, obviously the block do not show up in those pages rather it leaves an empty space out there. Now when I create a panel, the panel page is displayed under this custom region created... Is there any option to override the custom region created on certain pages ? Once again thank you for your reply and for writing such an excellent tutorial..!

Laurence August 10th, 2009 @ 1:18pm

@ Jeril - if your custom region is empty it should not by default be causing a space in your layout, so it sounds like you might have some extra HTML and CSS applied to the custom region which is causing the space on the page, e.g.

// in your page.tpl.php file
<div id="ubercontent"><?php print $ubercontent ?></div>
// in your css file
#ubercontent {
  padding: 20px;
}

The easiest way around this is to use a PHP if statement to control the custom region output in your 'page.tpl.php' file, like so:

<?php if ($ubercontent): ?>
<div id="ubercontent"><?php print $ubercontent ?></div>
<?php endif; ?>

The custom region code should then only output if there is content which needs to be displayed in that region. Which in your case means it will only appear on the pages where you have the block displaying and should resolve the empty space issue.

Nabil August 29th, 2009 @ 10:50am

Your tutorial is definitely what I was looking for but the implementation i am looking for is a bit different. I am using a different theme, Vitzo. So in my page.tpl.php I have :
...

<?php
if (!$is_front) echo $breadcrumb;
?>

...

<?php
echo $content;
?>

...

and my custom region is

<?php
print $crousel;
?>

If I print this custom region before and after $content or $breadcrumb, it works fine as you have illustrated. Like I get my Crousel block either at top of page or before or after Content.

However, In my node-XYZ.tpl.php file where I want to print this Crousel region, I am not outputting

<?php
print $content;
?>

but a bunch of different fields as follows.
...

<?php
print $node->etc1;
?>
<?php
print $node->etc2;
?>
<?php
print $node->etc3;
?>
<?php
print $node->etc4;
?>

...

I want this custom region to be printed between etc1 and etc2fields. I have tried

<?php
print $crousel;
?>

between etc1 and etc2in my node-XYZ.tpl.php but no luck. Do you have any suggestion how should I take care of this.

(sorry if i confused you)

Nbail September 5th, 2009 @ 10:55am

Guys anyone can help me with the above issue?

Nabil September 11th, 2009 @ 2:57am

Solution:
in template.tpl.php

function mytheme_preprocess_node(&$vars, $hook) {
$vars['cstm_region'] = theme('blocks', 'cstm_regiont');
}
(no php tags)
as in my case, node-XYZ.tpl.php

<?php
print $cstm_region
?>

i dint put anything in page.tpl.php
clear cache from admin>site config>performance

and it should work.

Nabil September 11th, 2009 @ 2:59am

typo above:$vars['cstm_region'] = theme('blocks', 'cstm_regiont');
should be $vars['cstm_region'] = theme('blocks', 'cstm_region');

Daniel September 23rd, 2009 @ 7:51pm

I am so grateful for this tutorial..It was a pain to read through another bunch of stuff to find exactly what I am looking for. I did everything but I still have a problem..My new region area wont display the block on my site. The region area shows in the block admin area and it shows what I inserted in it but just wont display it on the site? any idea as to what I doing wrong or need to do

David October 10th, 2009 @ 10:57am

I like the Admin menu module for clearing caches, including the theme cache, but sometimes I include a function in template.php that automatically clears the theme cache on each page load if that is not available in the theme I start with (like Zen, which does offer a checkbox for clearing cache on page load).

Great tutorial.

- David

Przemek October 12th, 2009 @ 4:07pm

Great tutorial! Thank You!!!

guiz October 21st, 2009 @ 3:59pm

Thanks a lot !

I was looking for creating custom regions but all tutorials were used for Drupal 5.x.. And i found your blog and your great explanations for drupal 6 :)

ลงประกาศฟรี October 27th, 2009 @ 5:48pm

its worked!!
i got it
now i already added custom region in my site
Thanks a lot for great tutorial

Catherine Ellis November 3rd, 2009 @ 8:45pm

For me the brilliance of regions are that I can add them before and after the page node content, it saves me cluttering up the theme templates.

Does anyone know if declaring a lot of regions effects performance?

niccolò November 19th, 2009 @ 2:15pm

great tutorial, the only problem was that drupal add his own code like this:

<div class="block block-block" id="block-block-1">
    <div class="block-top">
        <div class="title">
            <h3></h3>
        </div>
        <div class="content">

and add me spaces all over the region ;(

Michiel Van Kets November 23rd, 2009 @ 3:03pm

I tried all the way to fix the number exactly like you did on you categories section.please give me some more helpful tips because i am unable to work according to your tips.as they are not that clear.thanks for the post but please do expand.

mohsin December 24th, 2009 @ 5:53pm

Hi, thanks for this great article, I have successfully implement the steps you have told and I was successful. But there is one minor problem, I want to style my new content region, similar to my other regions and there are some placement problems also. e.g. I want to add a rectangular ~300px region above my left/right side bar on the site.

I am able to add the region but it does not fit there properly, can you recommend some tips. Thanks

Guest December 29th, 2009 @ 4:35pm

Cool tutorial. I love drupal. Thank You

ghost February 3rd, 2010 @ 4:09am

Great tutorial. Nice work and glad I found your website! Keep up the great work.

Joris February 10th, 2010 @ 12:00pm

Hello Laurence,

All the new blocks I added have the same style , how can I gif a certain Block an specific style.

I've tried

<?php
print $content_top
?>

, but that didn't change anything.

Hope you can help me out here.

Thanks in advance.

Grtz Joris

Akbar February 13th, 2010 @ 7:08pm

Very nice tutorial! I want to make a custom region to put above left side block and be able to put Printer-friendly version there, but I cannot make it happen. I am not sure where exactly I need to put the region within the page.tpl.php. Any help ith this appreciated. I am trying this for now with Garland theme.

thanks

Drupal Theme Garden March 7th, 2010 @ 8:45pm

I must notice that you have always very useful articles about drupal themes. Thanks for this one.

Simon March 21st, 2010 @ 9:50am

Great tutorial thank you!

Question: i would like to add my custom region directly to the right of my site logo. At the moment, following your instructions, it creates a region below the logo. I am using Colourise theme and want some sort of header banner next to the logo..

Thanks again!

Simon

AKLP March 24th, 2010 @ 2:08pm

Hi, and thanks for the great tutorial.
I`ve succesfully added 2 regions over the content region but what i want to do is make them be side by side

like

[region1]region2]
[content---region]

Do you know what i have to edit to make that happen? (its mostly for a 3 block footer :(

Thanks in advance AKLP

Sudeep Goyal April 24th, 2010 @ 10:16pm

Nice Tutorial. Out of everything in Drupal theming, I find drupal menu theming the most complex and feel same is with others as well. Maybe, this tutorial I wrote help in drupal menu theming by overriding standard menu API functions in template.php.

raph May 11th, 2010 @ 3:36pm

Would someone be kind enough to say me how this region can be programmatically defined in the theme rather by the GUI ?
I tried a bunch of filenames :
.tpl.php
_.tpl.php
block-.tpl.php
...

But no way !
$region is always empty in page.tpl.php.

Any hint ?

Shrriam June 21st, 2010 @ 8:53pm

THANK YOU !!!! *whew* that was somethin that s been buggging me ever since i started with drupal!...which is obviously not too long ago!

Thanks mate!

SpYke June 30th, 2010 @ 3:51am

Hii, is there a way to center the content in this custom region??

thanks!!!

Dino July 15th, 2010 @ 5:24pm

Great! That's pure rocking!! Thank you.

Rencontre July 17th, 2010 @ 11:35pm

Simple as hell, thanks. It is quite disturbing to customize your Drupal themes at first, but habit comes quickly. So, remember, when you want to reduce the HTML size of a theme, you can edit the page.tpl.php to remove a region and the info file to do the same.

This blog is very handy I think, don't forget to couple it with the Drupal API site.

Ashish August 4th, 2010 @ 8:38pm

Thanks a ton.
This is exactly what i was looking for.

Great job

Comments are closed

If you want to ask a question or have something to add please contact me.