WordPress Child Theme erstellen und installieren

Du hast es geschafft WordPress zu installieren und ein passendes Theme gefunden und heruntergeladen? Sehr schön!

Dann kannst du ja loslegen mit dem Bau deiner Website, oder eventuell doch noch nicht?

Theoretisch ja. Aber du solltest unbedingt überlegen, ob du vielleicht statt des Parent-Themes besser ein Child-Theme nutzen solltest. Denn wenn du eins nutzen solltest, dann am besten bevor du mit dem Bau deiner Website anfängst.

Inhalte Anzeigen

WordPress Child Theme nutzen oder nicht?

Ob du ein WordPress Child-Theme nutzen solltest oder nicht, hängt von dem Umfang der Änderungen ab, die du an deiner Website vornehmen möchtest.

Wenn du keine umfangreichen Änderungen (Customization) am Design deiner Website durchführen möchtest, dann kommst du auch ohne Child-Theme aus.

Wenn du aber beabsichtigst, deine Website stark zu modifizieren (Hinzufügen von CSS oder PHP) dann solltest du unbedingt ein sog. Child-Theme nutzen!

Der Grund liegt darin, dass alle deine Änderungen am Design der Website in das Stylesheet (Datei “style.css”) des Parent-Theme gespeichert werden.

Bei einem Update des Themes wird diese Datei aber überschrieben und damit deine bisherigen Design-Anpassungen gelöscht.

Und da sich Updates oft auch automatisch installieren (Einstellung des Themes beachten!), kann dies schneller passieren als es dir recht ist. Oder aber du klickst, ohne zu wissen was es für Folgen haben kann, auf das manuelle Update deines Themes und hast das gleiche Problem. Und ein Theme-Update rückgängig zu machen ist meist unmöglich.

Ist das passiert kostet es dich Zeit und Nerven deine Website wieder so herzustellen wie sie war!
Dieses Problem kannst du durch die Nutzung eines WordPress Child-Themes verhindern.

Daher solltest du ein WordPress Child-Theme am besten direkt von Beginn an nutzen, bevor du große Änderungen an dem Design deiner Website vornimmst. Denn beim nachträglichen Einbinden und Nutzen des Child-Themes können auch leicht Probleme entstehen.

Wie funktioniert ein WordPress Child Theme?

Ein WordPress Child Theme ist ein dem WordPress Parent Theme untergeordnetes Theme, welches grundsätzlich auch erst einmal nur die Core-Dateien des übergeordneten Parent-Themes verwendet.

Wenn allerdings eine Datei aus dem Stammverzeichnis (Root-Directory) des Parent-Theme in das untergeordnete Child-Theme kopiert wird, dann nutzt das Child-Theme auch nur noch diese „eigenen“ Dateien für das Design der Website. Die entsprechende Datei des übergeordneten Parent-Themes wird dann nicht mehr beachtet.

Wird nun später einmal das Theme geupdatet, wird durch WordPress nur das Verzeichnis des Parent-Themes gelöscht und mit den Dateien des Updates überschrieben. Die Dateien des WordPress Child-Themes werden dabei nicht gelöscht oder angepasst.

Durch diesen Mechanismus wird verhindert, dass Änderungen an der Website nicht durch ein Update des Themes verloren gehen.

Vor- und Nachteile bei Nutzung eines Child-Themes

Wie viel Dinge hat auch die Nutzung eines Child-Themes nicht nur Vorteile.

Vorteile:

Durch die Nutzung eines Child-Themes verhinderst du auch eine Beschädigung des Parent-Themes, wenn du das Stylesheet oder die Theme-Funktionen modifizierst und dabei Fehler einbaust.
Ist bei deinem modifizierten Design etwas nicht in Ordnung, kannst du problemlos wieder auf das Parent-Theme wechseln.
Umfangreiche Style-Änderungen bleiben erhalten, auch wenn du das Theme updatest.

Nachteile:

Wenn eine Sicherheitslücke des Parent-Theme in das Child-Theme vererbt wurde, wird diese eventuell nicht automatisch durch ein Update des Parent-Theme geschlossen.
Du kannst aber z.B. dieses Plugin nutzen, um die Unterschiede zwischen den einzelnen Dateien im Parent-Theme und dem Child-Theme zu überprüfen und Unterschiede beseitigen. Voraussetzung für das optimale Funktionieren des Tools ist allerdings, dass in der Theme-Datei eine Versionsnummer hinterlegt ist.
Es kann sich die Ladezeit durch das Laden der zwei Themes geringfügig verlängern. Da das Child Theme aber kein volles Theme ist, sollte dies normalerweise eine vernachlässigbar geringe Ladezeitverlängerung zur Folge haben.

