Extend WordPress Body with another CSS class using PHP.

Sometimes it is helpful to add a class to a page, depending on a state. Thanks to the filtering system of WordPress, adding additional classes is very easy.

First, open functions.php, which is located in the child theme of your WordPress instance.

Add multiple CSS classes in the body of WordPress via filter #

With the filter body_class you can extend the CSS classes that are stored in the body. You can add as many classes as you like.

add_filter('body_class', 'addCustomClasses', 10, 1);

/**
 * Individuelle CSS Klassen zum Body hinzufügen
 * @param array $classes
 * @return array
 */
function addCustomClasses($classes){
   $customClasses = array('css-klasse-1', 'css-klasse-2');
   return array_merge($classes,$customClasses);
}

Object-oriented method to add multiple CSS classes in the body of WordPress by filter. #

Of course, the whole thing can also be easily implemented in an object-oriented way.

/**
 * Klasse zum hinzufügen weiterer CSS Klassen zum Body
 */
class CustomizeBody{
     /**
      * Konstruktor
      */
     public function __construct(){
         add_filter('body_class', array($this, 'addClasses'));  
     }
     
     /**
      * CSS Klassen hinzufügen
      * @param string $classes
      * @return array
      */
     public function addClasses($classes){
         $customClasses = array('css-klasse-1', 'css-klasse-2');
         return array_merge($classes,$customClasses);
     }
}

new CustomizeBody();

Adding CSS classes in the body of WordPress with a condition #

Of course you can extend the function as you like and also integrate conditions. For example, you can add a CSS class to the body depending on the ID of the post.a

add_filter('body_class', 'addCustomClasses', 10, 1);

/**
 * Individuelle CSS Klassen zum Body hinzufügen
 * @param array $classes
 * @return array
 */
function addCustomClasses($classes){
   global $post;
   $customClasses = array('css-klasse-1', 'css-klasse-2');
   
   if(null != $post && $post->ID == 12345){
       $classes = array_merge($classes,$customClasses);
   }
   
   return $classes;
}

Remove a CSS class from the body #

Of course, you can also remove classes from the body. This is rather uncommon, but it can still be helpful.

add_filter('body_class', 'removeClasses', 10, 1);

/**
 * Individuelle CSS Klassen vom Body entfernen
 * @param array $classes
 * @return array
 */
function removeClasses($classes){
   $cssClassesToRemove = array('css-klasse-1', 'css-klasse-2');

   foreach($classes as $key => $value){
       if(in_array($value, $cssClassesToRremove)){
          unset($classes[$key]);
       }
   } 

   return $classes;
}

That’s it! #

In this little tutorial, we looked at how to add custom CSS classes to the body of WordPress.

We also learned how the addition of class names can be linked to a condition. In addition, we looked at how to implement the filter using object-oriented programming.

Finally, we looked at how to remove multiple classes from the body in case you actually need this functionality.