Creating Custom Regions In Drupal 6 Themes

Posts · 28th May 2009 · 42 comments

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"

Clear the cache

Long story short, whenever we make changes to a Drupal 6 theme's .info file we must clear 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 clearing 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án29th May 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

Laurence29th May 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 Kumar1st June 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...

Leon13th June 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! :)

Laurence14th June 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...23rd June 2009 @ 9:13pm

Was looking for this, thanks for sharing!

Pip4th July 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.

Eugene5th July 2009 @ 7:36pm

This article helped me the most. Thanks.

Guest27th July 2009 @ 1:03pm

Perfect!

Jackson Jacob29th July 2009 @ 6:55am

good Tutorial, Thnx...

Oni30th July 2009 @ 1:04am

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

Steve30th July 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.

Laurence7th August 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.

Jeril9th August 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..!

Laurence10th August 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.

Nabil29th August 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)

Nbail5th September 2009 @ 10:55am

Guys anyone can help me with the above issue?

Nabil11th September 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.

Nabil11th September 2009 @ 2:59am

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

Daniel23rd September 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

David10th October 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

Przemek12th October 2009 @ 4:07pm

Great tutorial! Thank You!!!

guiz21st October 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 :)

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

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

Catherine Ellis3rd November 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ò19th November 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 Kets23rd November 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.

mohsin24th December 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

Guest29th December 2009 @ 4:35pm

Cool tutorial. I love drupal. Thank You

ghost3rd February 2010 @ 4:09am

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

Joris10th February 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

Akbar13th February 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 Garden7th March 2010 @ 8:45pm

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

Simon21st March 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

AKLP24th March 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 Goyal24th April 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.

raph11th May 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 ?

Shrriam21st June 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!

SpYke30th June 2010 @ 3:51am

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

thanks!!!

Dino15th July 2010 @ 5:24pm

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

Rencontre17th July 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.

Ashish4th August 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.