Welche Änderungen werden nur im Child-Theme gespeichert?

Durch ein Child-Theme kannst du folgende Änderungen an deiner Website vornehmen, ohne dass diese beim nächsten Update verloren gehen:

Anpassen und Hinzufügen von CSS Styles in der Datei style.css
Anpassen und Hinzufügen von PHP in der Datei functions.php

Wie komme ich an ein Child-Theme?

An ein zu deinem Theme passendes Child-Theme kannst du grundsätzlich auf 3 verschiedene Wege gelangen:

Download eines fertigen Child-Themes
Manuelle Erstellung
Erstellung per Plugin

Download eines fertigen Child-Themes

Bei einigen Themes ist ein fertiges Child-Theme als Download im Internet erhältlich.

Ich rate dir immer zuerst auf der Website des Theme-Herstellers zu schauen, ob er ein Child-Theme zum Download anbietet, bevor du auf die anderen Methoden zurückgreifst.

Dies hat den Vorteil, dass du es nicht selbst erzeugen musst, es somit direkt nutzen kannst und es normalerweise einwandfrei mit deinem Parent-Theme funktioniert.

Ist das der Fall, kannst du einfach das Child-Theme auf der Website des Anbieters des Themes downloaden und die zip. Datei des Child-Themes in dein WordPress hochladen.

So ist es auch bei meiner Theme-Empfehlung „GeneratePress*“. Du erhältst das Child-Theme ganz einfach auf der Website des Anbieters zum Download.

Achtung:
Bitte lade das Child-Theme für dein Theme nicht einfach irgendwo herunter, auch wenn du es auf verschiedenen Internetseiten angeboten bekommst. Lade es nur auf der offiziellen Website des Theme-Anbieters herunter. Nur so kannst du dir sicher sein, dass es einwandfrei mit dem Parent-Theme funktioniert.

Manuelle Erstellung des Child Theme

Man kann ein WordPress Child-Theme auch selbst erstellen.

Im Internet findest du sogar einige Anleitungen, die genau beschreiben was du dazu machen sollst.

Das Problem ist aber, dass diese Anleitungen teilweise veraltet sind und nicht mehr den aktuellen Empfehlungen von WordPress folgen (insbesondere keine „@import“-Funktion mehr zu nutzen) oder dass sie trotz Nutzung der korrekten Funktion („wp_enqueue_style“) defekte Funktionen in deinem Theme hinterlassen.
Die angebotenen Standard-Erstellungen von Child-Themes sind aber auch nicht immer kompatibel mit allen Themes.

Ich möchte kurz auf die zwei wichtigen und entscheidenden Funktionen für die Erstellung eines Child-Themes eingehen:

Die „@import“ Funktion in der „style.css“
Mit dieser Anweisung wird das Stylesheet des Parent-Themes in das Stylesheet des Child-Themes eingebunden.
Diese Funktion soll laut WordPress Theme Handbook aber nicht mehr genutzt werden.
Unter anderem, weil dadurch die Ladezeit der Stylesheets verlängert wird und weil das Stylesheet unnötigerweise mehrmals geladen werden kann.
Die „wp_enqueue_style“ in der „functions.php“.
Dies ist die eigentliche Methode, die WordPress heute empfiehlt, um das Stylesheet zu importieren. Aber leider kann auch diese Methode je nach Theme Probleme machen.

Musst (oder möchtest) du für dein Theme ein Child-Theme manuell erstellen, benötigst du einen Zugang zu deinem FTP-Server. Den Zugang zu deinem FTP-Server erhältst du durch einen FTP-Client. Dafür empfehle ich Dir das Programm FileZilla zu verwenden.

Für die anschließende Bearbeitung des Codes benötigst du dann noch einen sog. Editor.

Wie du dann vorgehen musst und welche Modifikationen du im Code durchführen musst, wird ausführlich auf der Developer-Website von WordPress beschrieben (leider nur in Englischer Sprache).

Erstellung des Child-Theme per Plugin

Die gegenüber der manuellen Erstellung deutlich einfachere Methode und für Anfänger definitiv eher zu empfehlende Variante, ist die Erstellung des Child Themes durch ein Plugin. Für die Erstellung eines Child Themes gibt es Plugins, z.B. Child Theme C onfigurator.

Wenn du das Child Theme direkt zu Beginn (vor Änderungen an dem Design) erstellst, sollte dies ganz ohne Problem funktionieren, da du ja noch nichts geändert hast am Design deiner Webseite.

Hast du aber bereits Änderungen vorgenommen, kann das Plugin, je nach Theme, eventuell nicht alle Änderungen in das Child Theme übertragen. Diese müssen dann auch manuell in das Child-Theme upgeloadet werden.

