Was ist ein Child Theme?
Mithilfe eines Child Themes können Änderungen an einer WordPress Webseite vorgenommen werden, die auch nach einem Update nicht verloren gehen.
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
Wozu ein Child Theme?
Viele WordPress Nutzer kennen wahrscheinlich das Problem: Mittels der Stylesprache CSS wurden aufwändige Änderungen am Haupttheme (auch als Parent Theme bezeichnet) vorgenommen, um die Seite immer mehr und mehr an die eigenen Designwünsche anzupassen.
Oder Plugins wurden modifiziert und an die eigenen Anforderungen angepasst.
Und eines Tages sind plötzlich alle Änderungen weg. Die Seite sieht plötzlich ganz anders aus und das Plugin funktioniert nicht mehr richtig. Die ganze stundenlange Arbeit war umsonst. Meistens ist ein Update daran schuld.
Werden ein Theme oder ein Plugin geupdated, werden alle alten Dateien des Themes bzw. Plugins mit den neuen Versionen überschrieben – inklusive unserer Anpassungen.
Das Child Theme ist – wie der Name schon vermuten lässt – das Kind des übergeordneten Parent Themes (Elterntheme). Es erbt also dessen komplette Eigenschaften und Funktionen. Allerdings werden Änderungen, die wir in das Child Theme eintragen, bei einem Update nicht überschrieben. Das Child Theme ermöglicht es uns also, Modifizierungen an Themes und Plugins „updatesicher“ vorzunehmen.
Ein weiterer Vorteil des Child Themes ist außerdem der, dass Modifizierungen nicht am eigentlichen Theme vorgenommen werden, wodurch an diesem im Falle eines Fehlers keine Schäden verursacht werden. Sollte also mal etwas schieflaufen, kann einfach ein neues Child Theme erstellt werden.
Wie erstelle ich ein Child Theme?
Viele Premium Themes liefern in der nach dem Kauf zur Verfügung gestellten Download-Datei bereits ein Child Theme mit. Dieses kann ganz normal, so wie auch das Parent Theme, über das WordPress Backend installiert und aktiviert werden.
Sollten Sie ein Theme benutzen, welches kein Child Theme mit ausliefert, können Sie dieses ganz einfach selbst anlegen. Da bei der Anpassung eines Themes in der Regel nur die Dateien „functions.php“ und „style.css“ modifiziert werden, befinden sich auch nur diese beiden Dateien im Child Theme Ordner.
Schritt 1 – Das Child Theme Verzeichnis anlegen
Loggen Sie sich über einen FTP-Client wie FileZilla auf den Server ein, auf welchem Ihre Webseite gespeichert ist. Navigieren Sie vom Root Verzeichnis aus zu dem Ordner wp-content -> themes. Hier legen Sie ein neues Verzeichnis für das Child Theme an. Prinzipiell können Sie den Namen des Ordners frei wählen, wir empfehlen jedoch, einen Namen zu wählen, der ihn als Child Theme des übergeordneten Parent Themes erkenntlich macht. Nutzen Sie also beispielsweise das Theme „Seofy“ auf Ihrer WordPress Seite, sollten Sie den Ordner entsprechend „Seofy Child“ nennen. So können Sie ihn später besser zuordnen.
Schritt 2 – style.css und functions.php für das Child Theme erstellen
style.css
Die benötigte style.css können Sie mit einem normalen Texteditor erstellen. Programme wie Microsoft Word sind hierfür übrigens nicht geeignet! Es muss wirklich ein Editor sein.
Alternativ können Sie auch das kostenlose Notepad++ herunterladen.
Öffnen Sie den Editor und tragen Sie folgende Zeilen ein:
/*
Theme Name: Der Name des neuen Child Themes
Description: Eine kurze Beschreibung des Child Themes
Author: Pixeltale
Author URI: https://pixeltale.de
Template: Name des Parent Theme Ordners
Version: 1.0
Tags:
*/
Die jeweiligen Angaben hinter dem Doppelpunkt sollten Sie natürlich an Ihre Webseite anpassen. Der „Theme Name“ ist beispielsweise der Name des Themes, welcher im WordPress Backend unter Design -> Themes angezeigt wird.
Wichtig:
Bei Template muss unbedingt der Name des Parent Themes eingetragen werden – und zwar der Name des Ordners. Sonst wird das zugehörige Theme nicht gefunden.
Speichern Sie die Datei anschließend unter dem Namen „style.css“.
Achten Sie darauf, dass Sie die Datei nicht als Textdatei (.txt) speichern. Wählen Sie beim Dateityp stattdessen den Reiter „Alle Dateien“:
Functions.php erstellen
Damit das Childtheme funktionieren kann, brauchen wir noch eine weitere Datei in unserem Childtheme-Ordner, nämlich die functions.php.
Bitte kopieren Sie in keinem Fall die functions.php aus dem Parent-Theme! Sie müssen eine neue, leere Datei anlegen. Diese Datei können Sie ebenfalls über einen normalen Texteditor anlegen.
Da es sich bei der Datei um eine PHP-Datei handelt, muss sie mit dem entsprechenden PHP-Tag beginnen:
<?php
In den weiteren Zeilen der functions.php binden wir nun das zuvor erstellte Stylesheet (style.css) des Child Themes ein. Wichtig hierbei ist, dass wir ZUERST die style.css des Elternthemes einbinden und erst danach die style.css des Child Themes. Wäre die Reihenfolge andersherum, wären Änderungen im Child Theme nicht sichtbar, da unsere Anpassungen vom Parent Theme überschrieben werden würden.
Trage Sie nun folgenden Code unter dem beginnenden <?php-Tag in die ansonsten noch leere functions.php ein:
function child_theme_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-theme-css’, get_stylesheet_directory_uri() .’/style.css’ , array(‘parent-style’));
}
add_action( ‘wp_enqueue_scripts’, ‘child_theme_styles’ );?>
Die rot markierten Stellen müssen Sie durch die richtigen Angaben Ihres eingesetzten Hauptthemes ersetzen. Wie die Angabe in Ihrem Fall lautet, müssen Sie in der functions.php des Parent Themes nachschauen. Stimmt die Angabe nicht, wird das CSS des Child Theme nicht korrekt geladen.
In der oben gezeigten Funktion wird zuerst das CSS des Eltern-Themes geladen. Das erreicht man dadurch, dass man dem Child-CSS eine dependency (Abhängigkeit) zuweist, nämlich das Parent-CSS. Im Codebeispiel ist das der Teil, der in dem array steht:
array(‘parent-style’)
Die functions.php müssen Sie nun ebenfalls speichern, indem Sie als Dateityp “Alle Dateien” auswählen. Laden Sie die Datei anschließend ebenfalls zu der style.css in den Child Theme Ordner hoch.
Schritt 3 – Ein Bild hochladen (optional)
Haben Sie Schritt 1 und 2 richtig ausgeführt, sollten Sie das Child Theme im WordPress Backend bereits sehen. Theoretisch könnten Sie es jetzt auch schon verwenden. Allerdings sieht das Theme im WordPress Backend ohne eine Vorschaubild noch etwas langweilig aus:
Um die Vorschau auf das Child-Theme etwas zu verschönern, können Sie ein passendes Bild unter dem Namen “screenshot.png” im Child Theme Ordner ablegen.
Schritt 4 – Änderungen am Parent Theme über das Child Theme vornehmen
Alle Änderungen, die Sie zukünftig an Ihrer WordPress Webseite vornehmen möchten, können Sie nun in das Child Theme eintragen. Wollen Sie mithilfe von CSS die Schriftfarbe der Hauptüberschrift rot machen, tragen Sie den entsprechenden Code in die style.css des Child Themes ein.
WordPress verwendet jetzt immer die Angaben aus dem Child Theme.
Child Theme mittels Plugin automatisch generieren lassen
Natürlich kann man in WordPress ein Child Theme auch mithilfe eines Plugins automatisch erstellen lassen, beispielsweise mit dem kostenlosen Child Theme Generator.
