11. August 2017 // von Marcel

WordPress – Child Themes

Ein WordPress Theme anzupassen, ist leichter als man denkt.

Mit dem Dateieditor der Administrationsoberfläche können wir einfach auf das Stylesheet (die style.css) des Themes zugreifen und unsere Anpassungen vornehmen. Aber dies würde leider bedeuten, dass nach einem Theme Update unsere Änderungen verschwinden würden.

Um dieses Problem zu umgehen, gibt es die Möglichkeit ein Child Theme (ein Ableger des Original Themes, auch Parent Theme genannt) zu erstellen, was uns mehrere Vorteile bringt:

  • Keine Änderungen des Parent Themes, wir können unser Theme ohne Bedenken auf dem neuesten Stand halten.
  • Wenn wir beim Child Theme mal was kaputt machen, bleibt unser Parent Theme erhalten.
  • Im Child Theme Ordner liegen nur unsere angepassten Dateien, was mehr Übersicht, über unsere Änderungen bietet.

Somit können wir recht einfach unser Theme nach unseren Wünschen anpassen. Wir können Styles wie Farben, Größen und Abstände ändern, Funktionen einfügen oder auch Templates abändern.

Tipp: Customizer

Möchten wir nur ein paar CSS Styles überschreiben, müssen wir hierzu nicht extra ein Child Theme erstellen, seit WordPress 4.7 gibt es auf der Administrationsoberfläche im Menü unter Design / Customizer die Option "Zusätzliches CSS", hiermit können wir Styles hinzufügen und damit unser Theme anpassen.

Voraussetzungen

Um ein Child Theme erstellen und bearbeiten zu können, benötigen wir FTP Zugriff auf die entsprechende WordPress-Installation Die Administrationsoberfläche bietet uns hierzu leider keine Möglichkeit. Ebenso benötigen wir einen Texteditor (nicht Word), hier wird gerne Atom oder Notepad++ genutzt.

Child Theme Plugins

Sollte sich jemand nicht zutrauen, ein Child Theme selbst zu erstellen, gibt es hierfür auch verschiedene Plugins. Wir sollten sowas aber nur einsetzen, wenn wir sonst kein Child Theme erstellen können, weil z.B. der FTP Zugriff fehlt.

Step by Step

Child Theme Ordner

Hierfür greifen wir per FTP auf unsere WordPress-Installation zu, wechseln in den Ordner wp-content/themes und legen, auf der gleichen Ebene wie der Parent Theme Ordner, ein neues Verzeichnis an. Den Ordner können wir benennen wie wir möchten, sollten aber Leerzeichen und Umlaute vermeiden. In der Praxis wird oft der Ordnername des Parent Themes in Verbindung mit dem Wort Child verwendet, im Falle des Themes Twenty Seventeen wäre der Ordnername des Parent Themes "twentyseventeen" und wir nennen den Ordner für unser Child Theme nun “twentyseventeen-child”.

Child Theme style.css

Damit man das Child Theme aktivieren kann, muss im Ordner mindestens eine style.css mit einem Kommentar vorhanden sein, hierzu sind aber keine CSS Styles nötig. Die Datei können wir entweder mit unserem FTP Programm erstellen und bearbeiten, oder mit einem Texteditor lokal erstellen, bearbeiten und mit unserem FTP Programm hochladen.

/*
 * Theme Name: Twenty Seventeen Child (Child Theme Name)
 * Theme URI:   
 * Description:
 * Author:
 * Author URI:
 * Template: twentyseventeen (Name des Parent Theme Ordners)
 * Version: 1.0
 * Tags:
 * License:     
 * License URI: 
 * Text Domain:  twentyseventeen-child
 * Domain Path:
 */

Der angegebene Theme Name erscheint dann auch auf der Administrationsoberfläche unter dem Menüpunkt Design – Themes zur Auswahl. Wichtig ist hierbei der Name des Parent Theme Ordners, der beim Template angegeben wird, nur so erkennt WordPress, dass es sich um ein Child Theme von Twenty Seventeen handelt. Mehr Infos zu den möglichen Angaben und ein Beispiel findet ihr im WordPress Codex - Theme Stylesheet.

Da die style.css des Child Themes, die des Parent Themes überschreibt, wir aber bei unseren CSS Styles lediglich was ändern oder hinzufügen wollen, können wir mit Hilfe des nächsten Abschnitts einfach die style.css des Parent Themes vor der des Child Themes laden.

Child Theme functions.php

Um unser Child Theme aktivieren zu können, benötigen wir noch eine functions.php. Wie bei der style.css können wir dies wieder über unser FTP Programm direkt machen oder die Datei lokal erstellen und hochladen. Bitte nicht die functions.php aus dem Parent Theme kopieren, sondern eine neue, leere Datei erstellen.

Da es sich hier um eine PHP-Datei handelt müssen wir in der ersten Zeile ein PHP Tag öffnen:

<?php

/*
 * Hier können wir Funktionen für unser Child Themes einfügen
 */

