Adding a class to "body"

Question

How can I modify or pre-process the <body> tag to add the class body? I don't want to create a whole html.tpl.php just to add a class.

score 55 · Accepted Answer · answered Oct 09 '11 at 01:35

55

In your theme's template.php file use the preprocess_html hook:

function mytheme_preprocess_html(&$vars) {
  $vars['classes_array'][] = 'new-class';
}

Remember to clear the caches once you've implemented the hook or Drupal won't pick it up.

answered Oct 09 '11 at 01:35

Clive

36,918
8
87
113

2

How does it know to add to body? – Chris Muench Oct 09 '11 at 01:47
2

There's only one element in `html.tpl.php` that has any classes added which is the `` element; the preprocess function above is for that file, so any classes you add will only be added to the `` element. – Clive Oct 09 '11 at 01:49
By the way, if you haven't already got it install the [Devel module](http://www.drupal.org/project/devel) and use the `dpm` function on any variable throughout your code; it will render a nice representation of classes and arrays that are put in the usual message area...it's an absolute must for debugging. You could use it in the above function for example like this: `dpm($vars);` and it would print the array out to the screen so you can inspect it – Clive Oct 09 '11 at 01:51
I have tried this (cleared cache, checked spelling, etc) and it didn't work. Is there a case that it is affected by another module? I am using context and the omega theme, btw. – nikan Apr 17 '13 at 15:33
2

@nikan Probably a bit late now, but for Omega you want to implement `mytheme_alpha_preprocess_html` and add the class to the `$vars['attributes_array']['class']` array – Clive Jul 24 '13 at 16:32
@Clive thanks for the omega-specific tip, helped me figure out why this answer wasn't working for my site. – Cloudkiller Jan 23 '14 at 20:57

score 9 · Answer 2 · answered Oct 31 '11 at 11:01

The documentation for the html.tpl.php template documents the $classes variables as String of classes that can be used to style contextually through CSS.. If you look at the code for the template, this variable is used in the class attributes of the produced body element:

<body class="<?php print $classes; ?>" <?php print $attributes;?>>

The $classes variables is actually already set by template_process() for any template file and build from the content of the $classes_array variable.

So to add a class to the body of your page, you should add this class to the $classes_array value from your theme (or module)'s implementation of hook_preprocess_html():

function THEME_preprocess_html(&$variables) {
  $variables['classes_array'][] = 'new-class';
}

Since this is the core defined template and process function, any well-behaving theme should re-use the same variables.

score 5 · Answer 3 · answered Apr 30 '13 at 11:47

5

I had to use different array keys in the same hook to make it work:

function THEME_preprocess_html(&$vars) {
  $vars['attributes_array']['class'][] = 'foo2';
}

answered Apr 30 '13 at 11:47

Hannes Kirsman

63
1
5

score 2 · Answer 4 · answered Sep 23 '14 at 14:00

2

The Context module allows you to add a class to the body tag as well.

This can be useful if you need the class to be added under certain conditions.

You find this options under the reaction "Theme HTML" :

Theme HTML option in Context UI

answered Sep 23 '14 at 14:00

batigolix

1,674
18
20

score 1 · Answer 5 · answered Jun 25 '13 at 00:18

1

The answer appears to depend on context. Here's what I've found via trial-and-error:

If your hook_preprocess_html() is in a module, use $vars['classes_array'][].

If it's in a theme, use $vars['attributes_array']['class'][].

answered Jun 25 '13 at 00:18

jaskho

122
5

4

Not quite - `attributes_array` is defined specifically by the Omega theme. For 'normal' themes it'll be `classes_array` – Clive Jul 24 '13 at 16:34

score 1 · Answer 6 · edited Mar 31 '17 at 11:20

1

Common Body Class module provide users to add classes to any page through the an interface. The interface has options to select multiple user roles as well as pages where the class can be rendered.

Example

edited Mar 31 '17 at 11:20

J. Chomel

8,193
15
41
69

answered Mar 31 '17 at 10:49

Thakur Sanjay Singh Chauhan

11
1

score 0 · Answer 7 · answered May 16 '13 at 14:52

0

I applied this technique on a site that someone else built. It didn't work at first but then dug deeper and found that the $classes variable was not being output in the tpl file. So if it's not working, check that.

answered May 16 '13 at 14:52

user2390505

1

score 0 · Answer 8 · answered Nov 27 '19 at 17:43

0

For Drupal 7 install http://drupal.org/project/body_class. It will help you to add seperate classes for each node in body tag

answered Nov 27 '19 at 17:43

Jaseer Kinangattil

1
2

score 0 · Answer 9 · answered Dec 23 '19 at 05:48

0

You can check "https://www.drupal.org/project/page_specific_class" to add class to body tag of any page

answered Dec 23 '19 at 05:48

Hardik Patel

1

1

sometimes it's better to write your answer ( from anywhere ) instead of external links. – nima Dec 23 '19 at 05:54

score 0 · Answer 10 · answered Jul 12 '21 at 08:13

It's a simple way to add a class based on the URL, Drupal 9. No need to enable the Modules.

/**
 * Implements hook_preprocess_html().
 */
function THEME_NAME_preprocess_html(&$variables) {
  // Get the current path
  $current_path = \Drupal::service('path.current')->getPath();
  $internal_path = \Drupal::service('path_alias.manager')->getAliasByPath($current_path);

  // Assign it to body class 
  $variables['attributes']['class'][] = str_replace("/", "", $internal_path);
}

Refer: http://www.thirstysix.com/how-can-i-add-body-class-based-path-page-specific-class-drupal-9

Adding a class to "body"

10 Answers10