Ein WordPress Child Theme erstellen – Schritt für Schritt Anleitung

WordPress erlaubt die Erweiterung und Anpassung von Themes mit Child Themes. Ein Child Theme ist ein Theme, welches die Funktionalität und das Design des Parent Themes erbt. Es ermöglicht damit das Hinzufügen von neuen Features oder die einfache Veränderung des Parent Themes.

Der Hauptvorteil dabei ist, dass die Anpassungen im Child Theme ohne Änderung der Dateien des Parent Themes gemacht werden können. Damit gehen eigene Modifikationen bei einem Update des Parent Themes nicht verloren. Updates in WordPress ersetzen üblicherweise alle Dateien des Themes.

Das Child Theme selbst kann sehr schlank bleiben, weil es nur den Code für die Modifikationen selbst enthält. In der folgenden Schritt für Schritt Anleitung zeige ich, wie du ein eigenes Child Theme erstellen kannst.

1) Child Theme Ordner anlegen

Als Beispiel erstellen wir ein Child Theme für das Standard TwentySixteen Theme. Der Name des Child Themes soll Theme Coder sein.

Als Erstes erstellst du einen neuen Ordner auf deinem Computer. Dieser soll alle Dateien des Child Themes beinhalten. Ich empfehle, die gängigen WordPress Konventionen einzuhalten, d.h. nur Kleinbuchstaben zu verwenden und Wörter mit Bindestrich zu trennen.

Wir erstellen deshalb einen neuen Ordner namens theme-coder für unser Child Theme.

2) style.css des Child Themes erstellen

Das Child Theme benötigt zunächst eine style.css Datei, welche du in dem neuen Ordner erstellen kannst. In der Datei können später Design-Anpassungen des Parent Themes mit CSS vorgenommen werden – beispielsweise Änderung von Farben, Typographie oder Abständen.

Darüber hinaus enthält die style.css auch alle Informationen für dein neues Theme, wie z.B. den Namen, Beschreibung, Versionsnummer und Autor. Diese Infos werden später im WordPress Backend angezeigt. Kopiere deshalb folgenden Text an den Anfang der style.css.

Wichtig ist die Angabe des Template Parameters. Damit teilen wir WordPress mit, dass es sich hier um ein Child Theme handelt. Bitte beachte, dass hier der Name des Ordners des Parent Themes verwendet wird. Also twentysixteen, nicht etwa Twenty Sixteen.

3) functions.php des Child Themes erstellen

Im nächsten Schritt erstellen wir neben der style.css eine weitere Datei namens functions.php

Diese wird von WordPress automatisch vor der functions.php des Parent Themes geladen und erlaubt damit ein Überschreiben oder Erweiterung der Funktionalität mit eigenen Funktionen oder Code Snippets. Die Datei bleibt erst einmal leer, was wir aber im nächsten Schritt mit der Erstellung einer eigenen Funktion ändern.

4) style.css des Parent Themes laden

WordPress läd automatisch die style.css des aktiven Themes. Somit wird also die style.css des Child Themes geladen. WordPress übernimmt aber nicht das Laden der style.css des Parent Themes, wenn es nicht mehr das aktive Theme ist.

In den meisten Fällen wollen wir kein komplett neues Stylesheet für unser Theme entwickeln, sondern das ursprüngliche Design übernehmen und nur etwas verändern. Deshalb muss das Child Theme dafür sorgen, dass die style.css des Parent Themes weiter geladen wird.

Früher wurde das mit einer @import Regel in der style.css des Child Themes gelöst. Diese Vorgehensweise ist aber nicht mehr zeitgemäß, weil sie langsamer ist und nicht die Standard WordPress Funktionen verwendet.

Deshalb erstellen wir eine neue Funktion, um die style.css des Parent Themes einzubinden. Kopiere dazu folgenden Code in die functions.php deines Child Themes.

Wir verwenden hier die Standard Vorgehensweise mit wp_enqueue_style zum Einbinden von CSS und JS Dateien. Mit der Funktion get_template_directory_uri bekommen wir den Pfad zum Ordner des Parent Themes.

5) Child Theme installieren

Damit ist die Erstellung des Child Themes abgeschlossen. Im letzten Schritt installieren wir das neue Theme in WordPress.

Eine Möglichkeit zur Installation ist der Upload auf den Webserver mit FTP. Das Child Theme muss dabei wie jedes andere Theme in den Theme Ordner von WordPress kopiert werden.

• Root Verzeichnis (www)
  • wp-content
    • themes (Verzeichnis für alle installierten Themes)
      • twentysixteen (Ordner unseres Parent Themes)
      • theme-coder (Unser neues Child Theme)

Eine zweite Möglichkeit ist die direkte Installation im WordPress Backend. Dazu muss der Child Theme Ordner als Erstes zu einer Datei theme-coder.zip gepackt werden. Anschließend kann unter Design > Themes > Hinzufügen > Theme hochladen im WordPress Backend die .zip Datei ausgewählt werden, um das Child Theme zu installieren.

Fazit

Das Child Theme kann nun aktiviert und verwendet werden. PHP Code Snippets können nun einfach in die functions.php eingefügt werden, die style.css für Style-Änderungen genutzt werden. Modifikationen gehen nun bei einem Update des Parent Themes nicht mehr verloren.

Update: Serie über Child Themes

Alle Möglichkeiten, welche du mit einem Child Theme zur Anpassung deines Themes nutzen kannst, stelle ich nun in einer kleinen Artikel-Serie vor.