Advanced Theming Capabilities

Advanced Theming Capabilities

Now that you have a basic Drupal 7 theme, it’s time to learn to make all the extra tweaks that will transform your site from a simple website into an award-winning design.

Template files and the template.php file require the ability to work with HTML, CSS and PHP. You don’t necessarily need to be an expert in the PHP programming. A base understanding behind the syntax of the language will suffice. You will get very far through understanding PHP functions and how they work. One of the most common PHP-related tasks is simply copying and pasting functions and looking up the references on parameters inserted into functions.

Template Files (.tpl.php)

Drupal output is typically altered in template files which end in the extension .tpl.php.

A core set of template files which output all data can be found here. Typically, you will simply be overriding page.tpl.php and node.tpl.php which affect the layout of page template and node template.

A defined, ordered way for overriding the files is recommended. Drupal provides a list of theme hook suggestions.

For example, when a node is loaded in the browser, the theme will search for files in the following order:

1. node--nodeid.tpl.php (nodeid is replaced with the actual node id)
2. node--nodetype.tpl.php (nodetype is replaced with the actual node type)
3. node.tpl.php.

Whichever template file is found first is used. You’ll notice the order of templates goes from most specific to least specific. If none of the files are found, Drupal will go outside the theme and instead use the node.tpl.php system file.

The recommended best practice for working with template files is to find the default system file and copy it into your theme folder. This practice allows you to see what Drupal expects to find and which variables are available to that template.

From there, you may edit the copied file to your liking through HTML and PHP.

One point to keep in mind is that you will need to flush the Drupal system cache to see any changes appear on your site if you have added or removed a template file. The reason for this requirement is that Drupal automatically saves theme-related files in the browser cache in order to improve the website’s loading time.

Theme Hooks (template.php)

The template.php file allows you to hook into the theme functions of Drupal. In other words, in this file you can override the way Drupal converts data into HTML. There are two functions you can use to alter the data directly available to template (.tpl) files:

• MyTheme_preprocess_HOOK(&$vars)
• MyTheme_process_HOOK(&$vars)

In the above syntax, ‘MyTheme’ is the name of your theme and HOOK is the theme function you are looking to alter.

Here’s a quick example of a function that will change all your pages to run through the mypage.tpl.php file instead of using the normal Drupal behavior:

function basetheme_preprocess_page(&$vars) {
$vars['template_files'] = array("mypage.tpl.php”);

Most theme altering will be done with MYTHEME_HOOK($vars) such as basetheme_breadcrumb($vars). You may add a bit of code to give each breadcrumb in the row a different class or turn them into an HTML list. Some common hooks to alter include the following: page, breadcrumb, links, menu_link, more_link, and pager.

Adding Options to Your Theme

It’s really easy to add your own options to a theme. Simply create a new file called “theme-settings.php” in your theme folder. Then add the following code:

function basetheme_form_system_theme_settings_alter(&$form, &$form_state) {
$form['theme_settings']['your_option'] = array(
'#type' => 'checkbox',
'#title' => t('Your Option'),
'#default_value' => theme_get_setting('your_option'),

Here’s a breakdown on the above options:

• “basetheme” should be changed to your theme name.
• “your_option” is the name of your option.
• “#type” is the form input type which is used by Drupal in form building.
• The function theme_get_setting(‘your_option’) will use the option set for the theme. If there isn’t one, then Drupal will search the .info file for a default. As a result, I recommend adding “settings[your_option] = 1 to have the checkbox marked by default.

You can then use the following code to advance Drupal theming on a template file or in the template.php file:

<?php if (theme_get_setting(‘your_option’)) { do something } ?>