The Power of template.php

A few techniques to help your designers.

Jan 02, 2008
8 comments

Submitted By: Fredric Mitchell
Filed Under:

• Drupal
• PHP

Theming a fresh Drupal site always gives the designers true glory. Well, its time that I help out my fellow programmers. After all, without us, its just a pretty drupal core.

First things first. I'm assuming that you and the designer are working on a clean theme, like zen. I'm also assuming the use of Drupal 5. Most of the code is available via drupal.org.

So what kinds of things can you do?

Custom id and class tags

The most important thing to know is that Drupal allows the modification of theme functions within this file. This means any function within a module or within the Drupal core that begins with name theme_xxx can be hooked into and modified to include elements to assist the designer, i.e. adding 'id' or 'class' tags.

Let's say, for example, you'd like to modify the menu items. Your designer wants to be able to add special attributes to each menu item, but needs a unique id tag for each list element. Because there is a theme_menu_item function in the core menu.inc file, we can simply create a phptemplate_menu_item function in template.php that overrides how the menu item is displayed. This avoids touching the actual core function (a big no-no in Drupaland) and keeps our mods in one location as upgrades are performed, assuming your template.php file is in the sites -> default -> themes directory (which it should be).

To add custom id tags to each menu item, as well as add an 'active' class when the user is on that particular page, try:

 
/**
* Implementation of theme_menu_item().
*
* Add active class and custom id to current menu item links.
*/
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
  $item = menu_get_item($mid); // get current menu item
  // decide whether to add the active class to this menu item
  if ((drupal_get_normal_path($item['path']) == $_GET['q']) // if menu item path...
  || (drupal_is_front_page() && $item['path'] == '<front>')) { // or front page...
    $active_class = ' active'; // set active class
  } else { // otherwise...
    $active_class = ''; // do nothing
  }
  $attribs = isset($item['description']) ?
array('title' => $item['description']) : array();
  $replace = array(' ', '&');
  $attribs['id'] = 'menu-'. str_replace($replace, '-', strtolower($item['title']));
  return
'
<li class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .
$active_class .'" id="'. $attribs['id'] . '">' .
menu_item_link($mid) . $children ."</li>
\n";
}
 

The key to this function is the line:

 $attribs['id'] = 'menu-'. str_replace($replace, '-', strtolower($item['title']));

This creates a value in the $attributes array with a key of 'id' equal to the value of string 'menu-' concatenated to the actual name of the menu item. As long as each menu item has a unique name, a unique id is generated and the style can be crafted accordingly.

Different designs for different pages

Maybe you have a front 'splash' page, a 'home' page, and then the rest of your site. This is typically true for new startups providing a web service. You'd like new visitors to have a very simple experience showcasing your service, logged-in users to have an array of links to choose from, and something different once users are using the service.

By default, pages and nodes will use the page.tpl.php and node.tpl.php, respectively. To have your 'front' and 'home' pages use a different template file, you need something to translate what page the user is on (via the url) and select the appropriately named file. As outlined in the theme developer's guide of drupal.org, the template.php file can accomplish this within the _phptemplate_variables() function, specifically within the switch case of 'page'. If you're using the localization module, you'll want to edit the function slightly to allow for the prepend of the language:

 
      if (module_exists('path')) {
        $alias = drupal_get_path_alias($_GET['q']);
        if ($alias != $_GET['q']) {
          $suggestions = array();
          $template_filename = 'page';
          $alias = explode('/', $alias);
          array_shift($alias);
          foreach ($alias as $path_part) {
            $template_filename = $template_filename . '-' . $path_part;
            $suggestions[] = $template_filename;
          }
        }
        $vars['template_files'] = $suggestions;
      }
 

Views Theme Wizard

As you create your views, customization can add more depth to your design. Although you may want to create multiple views that group by specific elements, each view doesn't need to look the same even if they function the same. An example would be creating a view that showcases events and groups them by date and one that showcases events and groups them by category.

Answer: Use the views theme wizard. This function automatically generates the proper code for you to place inside your template.php file and create the proper template files for your designer to manipulate.