WordPress Child Theme

WordPress Child Theme erstellen

Wer WordPress nutzt und sich ein wenig mit den dort verwendeten Sprachen wie PHP, HTML oder JavaScript auskennt, wird irgendwann Änderungen an den Themes vornehmen wollen. Doch Änderungen an den Originaldateien werden beim nächsten Update überschrieben. Deshalb erkläre ich in diesem Tutorial auf Complett-Service.de, wie man ein Child Theme erstellt, um das Überschreiben zu verhindern.

WordPress Child Theme

Ein WordPress Child Theme kannst du für dein Blog selbst erstellten. – © Tropenmuseum by Wikimedia

Kennst du das auch? Du hast dich für ein WordPress Theme entschieden, es für deine Zwecke angepasst und gepflegt, und dann kommt ein Update deines Themes raus. Du installierst es, und plötzlich sind alle deine mühsam erstellen Änderungen weg! Weil es schnell gehen musste, hast du schlimmstenfalls auch die Änderungen nicht dokumentiert und kannst dich nach einiger Zeit nicht mehr daran erinnern, was wo geändert wurde.

Diese leidvolle Erfahrung habe ich gemacht und nach einer Möglichkeit gesucht, meine Änderungen dauerhaft zu erhalten. Die Lösung für mich war ein WordPress Child Theme. Damit habe ich meine geänderten Dateien gesichert, so dass sie nicht mehr aus Versehen oder aus Unwissen überschrieben werden können. Child Themes kann man für alle Themes anlegen, egal ob es sich um free WordPress Themes oder kommerzielle Themen handelt.

Was ist ein WordPress Child Theme?

Ein WordPress Theme besteht aus mehreren Einzeldateien, welche die Funktionen und Teile des gesamten Themes enthalten wie WordPress Templates, Stylesheets und PHP-Funktionen. Somit ist auch ein WordPress Child Theme erst einmal nichts weiter als eine Sammlung von Dateien in einem Ordner unterhalb des themes-Ordners. Änderungen an einem Theme erfolgen meist nur in einigen wenigen Dateien. Man muss also nicht ein komplettes WordPress Theme erstellen, um ein Child Theme anzulegen. Diese geänderten Dateien werden in einem separaten Ordner aufbewahrt, damit ein mögliches Update sie nicht überschreiben kann. Im Folgenden werde ich nun genau erklären, welche Schritte erforderlich sind, wenn du ein WordPress Child Theme anlegen möchtest.

Geht es auch ohne WordPress Child Theme?

Wenn es dir nur darum geht, deine geänderten Dateien vor Überspeicherung zu schützen, gibt es einen einfacheren Weg als das Anlegen eines ChildThemes. Dazu erstellst du Kopien von denjenigen Dateien in deinem WordPress Theme, die du ändern möchtest. Zum Beispiel kannst du die originalen Template-Dateien für Seite (page.php), Kopf (header.php) oder Fuß (footer.php) duplizieren und hier Änderungen vornehmen. Dafür musst du dem Duplikat einen anderen Namen geben und im Kopf des neuen Templates ein „php“-Tag einfügen, das eine Kommentarzeile enthält, z. B. /* Template Name: Mein-Neuer-Header */. Unter diesem Namen findest du nun deine neue Header-Datei, die z. B. „mnh-header.php“ heißen könnte. In der „Seiten“-Datei, bei der du über die Funktion „getHeader( )“ normalerweise die Header-Datei einbindest, änderst du die Funktion in „getHeader(‚mnh‘). Hier ist auf die Schreibweise zu achten, da WordPress dem String-Parameter „mnh“ den Rest anhängt. Das Vertauschen der Reihenfolge, beispielsweise nach „header-mnh.php“, hat bei mir kein korrektes Ergebnis geliefert. Soviel zur simpelsten Möglichkeit der Sicherung.

WordPress Child Theme anlegen – so wird’s gemacht!

In diesem WordPress Child Theme Tutorial möchte ich aber letztendlich auf eine elegantere Lösung hinaus, die WordPress bietet: Wenn du ein Child Theme erstellen möchtest, legst du in deinem Theme-Ordner einen neuen Ordner für das WordPress Child Theme deines aktiven Themes an. Wird dieses Theme als Standard-Theme im Backend von WordPress ausgewählt, so greift WordPress zuerst auf die Childtheme-Dateien zu. Nur wenn diese nicht gefunden werden, nutzt WordPress die Dateien des Original-Theme-Ordners.

Mindestanforderungen an ein WordPress Child Theme

Das Childtheme erbt, wie der Name schon nahelegt, vom Elterntheme, das sich auch im „themes“-Ordner deiner WordPress-Installation befindet. Und das WordPress Childtheme benötigt als Mindestanforderung eine eigene style.css Datei, aus der WordPress zunächst alle relevanten Informationen ausliest. Dazu kannst du aus dem Elterntheme die dortige Datei „style.css“ einfach in den neuen Themeordner kopieren und dann Änderungen vornehmen. Alternativ kannst du auch den gesamten Theme-Ordner kopieren. Noch einmal wiederholt: Die style.css ist die einzige Datei, die erforderlich ist, damit WordPress ein Child Theme erkennt. Diese Datei ersetzt die style.css des Eltern-Themes.

Woran erkennt WordPress, dass es sich um ein WordPress Child Theme handelt?

