Skip to main content

Reply to comment

Use THEME_preprocess_page() to add a "subsection" body class.

In:
1Sep2009

The Zen Theme for Drupal is a great place to start building a standards-compliant Drupal site. One of the useful features of Zen for site design is the fact that it adds multiple classes to the document body (in addition to the classes already added by Drupal core). But if these classes are not enough, we can easily add more through THEME_preprocess_page().

By default, Zen uses the URL path to create "section" and "page" classes which are added as to the body tag. Take for example, the hypothetical page: site.com/spectrum/red the body tag would include the classes:

  • page-spectrum-red
  • section-spectrum

In most cases this is sufficient to craft CSS selectors to style a specific page, or collection of pages within a section. However, what about the case where content is buried deeper? For example, imagine these urls:

  • site.com/spectrum/visible/orange
  • site.com/spectrum/visible/yellow
  • site.com/spectrum/ultraviolet/90nm

It would be nice to be able to able to add a selector to style all of the pages in the "visible" subsection differently than those in the "ultraviolet" subsection. Lets imagine that for site.com/spectrum/visible/orange, the the following selectors were available to us:

  • page-spectrum-orange
  • section-spectrum
  • subsection-visible

We can do this by implementing hook_preprocess_page() in template.php, with the following (where THEME is the id of our theme):

<?php
/**
* Override or insert variables into the page templates.
*
* NRD: Output body a body class based on the "subsection" which works
*      much like the default Zen "section" body class. 
*      E.g.: /section0/subsection1/page2 =>
*            section-section0
*            subsection-subsection1
*
* @param $vars
*   An array of variables to pass to the theme template.
* @param $hook
*   The name of the template being rendered ("page" in this case.)
*/
function zen_THEME_preprocess_page(&$vars, $hook) {
  // Add unique class for each subsection (e.g. /section0/subsection1/page2
  $path = drupal_get_path_alias($_GET['q']);
  $sections = explode('/', $path,3);
 
  // If subsection *and* page are defined
  if ($sections[1] && $sections[2]) {
    $classes[] = zen_id_safe('subsection-' . $sections[1]);
  }

 

// Add classes to body 
  $vars['body_classes_array'] = $classes;
  $vars['body_classes'] = implode(' ', $classes); // Concatenate with spaces.

}
?>

Now we can select and style all pages in the "visible" subsection with a CSS selector such as:

body.subsection-visible #somecontainer {
  background-color: #f0f0f0;
}

Reply

Warning
I strongly encourage and welcome links and feedback. However, this site is moderated and comments with inappropriate links are rejected. Please do not post a one-line "Me too" or "Great post!" comment just so you can link to your site. Thank you for your understanding.
The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.
  • Use to create page breaks.

More information about formatting options