Improve your Drupal theme markup with body classes

Since Drupal 6, a lot of the detailed markup as found in the excellent Zen theme framework has made its way into the default Drupal markup. More details about this feature can be found here https://drupal.org/node/163723

To use this feature for your theme just insert the variable

 
$body_classes 

into your tpl files body opening tag

 
 

like this

 

The result will be something like this

 

How to create and use a Drupal template (tpl) file

Template files are used to overwrite the core Drupal output (or the output of a module that overwrites the core Drupal output).

This can be for example useful if the layout of a particular content type, page, block or view can’t be easily fixed by a stylesheet. With a tpl file you can completely overwrite all output by using HTML/ CSS/ PHP/ Javascript/ …

This can be done by placing tpl.php files inside the theme folder. The naming of the files needs to follow a hierarchy in order for Drupal to pick up exactly which file you’d like to overwrite.

The hierarchy structure is as follows (top overwrites bottom):

For pages:
page-node-edit.tpl.php
page-node-1.tpl.php
page-node.tpl.php
page.tpl.php

For nodes:
node-type.tpl.php
node.tpl.php

For comments:
comment.tpl.php

For blocks:
block-module-delta.tpl.php
block-module.tpl.php
block-region.tpl.php
block.tpl.php

For boxes:
box.tpl.php

Taxonomy:
page-vocabularyname-termname1-termname2.tpl.php
page-vocabularyname-termname1.tpl.php
page-vocabularyname.tpl.php

Some popular examples:
page-front.tpl.php (home page)
page-admin.tpl.php
page-login.tpl.php
search-theme-form.tpl.php (search form)
search-result.tpl.php (search result)

Often a good start after you have created the new file is to copy and paste the content of the template you want to overwrite into your new template. Template files can be found in the following locations:

Drupal core themes: themes
Drupal core modules: modules
Modules: sites/all/modules
Themes: sites/all/themes

For more information see the Drupal.org website: https://drupal.org/theme-guide/6-7

How to add a new widget area to your WordPress theme

Most WordPress Themes come by default with some pre-defined areas where you can drop your widgets in. But often this is not enough and you need to add additional areas, for example for advertising space or other features.

This is how to do it:

First Step: Add widget Area to Theme
In the index.php file in your theme directory (/wp-content/themes/mytheme), add the following code in the area where you would like a new widget to appear. Note we have had to wrap this line of code so it displays. Careful of too many spaces.


Second Step: Function.php

Put this line at the end of the function.php file:

register_sidebar(array('name'=>'Post Widget',));

Third Step: Style

Now you can style the new widget area via stylesheet, example:

.widget_post {
	background: #FFFFFF;
	margin: 0px;
	padding: 10px;
	width: 600px;
	}

And then go to the WordPress backend and look in the widget section for the newly created area and drop in your desired widget. That’s it 🙂

Add a custom menu in Drupal 6

Basic Menu

There are three default menus available in a fresh Drupal installation.

  • Primary links – Often used to present the main sections of the website, for example as tabs along the top
  • Secondary links – Often used for pages like legal notices and contact details along the bottom
  • Navigation – Often only visible for authenticated users, showing personalised links

These can be renamed, restructured and redesigned. For details on how to set up the basic menu structure of your Drupal website please see here: https://drupal.org/documentation/modules/menu

Custom Menu

In order to add a custom menu to your theme there are three steps to complete:

  • Create a new menu
  • Add the new menu to the theme’s template.php file
  • Call for the menu

All three steps are described in detail below.

Create a new menu:

Go to the administer page https://www.yoursite.com/admin and click on the menu link

Then click on the “Add menu” link

Give you new menu a machine-readable name, in my example it will be “custom”. You can choose your own. But remember the name for later. When you are finished, click save.

Now you can add some items to the list. If you don’t know how to do this, refer to the instructions here: https://drupal.org/documentation/modules/menu

Add the new menu to the theme’s template.php file
Find the template.php file within your theme folder (Themes are located in sites ‘/all/themes/’, in case there is no template file just create an empty file called template.php and place it in your themes root folder ‘sites/all/themes/yourtheme’).

Add the following lines below the last line in the document:

 

  • Replace “yourtheme” with the name of your theme (the name of your theme can be found here: https://www.yoursite.com/admin/build/themes).
  • Replace the two appearances of “custom” with the name of your menu

Call for the menu

Now, after we have created the theme in Drupal, and registered it in the theme, we have to let Drupal know where we want to show the menu on the website. This can be done by placing the following code snipped in a .tpl (example: node.tpl.php) file in your theme:

	

Now the menu shows up in the location you have chosen. If not, check if the names of your theme and your menu are correct (case sensitive). If it still doesn’t work, you may need to customise the code a little depending on your theme. See your themes documentation for more details or contact the theme developer. Or if you like, drop me a line below.

Subscribe to my free email newsletter