Anzeige*

Ein WordPress Theme besteht aus einer Menge von Dateien, die das Design eines mit WordPress erstellten Internetauftrittes festlegen. Hierbei handelt es sich hauptsächlich um PHP und CSS-Dateien. Diese sind auf dem Webserver im Verzeichnis ../wp-content/themes/ zu finden. Hier gibt es für jedes installierte Theme einen Unterordner. Mit Widgets und Plugins lässt sich das Design komfortabel anpassen und ergänzen, auch ohne die Theme-Dateien zu verändern.

Früher oder später gelangt man aber an den Punkt, wo der Code doch abgeändert werden muss. Änderungen in einem Theme vorzunehmen, das man nicht selbst geschrieben hat, führt zu einem größeren Problem: Irgendwann gibt es eine neue Version des Parent-Themes. Eine Aktualisierung führt dann dazu, dass die alten Theme-Dateien überschrieben werden und damit sind auch die Änderungen verloren. Um dieses Problem zu vermeiden, hat WordPress das sogenannte Child-Theme eingeführt.

Ich zeige dir hier, wie du am Beispiel von Theme Divi ein Child Theme erstellst.

Was ist ein Child-Theme

Ein Child Theme bietet die Möglichkeit, Anpassungen am Design vorzunehmen, ohne die Dateien des ursprünglichen Themes (Parent-Theme) zu verändern. Die Änderungen werden in neuen Dateien gemacht, wobei die Funktionalität des Eltern-Themes vererbt wird. Wird das Eltern-Theme auf eine neuere Version aktualisiert, so bleiben die Änderungen im Child-Theme erhalten.

Wie erstellt man ein Child-Theme

Das Erstellen eines Child-Themes ist eigentlich eine einfache Sache. Im Ordner ../wp-content/themes/ erstellst du einen neuen Unterodner mit dem Namen des Child-Themes. Ich nutze selbst das Theme Divi. Abgeleitet von Divi habe ich das Child-Theme DiviVanvox.

In dem Ordner des Child-Themes erstellt man eine Datei style.css und die Datei functions.php. Fangen wir mit dem Inhalt der style.css an, den ich am Beispiel von DiviVanvox erläutern möchte:

Die css-Datei muss einen Kommentarkopf enthalten, wie oben dargestellt. Genau zwei Angaben müssen hier gemacht werden, und zwar der Name des Child-Themes (DiviVanvox) und unter „Template“ der Ordner des Eltern-Themes (Divi). Die anderen Angaben wie Beschreibung, Versionsnummer, Autor und der Link zur Webseite des Autors sind optional.

In die functions.php trägst du nun folgende Zeilen ein, womit alle nötigen CSS-Dateien des Divi Themes geladen werden.

Nun steht das neue Theme im Adminbereich unter Design >Themes zur Aktivierung zur Verfügung.

Das neue Theme kann noch nichts anderes als das Eltern-Theme. Für Änderungen kopiert man die zu ändernden Dateien des Eltern-Themes in das Child-Theme Verzeichnis unter Einbehaltung der Verzeichnisstruktur und schon kann sich jeder nach Lust und Laune im Code seines Child-Themes austoben.