Drupal has it all but we still need something more to it and it allows me to get it. That’s why I love Drupal. I kept learning more and more about Drupal theme development in recent times than I thought I ever would!

I wrote about adding  SWF to Drupal Header in my earlier post here.

We all (Drupal Enthusiasts) know about Drupal’s anatomy and there is so much more detailed documentation available on the their website.

Drupal offers and is largely built upon, an interesting core function for content areas called ‘Regions’ and ‘Blocks’.

Blocks can be placed and rendered inside a container – ‘Region’.

My sincere thanks to a couple of posts that guided me to this (one of them is here), but my theme is using a different technique so I dug more to come up with this post.

Several regions are available as default with fresh Drupal installation. From Drupal 4.7 and above, it is possible to define custom regions other than the default ones like – ‘left’, ‘right’, ‘header’, ‘content’ and ‘footer’. There are plenty more things you can do with Regions but I still need to figure them out and try so that I can explain them in a simpler way in my next posts.

Right now, what I am focusing on this particular post is to create a simple custom region of your choice and let it show under your Blocks Administration page so that you can assign a block content to it.

For this post, I am adding a custom region called Panels (Header Panel) which will be placed below Header & above Menu (Horizontal Navigation)

STEP 1: Understanding Regions and .INFO file for your theme?

Regions, CSS, Scripts for any Drupal theme are called from a.INFO file that resides in the root of your theme directory.
Hence the very first important step is to understand this .INFO file.

Locate.INFO file in your theme directory and open it with Notepad or any other text editor.
It should look something like this (See image below)

If you’re creating a theme from scratch, you can use content from this image as sample data for your theme.

Understanding INFO file

STEP 2: Adding your own Region to .INFO file.

As we could see, the INFO file contains information about Regions along with CSS and Style.

Now, let’s add our custom region called ‘panels’ with info ”Header Panel’. You can give any name you want.
After you finish adding, your INFO file should look similar to the image below.

Modifying INFO File

Save your INFO file.

STEP 3: Adding a Region to your Template Files.

Drupal setup contains tpl.php files. Each of these has different functionalities and them together is your Drupal site.
There are mainly two ways of adding a custom region to your template files.

If your theme has block.tpl.php then you should read both Step 4 & Step 5.

If your theme does not have block.tpl.php and you have page.tpl.php then you can skip to Step 5 directly.

STEP 4: Enabling a region in block.tpl.php

Your theme has block.tpl.php which is used to activate block regions and hence you will have to add new custom region here to enable it.

Open block.tpl.php file in your favorite editor. Your code should look like an image below. It may not look exactly the same. Look for another region name for the INFO file in this tpl.php to understand where they are placed.

Updating block.tpl.php

As you can see above, I have added my region ‘panel’ from step 2 highlighted with green.

Easy and safe method is copy a code from another region and paste it along side. I have done exactly the same in the image above. I copied a code which is highlighted with red, pasted it and changed values to my region name which is highlighted with green.

STEP 5: Adding Custom Region in page.tpl.php

Drupal site structure and styles are rendered through page.tpl.php thus it is must to place your region in this file.

Open page.tpl.php file.

Drupal site structure and styles are rendered through page.tpl.php thus it is must to place your region in this file.

Open page.tpl.php file.

I want to use this new custom region in between my header and navigation bar so I would go and locate code for the header as well as a navigation bar.

Create some space between Div tags of these codes and write your region info here.

Here is what we need to add for the new custom region.

<div id="header-panel">
<?php print $panels?>

See image below where I have placed this custom region.

Updating page.tpl.php

<div id="header-panel">: This will style your custom region. (Add this to your theme's style.css)
<?php print $panels?> : This part will render your region on a page
</div>: This will close your style div tag.

We are almost done.

STEP 6: Style your custom region

We created a custom region in earlier step and we used a div id ‘header-panel’ for it. Now we want to style this region. Styling not necessarily to carry fonts and colors, but you can only specify width, height, padding attributes for a custom region.

Open style.css of your theme and put something like the image below

Style your custom region

I have given a width & height to match my desired output in which I can place Slide show or Flash elements. Width is set to match my header and navigation bar so that my new region matches well with them.

STEP 7: Upload modified theme files

Upload modified tpl files & css to your theme directory. Overwrite if necessary.

STEP 8: Clear Cache

It is must clear the cache of your Drupal website to be able to see your new custom region under a Block Administration page.

Go to Site Configuration > Performance > Clear Cache.

STEP 9: See your region in action

Go to Block Administration and you should be able to see the new custom region.

Add a New Block, use Blocks created with Views module or with a Dynamic Display Block module in the newly cooked region.

I hope this post helps many of you 🙂

CEX.IO Bitcoin Exchange