Auch wenn moderne Themes häufig sehr viele Konfigurationsmöglichkeiten bieten, ergibt sich früher oder später ein Anpassungswunsch, der nicht mit den Optionen in den Theme-Einstellungen zu verwirklichen ist. Die Lösung ist dann eine Anpassung in den Dateien des Themes. Allerdings werden diese bei einem Update des Themes überschrieben und alle Veränderungen gehen verloren. Um das Problem zu umgehen, bietet WordPress die Möglichkeit ein sogenanntes Child Theme zu erstellen.
Was ist ein Child Theme?
Ein Child (engl. für Kind) Theme verweist im Grunde auf das 'Eltern' Theme und beinhaltet nur zusätzlichen CSS-Code oder Funktionserweiterungen, die in der functions.php Datei des Themes hinterlegt werden. So kann ein Update des 'Eltern' Themes erfolgen und die Änderungen bzw. Ergänzungen der style.css und functions.php werden nicht überschrieben. Dies gilt auch für Anpassungen von Seiten Templates wie beispielsweise die Ansicht eines Beitrages, die in der single-post.php definiert wird.
Ein guter Grund, um gleich mit einem Child Theme zu starten und nicht erst zu warten. Darüber hinaus lassen sich auch mehrere Child Themes zu einem Eltern Theme erstellen, so dass zwischen verschiedenen Designkonzepten hin- und hergewechselt werden kann.
Wie wird ein Child Theme erstellt?
Leider bietet WordPress bisher keine automatische Erstellungen von Child Themes. Es gibt drei Wege um ein Child Theme zu erstellen:
- Download: Wir bieten den Download einer Child Theme Vorlage an, in der du nur ein paar Anpassungen durchführen musst. In einigen Fällen bietet auch der Hersteller des genutzten Themes ein passendes Child Theme an.
- Plugins: Es gibt einige Plugins, die automatisch Child Themes erstellen.
- Do it yourself: Zwar ein wenig mehr Handarbeit, aber sehr lehrreich ist die eigenständige Erstellung der notwendigen Ordner und der Dateien.
Unbedingt beachten: Falls in dem Eltern Theme bereits Einstellungen verändert wurden, werden diese nicht unbedingt in das Child Theme übernommen. Gleiches gilt für Einstellungen im Designmodifikator, den Menüs und den Widgets. Außerdem müssen bereits vorgenommene Änderungen in den Dateien des Eltern Themes in das Child Theme übertragen werden, da diese bei dem nächsten Theme Update verloren gehen.
Download unseres vorbereiteten Child Themes
Die einfachste Lösung ist die Nutzung unseres vorbereiteten Child Theme Ordners.
Schritt 1: Download ZIP-Datei
Du meldest Dich einfach über das folgende Formular zu unserem Newsletter an.
Nachdem du Deine E-Mailadresse bestätigt hast, schicken wir dir den Downloadlink unserem vorbereiteten Child Theme Ordner zu. Sobald der ZIP-Order entpackt ist, sind zwei Anpassungen nötig:
- Ordnernamen anpassen: Nicht zwingend notwendig, aber damit die Zuordnung des Child Themes gut zu erkennen ist, lohnt sich die Umbennenung des Ordners in der Art: name-des-themes-child. So liegt der Ordner in der Sortierung gleich unterhalb des Ordners deines eigentlichen Themes und falls du mehrere Themes mit Child Themes installiert hast, kommt keine Verwechslung der Child Theme Ordner zustande.
- style.css: In der style.css müssen zwei Einträge angepasst werden (siehe unten).
Schritt 2: Child Theme installieren
Dies kann auf zwei Wegen erreicht werden: entweder der Ordner wird per FTP in den WordPress Themes Ordner /wp-content/themes hochgeladen. Oder der Ordner mit den Anpassungen wird wieder in ein ZIP-Archiv komprimiert. Dann kann die ZIP-Datei über die Option "Hinzufügen" im WordPress Adminbereich unter 'Design' > 'Themes' hochgeladen werden. Anschließend muss das Child Theme nur noch aktiviert werden.
Auch wenn diese Variante recht bequem ist, lohnt es sich zusätzlich die Anleitung zur eigenhändigen Erstellung eines Child Themes durchzulesen. So wird klar welche Datei wofür zuständig ist und auf welchem Weg Veränderungen vorgenommen werden.
Child Theme mit Hilfe eines Plugins erstellen
Es existieren hilfreiche Plugins, die automatisch passende Child Themes erstellen können. Unsere Empfehlung ist der kostenfreie Child Theme Configurator. Das Plugin ist in deutscher Sprache verfügbar und bietet weitere Möglichkeiten, um Einstellungen des Eltern Themes zum Child Theme zu kopieren und Seiten Templates im Child Theme anzulegen.
Auch bei der Verwendung eines Plugins lohnt sich der Blick in die Anleitung zu selbständigen Erstellung eines Child Themes, damit klar wird wie ein Child Theme aufgebaut ist und in welche Dateien die Änderungen eingetragen werden.
Child Theme selbst erstellen
Das selbständige Erstellen eines Child Themes ist nicht besonders schwer. Es werden nur ein Ordner und zwei Dateien angelegt. Mehr ist nicht zu tun und jeder ist um eine Erfahrung reicher.
Alle folgenden Schritte lassen sich per FTP auch direkt auf dem Server durchführen. Meist ist es einfacher den Ordner und die Dateien auf der lokalen Festplatte zu erstellen und anschließend in den WordPress Themes Ordner hochzuladen.
Schritt 1: Child-Theme Ordner erstellen
Als erstes wird ein Ordner für das Child Theme benötigt. Grundsätzlich kann dieser frei benannt werden. Es sollten allerdings keine Leerzeichen verwendet werden. Wir empfehlen die Kombination des Ordnernamens des bisher genutzten Eltern Themes mit dem Zusatz '-child'.
name-des-themes-child
Damit findet sich der Ordner des Child Themes gleich unterhalb des Eltern Themes. Diese klare Zuordnung ist auch hilfreich, falls zu mehreren Themes Child Themes erstellt werden.
Schritt 2: style.css anlegen
Anschließend wird mit einem Texteditor (keine Textverarbeitungsprogramme nutzen!) die Datei style.css in dem Child Theme Ordner erstellt. Diese muss folgende Angaben beinhalten, die allerdings für jedes Theme etwas angepasst werden müssen:
/* Theme Name: Mein Child-Theme Theme URI: https://www.meine-domain.de Description: Mein Child-Theme Author: Ich selbst Author URI: https://www.meine-domain.de Template: eltern-theme-ordner Version: 1.0.0 */ /* =Ab hier kannst du deine CSS-Anpassungen eintragen */
Im Grunde benötigt die style.css eines Child Themes nur zwei angepasste Einträge:
- Theme Name: An dieser Stelle kann ein eigener Theme Name vergeben werden. Auch hier ist die Kombination von Name des Eltern Themes plus 'Child Theme' sinnvoll.
- Template: Hier muss unbedingt der Ordnername des Eltern Themes eingetragen werden. Am besten ganz sicher gehen und im WordPress Theme Ordner (
../wp-content/themes) nachsehen wie der Ordner des verwendeten Themes genau benannt ist (Groß- und Kleinschreibung beachten). Diese Information ist wichtig, weil WordPress damit weiß welches Eltern Theme zu verwenden ist.
Die restlichen Einträge sind nicht zwingend notwendig:
- Theme URI : Dies ist nur eine URL unter der weitere Informationen zu dem Theme zu finden sind. Hier kann man seine eigene URL eintragen oder die des Herstellers des Eltern Themes belassen.
- Description : Kurze Beschreibung des Themes.
- Author URI : Link zu dem Theme Autor oder der Herstellerfirma.
- Version: Hier kann eine Versionsnummer für das Theme vergeben werden.
Wenn das Child Theme aktiv ist, können Änderungen am CSS in der style.css des Child Themes unterhalb der Zeile 'Ab hier kannst du deine CSS-Anpassungen eintragen' erfolgen. Diese bleiben dann auch bei einem Update des Eltern Themes erhalten.
Schritt 3: functions.php anlegen
Als zweite Datei wird nun ebenfalls mit Hilfe eines Texteditors die functions.php angelegt. Diese muss folgenden Code enthalten, der keinerlei Anpassungen erfordert:
Die functions.php sorgt dafür, dass alle CSS-Dateien des Eltern Themes geladen werden. Für manche Funktionserweiterungen muss Code in der functions.php ergänzt werden. Erfolgen diese Ergänzungen in der functions.php des Child Themes statt der des Eltern Themes, wird der Code bei einem Update des Eltern Themes nicht überschrieben.
style.css geladen (@import url("../mein-theme/style.css");). Mittlerweile empfiehlt WordPress die hier vorgestellte Variante mit dem Import in der functions.php, weil mit dieser u.a. die CSS-Dateien schneller geladen werden.Optional: Screenshot integrieren
Kein Muss, aber ein nettes Extra: In der Übersicht der verfügbaren Themes werden im Administrationsbereich Vorschaubilder angezeigt. Wenn das Child Theme keine entsprechende Datei bereit hält, erscheint nur ein grau gemusterter Bereich. Zur besseren Erkennung kann eine 1.200 x 900 Pixel große PNG-Datei angelegt werden und mit der Bezeichnung screenshot.png in den Child Theme Ordner gespeichert werden.
Eine einfache Möglichkeit ist die Verwendung der screenshot.png des Eltern Themes über die mit Hilfe eines Grafikprogramms der Text 'Child Theme' gelegt wird.
Schritt 4: Upload des Child Theme Ordners
Jetzt ist alles bereit und der erstellte Child Theme Ordner mit den zwei Dateien kann per FTP auf den Server in den WordPress Themes Ordner geladen werden:
/wp-content/themes
Schritt 5: Child Theme aktivieren
Anschließend muss das Child Theme im Administrationsbereich unter 'Design' > 'Themes' nur noch aktiviert werden. Eine anschließende Funktionskontrolle zeigt, ob das Child Theme richtig angelegt wurde und alles wie vorgesehen funktioniert.
Mögliche Probleme bei Verwendung eines Child Themes
In der Regel ist die Verwendung eines Child Themes die beste Möglichkeit für grundlegendere Anpassungen an einem Theme. In seltenen Fällen kann es zu trotzdem zu Problemen führen. Wenn der Entwickler des Themes größere Veränderungen vornimmt, dann passen die Ergänzungen aus dem Child Theme ggf. nicht mehr zum Eltern Theme. Das kommt unserer Erfahrung nach nur sehr selten vor. Falls es Probleme nach einem Theme Update gibt, ist dies allerdings eine Möglichkeit, die überprüft werden sollte.
Fazit Child Theme
Unserer Meinung nach sollte das Erstellen eines Child Themes zum Standardvorgehen gehören. Damit ist jeder vor der unangenehmen Überraschung gefeit, dass nach einem Theme Update sämtliche Veränderungen unwiderruflich überschrieben wurden.
Download Child Theme Vorlage
Unser Newsletter Abonnenten bekommen regelmäßig neue Informationen und praktische Downloads von uns zugesandt.
