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.
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.infowhilst 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 nameWe 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 contentHowever, 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:
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 contentto 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.
Further reading
For more info on the .info you should check out the Drupal 6 theme guide, specifically:
42 comments
@ 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
@ 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.
@ 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...
@ 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! :)
@ 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.
@ 9:13pm
Was looking for this, thanks for sharing!
@ 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.
@ 7:36pm
This article helped me the most. Thanks.
@ 1:03pm
Perfect!
@ 6:55am
good Tutorial, Thnx...
@ 1:04am
Excellent Tutorial! This is exactly what I was looking for. Thank you!
@ 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.
@ 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.
@ 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..!
@ 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.
@ 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 :
...
<?phpif (!$is_front) echo $breadcrumb;
?>
...
<?phpecho $content;
?>
...
and my custom region is
<?phpprint $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
<?phpprint $content;
?>
but a bunch of different fields as follows.
...
<?phpprint $node->etc1;
?>
<?phpprint $node->etc2;
?>
<?phpprint $node->etc3;
?>
<?phpprint $node->etc4;
?>
...
I want this custom region to be printed between etc1 and etc2fields. I have tried
<?phpprint $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)
@ 10:55am
Guys anyone can help me with the above issue?
@ 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
<?phpprint $cstm_region
?>
i dint put anything in page.tpl.php
clear cache from admin>site config>performance
and it should work.
@ 2:59am
typo above:$vars['cstm_region'] = theme('blocks', 'cstm_regiont');
should be $vars['cstm_region'] = theme('blocks', 'cstm_region');
@ 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
@ 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
@ 4:07pm
Great tutorial! Thank You!!!
@ 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 :)
@ 5:48pm
its worked!!
i got it
now i already added custom region in my site
Thanks a lot for great tutorial
@ 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?
@ 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 ;(
@ 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.
@ 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
@ 4:35pm
Cool tutorial. I love drupal. Thank You
@ 4:09am
Great tutorial. Nice work and glad I found your website! Keep up the great work.
@ 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
<?phpprint $content_top
?>
, but that didn't change anything.
Hope you can help me out here.
Thanks in advance.
Grtz Joris
@ 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
@ 8:45pm
I must notice that you have always very useful articles about drupal themes. Thanks for this one.
@ 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
@ 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
@ 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.
@ 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 ?
@ 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!
@ 3:51am
Hii, is there a way to center the content in this custom region??
thanks!!!
@ 5:24pm
Great! That's pure rocking!! Thank you.
@ 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.
@ 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.