WordPress Body um eine weitere CSS Klasse mit PHP erweitern.

Manch­mal ist es hilf­reich, einer Sei­te abhän­gig von einem Zustand, eine zusätz­li­che Klas­se hin­zu­zu­fü­gen. Dank des Fil­ter­sys­tems von Word­Press ist das Hin­zu­fü­gen wei­te­rer Klas­sen kin­der­leicht.

Öff­ne zunächst die functions.php die sich im Child-The­­me dei­ner Word­Press Instanz befin­det.

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

Über den Fil­ter body_class kannst du die CSS Klas­sen die im Body hin­ter­legt wer­den erwei­tern. Dabei kannst du belie­big vie­le Klas­sen hin­zu­fü­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 gan­ze lässt sich natür­lich auch Objekt­ori­en­tiert spie­lend leicht umset­zen.

/**
 * 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ür­lich die Funk­ti­on nach Belie­ben erwei­tern und auch Bedin­gun­gen inte­grie­ren. Zum Bei­spiel kannst du abhän­gig von der ID des Bei­trags eine CSS Klas­se zum Body hin­zu­fü­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ür­lich kannst du auch Klas­sen aus dem Body ent­fer­nen. Das ist zwar eher unüb­lich, aber den­noch kann es mal hilf­reich 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 die­sem klei­nen Tuto­ri­al haben wir uns ange­se­hen, wie man indi­vi­du­el­le CSS Klas­sen zum Body von Word­Press hin­zu­fügt.

Wir haben eben­so erfah­ren, wie das Hin­zu­fü­gen von Klas­sen­na­men mit einer Bedin­gung ver­knüpft wer­den kann. Zusätz­lich dazu, haben wir uns ange­se­hen wie der Fil­ter mit­tels objekt­ori­en­tier­ter Pro­gram­mie­rung umzu­set­zen wird.

Abschlie­ßend haben wir uns noch ange­se­hen, wie man meh­re­re Klas­sen aus dem Body ent­fer­nen kann für den Fall, das du die­se Funk­tio­na­li­tät tat­säch­lich benö­tigst.