Alles was du über WordPress-Child-Themes wissen solltest

Warum verwendet man ein WordPress-Child-Theme?

Ihr alle kennt das Szenario: die Webseite muss mal wieder einen frischen Look verpasst bekommen und so macht man sich auf die Suche nach einem neuen Theme, dass die Webseite so schön wie nie zuvor präsentieren soll. Meistens braucht es jedoch noch ein paar individuelle Anpassungen, um das Theme für den Einsatz zu pimpen. Das können Designanpassungen sein, aber auch Eingriffe in den Code von Templates oder das Erstellen ganz neuer Templates. Zum Beispiel könnte ich einen Webfont einbinden, die Hover-Farbe für einen Menueintrag ändern, das Headerbild entfernen oder die Metaangaben in der Blogübersicht verändern.

Das alles bedeutet, dass ich den Code meines Themes anpassen und verändern muss. Kein Problem denkt man sich, ist ja alles ohne großen Aufwand gemacht. Themefolder suchen, CSS oder Templatedatei ändern und rauf auf den Server damit. Wunderbar, sieht alles fein aus und läuft.

Die große Überraschung kommt, sobald ein Themeupdate zur Verfügung steht und man dieses ohne groß darüber nachzudenken ausführt. Und bums sind die ganzen Modifikationen und Veränderungen an meinem Theme futsch. Adé ihr schönen Anpassungen. Es war eine schöne Zeit mit euch. Aber warum nur habt ihr mich verlassen?
Die Antwort ist ganz einfach und banal: beim Updaten des Themes wurden alle Themedateien von einer aktuelleren Version überschrieben und damit sind alle vorherigen Anpassungen für die Katz. Adios Amigos!

Um dieses Problem zu vermeiden, gibt es seit WordPress 3.0 die Möglichkeit ein so genanntes Child-Theme zu verwenden. Das Child-Theme übernimmt erst einmal alle Vorgaben des Parent-Themes. Und in diesem Child-Theme kann ich nun Änderungen und Anpassungen vornehmen, ohne dass diese Modifikationen bei einem Update des Parent-Themes überschrieben und gelöscht werden.

Wie funktioniert das Ganze jetzt genau und was ist ein WordPress-Child-Theme?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
WordPress Codex

Das Child-Theme erbt die Funktionen und das Styling des übergeordneten Parent-Themes. Die Änderungen im Child-Theme überschreiben dann die Einstellungen des Parent-Themes und so kann ich bequem meine Modifikationen vornehmen ohne Angst haben zu müssen, dass diese Änderungen beim nächsten Themeupdate verloren gehen. Allerdings birgt diese Methode gewisse Risiken, wenn ich außer dem Stylesheet auch Themedateien verändere. Doch dazu später mehr.

Wie erstelle ich ein WordPress-Child-Theme?

Das Child-Theme besteht erst einmal aus folgenden Grundzutaten, die in einem Ordner mit beliebigem Namen (keine Leerzeichen oder Sonderzeichen verwenden) organisiert sind:

  • die Datei style.css
  • die Datei functions.php
  • die Datei screenshot.png (Größe 1200 x 900 Pixel)

In der style.css müssen folgende Angaben enthalten sein, damit WordPress dein Child-Theme erkennt und das entsprechende Parent-Theme zuordnen kann. Die Platzhalterangaben sollten natürlich ersetzt werden, bevor du dein Child-Theme verwendest 😉

/*
Theme Name: Dein Child-Theme-Name
Theme URI: http://www.deine-childtheme-domain.com
Description: Ein beschreibender Text zu deinem Child Theme
Author: Dein Name
Author URI: http://www.deine-domain.com
Template: Name des Parent-Theme-Ordners
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Schlagworte, die dein Child-Theme beschreiben
*/

/*
Jetzt kannst du mit deinen Änderungen loslegen. Verwende !important, um Styles zu überschreiben.
*/

Auf die veraltete @import-Methode gehe ich hier nicht ein. Die sollte man wirklich nicht mehr verwenden und mit der folgenden Methode ersetzen.

Das folgende Codesnippet in der functions.php sorgt dafür, dass erst die Styles des Parent-Themes geladen werden und dann die Styles des Child-Themes.

<?php
add_action( 'wp_enqueue_scripts', 'my_parent_theme_css' );

function my_parent_theme_css() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

Geschafft!

Das war es im Grunde schon. Ihr habt euer eigenes Child-Theme erstellt. Sobald du den Ordner deines Child-Themes in das Themeverzeichnis (wp-content > themes) auf deinem Webserver geladen hast, kannst du in den Themeeinstellungen von WordPress, das Child-Theme aktivieren. Du kannst nun mit den Anpassungen der Themedateien in deinem Child-Theme loslegen.

Um dir das Erstellen deines Child-Themes zu erleichtern, kannst du dir hier eine Beispieldatei herunterladen.

Download “Child-Theme-Boilerplate” child-theme-boilerplate.zip – 99-mal heruntergeladen – 18 KB

Viele Themeauthoren stellen für ihre Themes oft ein entsprechendes Child-Theme zum Download bereit, damit man sich diese Arbeitsschritte ersparen kann. Es lohnt sich also immer vorher zu schauen, ob für dein Theme schon ein Child-Theme exisitiert. Aber auch hier muss man ein wenig aufpassen, denn nicht selten haben die Ersteller eines Child-Themes auch schon Anpassungen vorgenommen. Und in vielen Fällen möchte man das vermeiden.

Achtung – das Child-Theme-Dilema

Auf eine Sache musst du unbedingt achten! Stell dir vor, du hast seit einem längeren Zeitraum ein Child-Theme in Verwendung und das Parent-Theme wurde schon etliche Mal aktualisiert, weil dort immer wieder neue Entwicklungen und Features eingeflossen sind. Du hast vielleicht auch mehrere Themedateien wie die index.php, header.php o.ä. in deinem Child-Theme angepasst.

Was passiert nun, wenn bei einem Update des Parent-Themes zum Beispiel ein Sicherheitslücke gefixt wurde? Richtig, du verwendest mit großer Wahrscheinlichkeit veralteten Code in den Templates deines Child-Themes und die Sicherheitslücke wird darin konserviert. Das heißt du bist dafür verantwortlich eben diese Templatedateien in deinem Child-Theme auf den neuesten Stand des Partenthemes zu bringen, damit diese Sicherheitslücke aus deinem Child-Theme entfernt wird.

Allerdings ist es auch sehr mühseelig genau diese Aktualisierungen des Parent-Themes zu verfolgen. Gerade wenn man mehrere WordPress-Webseiten betreut, die in den meisten Fällen ein Child-Theme verwenden. Torsten Landsiedel hat sich dazu tiefergehende Gedanken gemacht und einen Lösungsansatz auf dem WordCamp 2015 in Köln präsentiert. Ich empfehle jedem sich den Artikel „The Child-Theme-Dilema“ durchzulesen, um die Problematik zu verstehen und zu überlegen wie man damit umgeht.