Drupal Add classes and id to body tag

Drupal body class settings can be customised easily with a quick tweek of the template file.

One of the most important class/id elements in CSS is the one defined in the body.  It allows for the rest of the styles on the page to be inherited, reducing duplication.  Styles can also be overridden dependant on the page that is being rendered.

Drupal’s theme engine allows complex functions (held in template.php) to be called from the template files (e.g. page.tpl.php).

Template.php

The function shown below can create a whole bunch of attributes to live in the html body tag. Two attributes will be populated:

1. Id
2. class

So here is the code for template.php:

<?php

function phptemplate_body_attributes($is_front = false, $layout = 'none', $type = "", $nid) {

if ($is_front) {
$body_id = $body_class = 'homepage';
}
else {
// Remove base path and any query string.
global $base_path;
list(,$path) = explode($base_path, $_SERVER['REQUEST_URI'], 2);
list($path,) = explode('?', $path, 2);
$path = rtrim($path, '/');
// Construct the id name from the path, replacing slashes with dashes.
$body_id = str_replace('/', '-', $path);
// Construct the class name from the first part of the path only.
list($body_class,) = explode('/', $path, 2);
}
$body_id = 'page-'. $body_id;
$body_class = 'section-'. $body_class;

//Add Model to class if on Product page
//if ($node->)
$body_class .= " type-". $type;

//Find model taxonomy if on a product page

$tax = taxonomy_node_get_terms($nid);

foreach ($tax as $item){
$body_class .= ' model-'.$item->name;
}

//Split Node term string and replace space with
$body_class .= " ". str_replace(" ", "-", trim($node_terms));
// Use the same sidebar classes as Garland.
$sidebar_class = ($layout == 'both') ? 'sidebars' : "sidebar-$layout";

$body_string = " id=\"$body_id\" class=\"$body_class $sidebar_class\"";

return $body_string;
}

?>

Firstly, we determine if we are on the homepage. If so, we add homepage to the class and id strings.

If we are not on the homepage, we grab the url for the page and break it down. Grab the name and add it to the class and id strings.

We might want to style node types in different ways so lets add that to the class string

$body_class .= " type-". $type;

If we use use taxonomy on the website, we could bring in the page terms too.

$tax = taxonomy_node_get_terms($nid);

foreach ($tax as $item){
$body_class .= ' model-'.$item->name;
}

//Split Node term string and replace space with
$body_class .= " ". str_replace(" ", "-", trim($node_terms));

The standard Garland theme has styles in the body to show which sidebars are shown. We shall keep this in our class too.

$sidebar_class = ($layout == 'both') ? 'sidebars' : "sidebar-$layout";

Finally, we want to bring our class and id variables together to form the html that should be returned to the template.

$body_string = " id=\"$body_id\" class=\"$body_class $sidebar_class\"";

return $body_string;

Page.tpl.php

Adding the function to the template file is very simple.  If you are currently using the Graland theme, you will simply need to replace:

<?php print phptemplate_body_class($sidebar_left, $sidebar_right); ?>

with

<?php print phptemplate_body_attributes($is_front, $layout, $node->type, $node->nid); ?>

Simple!

Something extra

If you want, you can add extra little bits of functionality to the code.  For example, if you use Google Maps on your “Contact us” page, you will need the onload attribute.  We don’t want onload to show on other pages though so we can add a little conditional to the function just above return $body_string.

if ($body_id == 'page-contact-us.html'){
$body_string .= " onload=\"load()\" onunload=\"GUnload()\"";
}

et Voila…