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

Further reading

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

Bookmark/Search this post with:

Posted by Laurence @ 07:57PM on May 28th 2009

Tags:

41 comments

Palócz IstvánMay 29th 2009 @ 07: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!

LaurenceMay 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 KumarJune 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...

LeonJune 13th 2009 @ 03: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! :)

LaurenceJune 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 Webdevelopment & Search Engine OptimisationJune 23rd 2009 @ 09:13PM

Was looking for this, thanks for sharing!

PipJuly 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.

EugeneJuly 5th 2009 @ 07:36PM

This article helped me the most. Thanks.

GuestJuly 27th 2009 @ 01:03PM

Perfect!

Jackson JacobJuly 29th 2009 @ 06:55AM

good Tutorial, Thnx...

OniJuly 30th 2009 @ 01:04AM

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

SteveJuly 30th 2009 @ 04: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.

This is the site:
www.alliance1.org/nc09

LaurenceAugust 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.

JerilAugust 9th 2009 @ 03: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..!

LaurenceAugust 10th 2009 @ 01: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.

letsnurtureAugust 22nd 2009 @ 11:25AM

hi drupalers,

Nice tips to distribute webpage into different sub sections.

Thanks for great efforts..

Regards,
Web-Farmer

NabilAugust 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)

NbailSeptember 5th 2009 @ 10:55AM

Guys anyone can help me with the above issue?

NabilSeptember 11th 2009 @ 02: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.

NabilSeptember 11th 2009 @ 02:59AM

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

AdrianoSeptember 22nd 2009 @ 07:59PM

A clear and concise Drupal tutorial!

What a relief, thank you.
I can now go go ahead with my theme development plans.

Right after I subscribe to your blog :)

DanielSeptember 23rd 2009 @ 07: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

DavidOctober 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

PrzemekOctober 12th 2009 @ 04:07PM

Great tutorial! Thank You!!!

guizOctober 21st 2009 @ 03: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 @ 06:48PM

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

Catherine EllisNovember 3rd 2009 @ 09: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 @ 03: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 KetsNovember 23rd 2009 @ 04: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.

Michiel Van Kets

Kang UsepDecember 8th 2009 @ 09:57AM

Thanks for sharing ... this is what i am looking for

บ้านมือสองDecember 11th 2009 @ 05:12PM

nice Tutorial thanks for sharing

GuestDecember 15th 2009 @ 11:25PM

please help me add a right side bar on this theme...

ive done the step one. but i dont know where to put

<?php
 print $right; 
?>

on my page.tpl

<?php
 print $head_title 
?>

<?php
 print $head 
?>

<?php
 print $styles 
?>

<?php
 print $scripts 
?>

<?php
$fblike_picto_title = theme_get_setting('fblike_picto_title');
$fblike_picto_title_logo_slogan = theme_get_setting('fblike_picto_title_logo_slogan');
$fblike_picto_title_logo_font = theme_get_setting('fblike_picto_title_logo_font');
$fblike_picto_title_slogan_font = theme_get_setting('fblike_picto_title_slogan_font');
$fblike_picto_title_title = theme_get_setting('fblike_picto_title_title');
$fblike_picto_title_title_font = theme_get_setting('fblike_picto_title_title_font');
?>

<?php
 if ($top_content != ""): 
?>

<?php
 print $header 
?>

<?php
 endif; 
?>

<?php
 if ($site_name || $logo || $site_slogan) : 
?>

<?php print $base_path ?>

<?php
 if ($logo != ""): 
?>

<?php
 endif; 
?>

<?php
 if ($fblike_picto_title && $fblike_picto_title_logo_slogan): 
?>

<?php
 print($site_name) 
?>

<?php
 else: 
?>

<?php
 print($site_name) 
?>

<?php
 endif; 
?>

<?php
 if ($site_slogan != ""): 
?>

<?php
 if ($fblike_picto_title && $fblike_picto_title_logo_slogan): 
?>

<?php
 print($site_slogan) 
?>

<?php
 else: 
?>

<?php
 print($site_slogan) 
?>

<?php
 endif; 
?>

<?php
 endif; 
?>

<?php
 endif; 
?>

<?php
 if (is_array($primary_links)) : 
?>

<?php
 $primary_link_first = true; foreach ($primary_links as $link_id => $link) : 
?>

<?php print l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']) ?>

<?php
 endforeach; 
?>

<?php
 endif; 
?>

<?php
 if ($fblike_picto_title && $fblike_picto_title_title): 
?>

<?php
 if ($title!="") print $title; else print $site_name; 
?>

<?php
 else: 
?>

<?php
 if ($title!="") print $title; else print $site_name; 
?>

<?php
 endif; 
?>

<?php
 if ($search_box != ""): 
?>

<?php
 print $search_box 
?>

<?php
 endif; 
?>

<?php
 if ($tabs != ""): 
?>

<?php
 print $tabs 
?>

<?php
 endif; 
?>

<?php
 if (isset($tabs2)): 
?>

<?php
 print $tabs2 
?>

<?php
 endif; 
?>

<?php
 if ($left != ""): 
?>

<?php
 print $left 
?>

<?php
 endif; 
?>

<?php
 if ($top_content != ""): 
?>

<?php
 print $top_content 
?>

<?php
 endif; 
?>

<?php
 if ($mission != ""): 
?>

<?php
 print $mission 
?>

<?php
 endif; 
?>

<?php
 if ($breadcrumb != ""): 
?>

<?php
 print $breadcrumb 
?>

<?php
 endif; 
?>

<?php
 if ($help != ""): 
?>

<?php
 print $help 
?>

<?php
 endif; 
?>

<?php
 if ($messages != ""): 
?>

<?php
 print $messages 
?>

<?php
 endif; 
?>

<?php
 print $content; 
?>

<?php
 // print $feed_icons; 
?>

fblike by bonvga

<?php
 if ($footer_message) : 
?>

<?php
 print $footer_message;
?>

<?php
 endif; 
?>

<?php
 if ($footer) : 
?>

<?php
 print $footer;
?>

<?php
 endif; 
?>

<?php
 print $closure;
?>

mohsinDecember 24th 2009 @ 06: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: http://www.sem-seo-resources.com
I am able to add the region but it does not fit there properly, can you recommend some tips. Thanks

GuestDecember 29th 2009 @ 05:35PM

Cool tutorial. I love drupal. Thank You

ghostFebruary 3rd 2010 @ 05:09AM

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

JorisFebruary 10th 2010 @ 01: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

AkbarFebruary 13th 2010 @ 08: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

bestofcaFebruary 15th 2010 @ 04:00PM

Very useful information and thank you very much for sharing this. It is hard to find themes with multiple regions and this will be my solution for now.

Thanks

SEOFebruary 18th 2010 @ 10:27AM

I think this information helpful for the computer beginner! Thanks.

เสื้อผ้าคนอ้วนFebruary 18th 2010 @ 10:33AM

Very useful information, I will be learn Drupal.
thanks

Drupal Theme GardenMarch 7th 2010 @ 09:45PM

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