Extend WordPress Body with another CSS class using PHP.

Some­ti­mes it is hel­pful to add a class to a page, depen­ding on a sta­te. Thanks to the fil­te­ring sys­tem of Word­Press, adding addi­tio­nal clas­ses is very easy.

First, open functions.php, which is loca­ted in the child the­me of your Word­Press ins­tance.

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

With the fil­ter body_class you can extend the CSS clas­ses that are stored in the body. You can add as many clas­ses 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 cour­se, the who­le thing can also be easi­ly imple­men­ted in an object-ori­en­­ted 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 cour­se you can extend the func­tion as you like and also inte­gra­te con­di­ti­ons. For exam­p­le, you can add a CSS class to the body depen­ding 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 cour­se, you can also remo­ve clas­ses from the body. This is rather uncom­mon, but it can still be hel­pful.

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 litt­le tuto­ri­al, we loo­ked at how to add cus­tom CSS clas­ses to the body of Word­Press.

We also lear­ned how the addi­ti­on of class names can be lin­ked to a con­di­ti­on. In addi­ti­on, we loo­ked at how to imple­ment the fil­ter using object-ori­en­­ted pro­gramming.

Final­ly, we loo­ked at how to remo­ve mul­ti­ple clas­ses from the body in case you actual­ly need this func­tion­a­li­ty.