WordPress liest den Kommentarblock, der am Anfang der Styles-Datei steht. Wenn du wie oben beschrieben vorgegangen bist, hast du einen Ordner in deinem WordPress-Themes-Verzeichnis angelegt, der den Namen Ihres neuen Themes trägt. In diesem Ordner befindet sich die aus dem aktiven Eltern-Theme herauskopierte Datei style.css. Der Kopf dieser Datei sieht z. B. Wie folgt aus (Eltern-Theme ist hier „TwentyEleven“):

Listing 1. Parent-Theme-Kommentarblock
  1. /*
  2. Theme Name: Twenty Eleven
  3. Theme URI: http://wordpress.org/extend/themes/twentyeleven
  4. Author: the WordPress team
  5. Author URI: http://wordpress.org/
  6. Description: The 2011 theme for WordPress is …
  7. Version: 1.3
  8. License: GNU General Public License
  9. License URI: license.txt
  10. Tags: dark, light, white, …
  11. */

Nach diesem Kommentarblock folgen die Styles!
Um daraus nun ein Childtheme zu machen, gibst du im Kommentarblock des neuen Themes den Theme-Namen ein und fügst die Zeile mit dem Namen des Elternthemes hinzu. Dies wäre in diesem Fall „Template: twentyeleven“.
Dies teilt WordPress mit, dass dieses Theme einem Eltern-Theme zugeordnet wurde. Als neuen Theme-Namen könnte man den ursprünglichen Namen mitverwenden, um eine gewisse Kontinuität zu vermitteln.
Der Kommentarblock des neuen Child-Theme könnte wie folgt aussehen:

Listing 2. Child-Theme-Kommentarblock
  1. /*
  2. Theme Name: My Twenty Eleven Child
  3. Theme URI: http://wordpress.org/extend/themes/twentyeleven
  4. Author: XXXXXX
  5. Author URI: http://XXXXX.XX
  6. Description: The 2011 Child-theme for WordPress is …
  7. Version: 0.0
  8. License: GNU General Public License
  9. License URI: license.txt
  10. Tags: dark, light, white, …
  11. Template: twentyeleven
  12. */

Wichtig:
Meine Erfahrung ist, dass der Name des Elterntemplates dem Namen des Ordners entsprechen sollte. Sollte also der Name deines Parent-Ordners twentyelvenxyz lauten, sollte das auch so im WordPress Child Theme stehen.
Speicher die style.css in deinem neuen Themeordner.
Möchtest du in der style.css deines Childthemes nur einige Veränderungen vornehmen, kannst du auch vorab alle Styles löschen und zu Beginn der Datei eine Anweisung für den Import der style.css aus dem Elterntheme eingeben. Danach kannst du die Styles, die du ändern möchtest, im Elterntheme überschreiben, indem du sie neu definierst. Der letzte Style überschreibt, „cascading sei Dank“, den vorherigen.
Die Anweisung lautet: @import url(‚../twentyeleven/style.css‘);

Das eigene Symbolbild für die Theme-Auswahl im Backend erstellen

WordPress würde beim Start des Backends nun das neue Theme erkennen und dir dieses auch zum „Aktivieren“ anbieten. Um das Child Theme schnell zu erkennen, ist es hilfreich, wenn es im Backend mit einem eigenen Symbolbild angezeigt wird.
Das ist relativ simpel. Erstelle ein „png“-Image, das dein Theme repräsentieren soll, benenne es mit „screenshot.png“ und füge es in den Themeordner ein. Es erscheint nun als Erkennungsbild für das WordPress Child Theme.

Die Datei „functions.php“ im WordPress Child Theme

Abschließend noch ein Wort zur Datei functions.php: Angenommen, du hast die „functions.php“ auch erst einmal in dein WordPress Child-Theme kopiert, wie vielleicht andere Dateien, die du verändern möchtest. Weiterhin hast du diese Datei modifiziert und mit eigenen Funktionen versehen. In diesem Fall kann es passieren, dass eine Fehlermeldung erscheint, die auf doppelten Funktionsaufruf hinweist. Was ist passiert?
Im Gegensatz zu den anderen Dateien deines Themes macht WordPress für den Aufruf der „functions.php“ eine Ausnahme, denn es wird neben der „functions.php“ des Child-Themes auch diejenige des Basis-Themes aufgerufen. Wenn die Datei einfach kopiert worden ist, enthält die Kopie alle Funktionen des Originals. Dadurch werden sämtliche Funktionen doppelt aufgerufen, was zu Fehlern und Verwerfungen führt. Um das zu verhindern, kann man den Aufruf der einzelnen Funtkionen über eine „if exist“-Abfrage kontrollieren. Sind aber noch keine Änderungen erfolgt, ist es am sichersten, einfach nur den Inhalt der kopierten Datei im WordPress Child Theme zu entfernen und bei Bedarf einzelne Funktionen zu überschreiben oder in diese Datei auszulagern.

Für weiterführende Informationen und Anleitungen zu speziellen WordPress-Themen empfehle ich folgende Bücher:

WordPress Child Themes Made Simple
Wer Englisch versteht, bekommt hier schnell und günstig zum Sofort-Download eine Anleitung zum Erstellen von Child Themes.
WordPress – Das Praxisbuch (mitp Anwendungen)
Mehr als eine Einführung in WordPress bietet dieses Buch mit praktischen Anleitungen, nicht nur zum Erstellen von child Themes. Empfehlenswert für Einsteiger und Fortgeschrittene.
Einstieg in WordPress 3.5: Der schnelle & einfache Einstieg
Wer wenig Zeit aufwenden möchte, um einen Überblick über die Möglichkeiten von WordPress zu bekommen, trifft mit diesem Buch die richtige Wahl.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.