WordPress Body um eine weitere CSS Klasse mit PHP erweitern.

Manchmal ist es hilfreich, einer Seite abhängig von einem Zustand, eine zusätzliche Klasse hinzuzufügen. Dank des Filtersystems von WordPress ist das Hinzufügen weiterer Klassen kinderleicht.

Öffne zunächst die functions.php die sich im Child-Theme deiner WordPress Instanz befindet.

Mehrere CSS Klassen im Body von WordPress per Filter hinzufügen

Über den Filter body_class kannst du die CSS Klassen die im Body hinterlegt werden erweitern. Dabei kannst du beliebig viele Klassen hinzufügen.

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);
}

Objektorientierte Methode zum Hinzufügen mehrerer CSS Klassen im Body von WordPress per Filter

Das ganze lässt sich natürlich auch Objektorientiert spielend leicht umsetzen.

/**
 * 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();

Hinzufügen von CSS Klassen im Body von WordPress mit einer Bedingung

Du kannst natürlich die Funktion nach Belieben erweitern und auch Bedingungen integrieren. Zum Beispiel kannst du abhängig von der ID des Beitrags eine CSS Klasse zum Body hinzufügen.

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;
}

Eine CSS Klasse vom Body entfernen

Natürlich kannst du auch Klassen aus dem Body entfernen. Das ist zwar eher unüblich, aber dennoch kann es mal hilfreich sein.

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;
}

Das war's schon!

In diesem kleinen Tutorial haben wir uns angesehen, wie man individuelle CSS Klassen zum Body von WordPress hinzufügt.

Wir haben ebenso erfahren, wie das Hinzufügen von Klassennamen mit einer Bedingung verknüpft werden kann. Zusätzlich dazu, haben wir uns angesehen wie der Filter mittels objektorientierter Programmierung umzusetzen wird.

Abschließend haben wir uns noch angesehen, wie man mehrere Klassen aus dem Body entfernen kann für den Fall, das du diese Funktionalität tatsächlich benötigst.