22

How to add classes to the body tag dynamically such as this example below?

-Home
-Cities      
--Melbourne       <body class="melbourne">
---Theme Parks       <body class="melbourne theme_parks">
---Restaurants       <body class="melbourne restaurants">
--New York       <body class="new_york">
---Theme Parks       <body class="new_york theme_parks">
---Restaurants       <body class="new_york restaurants">
-Contact Us       <body class="contact_us">

Drupal newbie here and without programming background. Therefore, I'd much appreciate if you could be as detailed as possible when sharing a solution.

36

To expound on Nikhil Mohan's answer, you can implement template_preprocess_html() inside your theme's template.php file. Read the documentation on Overriding Themable Output to understand the basics of what is going on here.

Within this function, you have access to the variable $vars['classes_array'], which holds a list of classes that will be applied to the HTML <body> tag on the page.

Unfortunately, information about the current page's location in the menu is not immediately available. You could use menu_get_item() and then menu_get_ancestors() to get this information, but that is a lot of processing power for something that we can probably get to with a simpiler approach.

Assuming you are using the pathauto module to automatically create semantic paths for your content pages based on the menu path (i.e., your Melbourne Theme Parks page would have the path 'melbourne/theme_parks') you can use the page's path to create the classes you are looking for:

function THEMENAME_preprocess_html(&$vars) {
  $path = drupal_get_path_alias();
  $aliases = explode('/', $path);

  foreach($aliases as $alias) {
    $vars['classes_array'][] = drupal_clean_css_identifier($alias);
  } 
}

That's it. Drupal will now look at the path alias of the current page and add a class to the <body> tag for each chunk of the path alias.

  • 1
    If paths don't work, then parsing menu_get_active_breadcrumb be an option, too. It is likely in the static cache at that point, so almost no overhead. – mpdonadio May 3 '12 at 17:48
  • 3
    Thank you all, especially @sheena_d for the explanation as well as the code! Had to do a bit of search on how to make it work on Omega Theme and managed to get it to work :D This is the line to make it work on Omega Theme: $vars['attributes_array']['class'][] = drupal_clean_css_identifier($alias); – kyooriouskoala May 4 '12 at 3:53
1

You can make use of template_preprocess_html, which Preprocess variables for html.tpl.php

See also html.tpl.php

Default theme implementation to display the basic html structure of a single Drupal page

1

Here is the module to add classes on body tag based on role or pages.

Common Body Class

0

Created the Body Classes Drupal module to assist with this. Feel free to create issues to add more body class integration points.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.