WordPress Child Themes

Stellt euch vor ihr habt ein Theme gekauft und stellt fest, dass euch die ein oder andere Funktion fehlt oder ihr möchtet etwas am Aussehen ändern, dass sich nicht über das Backend beeinflussen lässt. Selbst mit dem Code Editor am Theme Hand anzulegen ist keine gute Idee. Spätestens beim nächsten Update werden eure Änderungen überschrieben.

Die Lösung: Child Themes.

Child Themes funktionieren im Grunde wie die Vererbung bei Klassen: Es wird ein neues Theme angelegt und WordPress mitgeteilt, dass es sich um ein Child Theme eines gewünschten Themes handelt. Das Child Theme wird in WordPress aktiviert. WordPress schaut ab jetzt zuerst in den Child Theme Ordner, wenn es ein Template benötigt. Was es dort nicht findet, läd es aus dem Ordner des Original Themes.

Was ist zu tun?

  1. Ordner für eurer Theme im Verzeichnis wp-content/themes anlegen. Empfehlenswert ist ein Name, der das Theme als Kind des Originalthemes kennzeichnet. Wenn das Original Theme „xyz“ heißt, wäre ein möglicher Ordnername „xyz_child“. Das dient zur eurer Orientierung. WordPress ist egal wie der Ordner heißt.
  2. Ihr legt eine style.css im Childtheme-Ordner an und verpasst ihr folgende Kopfdaten:
    /*
    Theme Name: Name eures Child Themes
    Description: Erläuterung eures Child Themes
    Version:	1.0.0
    Author:	Euren Namen
    Author URI: Eure Internetadresse
    Template:   Ordnername des Eltern Themes
    */

    Wirklich wichtig sind vor allem der Theme Name, die Version und der Template Parameter, der gibt nämlich das Eltern Theme an.

  3. Als nächstes legt im Child Theme Ordner eine functions.php an. Dort ladet ihr mittels des Hooks wp_enqueue_scripts das Hauptstylesheet (style.css) des Eltern Themes:
    add_action( 'wp_enqueue_scripts', 'xyz_child_enqueue_styles' );
    function xyz_child_enqueue_styles() {
    	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }

    Beachtet hierbei bitte, die Verwendung der WordPress Funktion get_template_directory_uri(). Sie gibt das Verzeichnis des Eltern Themes zurück. Wenn ihr später weitere CSS- oder JavaScript Dateien ladet, ist die Funktion get_stylesheet_directory_uri() zu verwenden. Sie gibt euch das Verzeichnis eures Child Themes zurück.

  4. Wenn ihr nun im WordPress Backend in der Theme Übersicht euer WordPress Child Theme als aktives Theme auswählt kann`s losgehen.

Das Child Theme ist bereit.

Schreibe einen Kommentar