Für den nächsten Schritt benötigen wir den Namen, unter dem das Stylesheet des Parent Themes registriert wurde. Dieser ist bei jedem Theme unterschiedlich, daher durchsuchen wir die functions.php des Parent Themes nach folgender Zeile:

wp_enqueue_style(‘twentyseventeen-style’ , get_stylesheet_uri());</td>

Der erste Parameter ‘twentyseventeen-style’ entspricht dem gesuchten Namen, durch den zweiten Parameter (get_stylesheet_uri()) wissen wir, dass die style.css des Parent Themes hiermit geladen wird.

Wir fügen nun eine Funktion hinzu, um erst die style.css des Parent Themes und dann die des Child Themes zu laden.

function init_twentyseventeen_child_styles() {
    $parent_style = 'twentyseventeen-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() .                       
                                 '/style.css' );
    wp_enqueue_style( 'twentyseventeen-child-style',
                                 get_stylesheet_directory_uri() . '/style.css',
                                 array( $parent_style ));

}

add_action('wp_enqueue_scripts', 'init_twentyseventeen_child_styles');

Mit array(‘twentyseventeen-style’), als Parameter in der letzten Funktion, setzen wir eine Abhängigkeit der style.css von Child Theme zu Parent Theme und stellen damit sicher, dass die Stylesheets in der richtigen Reihenfolge geladen werden.

Unter Umständen kann es sein, dass beim Parent Theme durch die Veränderung der Reihenfolge der Stylesheets Fehler auftreten. Sollte dies passieren, müssen wir einfach alle Styles aus dem Parent Theme in der gleichen Reihenfolge laden.

Child Theme aktivieren

Unter dem Menüpunkt Design – Themes auf der Administrationsoberfläche wird jetzt unser Child Theme angezeigt, das wir direkt aktivieren können.

Da wir noch keinen Screenshot zu unserem Child Theme angelegt haben, sieht es noch etwas unschön aus. Hierzu könnten wir einfach, z.B. nachdem wir alle Änderungen gemacht haben, einen Screenshot unseres Themes erstellen und direkt im Ordner unseres Child Themes ablegen, der den Dateinamen screenshot.png haben muss und eine Auflösung von 600px mal 450px haben sollte. Wir könnten aber auch einfach die screenshot.png aus dem Parent Theme in unser Child Theme kopieren.

Child Theme bearbeiten

Nun sind wir soweit Änderungen vorzunehmen. Für eine Anpassung von Styles fügen wir diese einfach der style.css unseres Child Themes hinzu. Funktionen legen wir einfach in unserer functions.php ab. Um eine Template Datei des Parent Themes zu verändern, kopieren wir diese einfach in unseren Child Theme Ordner. Sollte entsprechendes Template bei unserem Parent Theme in einem Unterordner liegen, müssen wir diesen auch im Child Theme erstellen und dort unser Template hinterlegen, dann können wir auch unsere Template Dateien nach eigenem Wunsch anpassen.

Möchten wir z.B. beim Twenty Seventeen Theme den Satz "Stolz präsentiert von WordPress" im Footer entfernen, kopieren wir hierzu die footer.php aus dem Parent Theme in unser Child Theme und entfernen den folgenden Teil daraus:

get_template_part('template-parts/footer/site', 'info');

Da WordPress als erstes im Child Theme überprüft, ob eine footer.php vorhanden ist, wird unsere angepasste Datei geladen und nicht wie sonst die des Parent Themes.

Überblick

Folgende Schritte sind notwendig, um ein Child Theme anzulegen:

  1. Child Theme Ordner auf derselben Ebene wie Parent Theme anlegen.
  2. Im Child Theme Ordner style.css und functions.php anlegen.
  3. Kommentar in die style.css einfügen und anpassen.
  4. Die entsprechende Funktion in die functions.php einbinden um unsere Parent Theme style.css vor der Child Theme style.css zu laden.
  5. Auf der Administrationsoberfläche das Child Theme aktivieren.

Nachteile

Unsere Änderungen bleiben, nach einem Update des Parent Themes, zwar erhalten aber auch Sicherheitslücken werden hierdurch konserviert. Durch das kopieren und verändern einer Datei aus dem Parent Theme, kopieren wir auch dessen Sicherheitslücke.

Wenn der Autor des Parent Themes diese Lücke findet, beseitigt und ein Update zur Verfügung stellt und der automatische Update-Check nicht deaktiviert ist, bekommen wir auf der Administrationsoberfläche einen Hinweis für neue Updates, klicken auf aktualisieren und haben die neueste Version des Parent Themes.

Jetzt haben wir zwar die aktualisierte Datei im Parent Theme, sollten wir aber vorher eine Kopie dieser Datei in unserem Child Theme erstellt haben, wird diese von WordPress bevorzugt und die Aktualisierung ist in unserem Child Theme nicht aktiv.

Hierfür gibt es aber ein mehrere Plugins (z.B. Child Theme Check) die uns weiterhelfen können, indem sie z.B. die Versionsnummer in den Dateien vergleichen, dann einfach die Änderungen aus dem Parent Theme in unser Child Theme übertragen und schon ist unser Theme wieder auf dem aktuellen Stand.

Verwandte Blogposts