Änderungen im Parent-Theme zum Child-Theme übertragen

Wenn du bereits vor der Nutzung eines WordPress Child Themes Änderungen an deiner Website per Customizer vorgenommen hast, dann musst du manuell oder per Plugin die Änderungen in eine Datei exportieren und anschließend in das Child Theme importieren., z.B. mit Hilfe des Plugin Customizer Import/Export.

Manche WordPress Themes, z.B. das Theme „OceanWP“ haben diese Funktion allerdings schon integriert. Wenn du dieses Theme nutzt hast du im WordPress Dashboard einen zusätzlichen Punkt „Theme Panel“, mit dem du den Import der Änderungen ganz leicht in das Child Theme importieren kannst.

Dazu aktivierst du zuerst wieder das Parent-Theme in dem du die Änderungen bereist gemacht hast und gehst dann zum Dashboard unter „Theme Panel“ / „Import/Export“ und dann per „Export Settings“ lässt du dir eine .dat Dateie automatisch erstellen und speicherst diese auf deinem Computer. Anschließend aktivierst du wieder das Child-Theme und gehst erneut zum Dashboard und wieder zum Punkt „Theme Panel“ und drückst nun „Import Settings“, wählst die Datei aus und importierst sie.

WordPress Child Theme installieren

In der folgenden Anleitung zeige ich dir anhand des Themes Generate Press* wie du ein WordPress Child Theme installieren und aktivieren musst.

Dazu gehst du folgendermaßen vor.

Zuallererst stelle sicher, dass du das eigentliche Parent-Theme gedownloadet hast und es in deinem WordPress unter „Design“ > „Themes“ gelistet ist.

Zudem, dass du die zip-Datei des WordPress Child Theme (möglichst von der Website des Theme-Anbieters gedownloadet) auf deinem Computer bereitliegen hast.

Sind diese Punkt erledigt, dann gehst du in das WordPress Menü unter den Punkt „Design“ > “Themes“. Dort klickst du dann den Button „Theme hinzufügen“ an.

Dann auf den Button „Theme hochladen“ klicken.

Nun klickst du auf den Button „Durchsuchen“, um die zip-Datei des Child-Themes auf deinem Computer auszuwählen.

Wenn du die Datei ausgewählt hast, klickst du auf „Jetzt installieren“. Die Datei wird nun automatisch entpackt und installiert.

Wenn die Installation erfolgreich verlaufen ist, erhältst du die Meldung „Das Theme wurde erfolgreich installiert“, so wie in dem nachfolgenden Bild zu sehen.

Nun kannst du unten auf „Aktivieren“ klicken und es erscheinen alle Themes die in deinem WordPress installiert sind.

Nun ist auch das Child-Theme, hier „GeneratePress Child“, aktiv geschaltet und das Parent-Theme wurde durch WordPress automatisch deaktiviert, da in WordPress nur ein Theme aktiv sein kann.

Super, das war es! Du nutzt nun das Child-Theme deines Themes.

FAQ – Fragen & Antworten

Wo finde ich die style.css des Child-Themes?

Dazu stehen dir 3 Wege offen. Die style.css kannst du über das WordPress-Menü einsehen und bearbeiten. Dazu gehst du im WordPress Menü zum Punkt “Design” dann unter “Theme-Datei-Editor” und wählst dein Child-Theme aus. Anschließend kannst du die style.css und die functions.php einsehen und bearbeiten. Alternativ kannst du auch den Theme eigenen CSS-Editor nutzen. Diesen findest du im WordPress-Menü ebenfalls unter “Design”, dann allerdings unter dem Punkt “Customizer” und dann “Zusätzliches CSS”. Alternativ kannst du zudem auch ein Plugin nutzen, z.B. Simple CSS.

Warum sieht meine Website plötzlich anders aus, wenn ich das Child-Theme aktiviere?

Dann hast du das Stylesheet (die Datei “style.css”) deines Themes verändert (customized). Diese Änderungen musst du in das Child-Theme importieren, damit die Website auch so aussieht, wie sie es im ursprünglichen Parent-Theme tat.

Hinweis zur Werbung: 
Links die mit einem * gekennzeichnet sind, sind Partnerprogramm/Affiliate-Links. Kaufst du über diesen Link ein, erhalte ich eine kleine Provision. Der Preis für dich ändert sich nicht! Wenn dir mein Beitrag gefallen und hoffentlich sogar geholfen hat, würde ich mich freuen, wenn du mich auf diesem Wege unterstützt. Vielen Dank!

WordPress Child Theme erstellen und installieren – 2022