| Drupal

drupal-add-blockIn this tutorial, I will walk through the steps for adding a region to Drupal's Bartik theme. There are a couple ways you can do this.

  1. Modify the Bartik theme directly. Of course, this is not the suggested practice. In the Drupal community, we don't modify Drupal's core unless we are applying a patch.
  2. Copy the Bartik theme to the /sites/all/themes directory, rename the theme, and modify it to include the region you desire.

There is a third option, which includes turning Bartik into a base theme and then creating a sub-theme, but that conversation is outside the scope of this tutorial.

In this tutorial, we will make a copy of Bartik and modify it.

Step 1. Copy the Bartik theme

media_1377805008461.png

Go to the root themes directory on your server and download the bartik directory to your computer. Rename the directory to mybartik.

Step 2. Modify the bartik.info file

media_1377805326159.png

Open bartik.info in a text editor like Notepad and make the following changes.

  • Change name from Bartik to mybartik
  • Add the region you want. In our example, we are going to add a region below the content region. Insert regions[content_bottom] = Content Bottom (see line 18 in the screen shot)
  • Save the file as mybartik.info

Step 3. Add the region to the page template.

media_1377805736177.png

First, open the templates directory and then open page.tpl.php and tell Drupal to print the new region. Enter the following line of code as shown in the screen shot.

<?php print render($page['content_bottom']); ?>

Inserting the region here will cause content bottom region to be rendered the same as the content region. Of course, you can place the region where ever you want but remember to wrap this line of code in a <div> tag so that you can apply the CSS that makes the region unique.

Step 4. Upload mybartik to your site

media_1377806046871.png

Upload your new theme to the sites/all/themes directory.

Step 5. Enable your theme and see the new region

media_1377806146610.png

Go to your site and click on Appearance in the black menu bar. Enable and set as default the mybartik theme that now appears in the disabled list.

Summary

The example above is simple, yes, but it conveys the steps needed to add a region to an existing theme. You can follow this process for any Drupal 7 theme. However, if you choose to copy and then modify an existing theme and that theme is updated, those updates will not automatically post to your version of the theme. If you choose to simple modify the theme so that updates can be applied, then you will likely loose the modifications you made.

At the start of this tutorial, I mentioned the base/sub-theme strategy. This strategy leaves the chosen theme in tact except for a minor modification to the .info file, allowing you to easily update the theme and not loose the changes you have made because the changes are stored in a sub-theme.