Ein WordPress Child-Theme – Erläuterung, Nutzen und Anleitung zur Erstellung (TEIL 2)

Nachdem im ersten Teil der Nutzen sowie die Gründe für die Erstellung eines Child-Themes aufgezeigt wurden, geht es nun um die praktische Umsetzung. In der folgenden Schritt-für-Schritt Anleitung wird gezeigt, wie man ein Child-Theme auf der eigenen WordPress-Webseite einrichtet.

Als Fallbeispiel wird das Standard WordPress Theme TwentyNineteen benutzt und dafür ein Child-Theme, genannt «Beispiel Child-Theme», erstellt.

1. Ein Ordner für das Child-Theme anlegen

Im ersten Schritt wird ein Ordner mit dem Namen «beispiel-child-theme» auf dem Computer erstellt. Dieser soll am Ende der Einrichtung alle Dateien eines Child-Themes beinhalten.

2. Das Style-Sheet für das Child-Theme erstellen

Wie jedes Theme benötigt auch das Child-Theme eine Datei mit den Definitionen für das Styling der Seite, eine sogenannte style.css-Datei. Diese Datei enthält später Anpassungen des Parent Themes, welche mit CSS vorgenommen werden, wie zum Beispiel eine Änderung von Farben, Abständen oder der Typographie. Desweitern enthält die CSS-Datei alle gängigen Informationen für dein neues Child-Theme, wie zum Beispiel den Namen, eine Beschreibung oder den Autor. Der Anfang deiner style.css-Datei sollte wie untenstehend aussehen:

/*
Theme Name: beispiel-child-theme
Description: Beispiel Child Theme
Author: Peter Muster
Author URI: https://blog.xeit.ch
Template: twentynineteen
Version: 1.0
Tags:
*/
/*Füge deinen Code unter dieser Zeile ein. Nutze !important, um Styles aus dem Haupttheme zu überschreiben.*/

Wichtig ist insbesondere der Parameter «Template». Damit versteht WordPress, dass es sich hierbei um ein Child-Theme handelt. Es ist deshalb entscheidend, hier den exakten Namen des Ordners des Parent Themes einzutragen.

3. Eine functions.php Datei für das Child Theme anlegen

Als nächsten Schritt benötigt das Child-Theme noch eine functions.php. Diese Datei wird von WordPress dann vor der functions.php des Parent-Themes geladen und erlaubt es, die Funktionalität des Themes mit eigenen Erweiterungen oder Überschreibungen zu ergänzen.

4. Style.css des Parent Theme laden

WordPress lädt immer automatisch die style.css-Datei des aktiven Themes, also in diesem Fall diejenige des Child-Themes. Da aber kein komplett neues Styling entwickelt werden soll sondern nur Veränderungen zum Parent-Theme muss nun eine Funktion eingerichtet werden, um die style.css des Parent-Themes weiterhin zu laden.

In der functions.php deines Child-Themes sollte der folgende Code stehen:

<!–?php
//add child theme
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); }
?–>

5. Installation des Child Theme

Damit das Child-Theme einwandfrei funktioniert, muss der in Schritt 1 erstellte Ordner nun noch am richtigen Ort abgelegt werden, nämlich im Theme-Ordner von WordPress (root Verzeichnis / wp-content / themes). Dies kann entweder per FTP-Server gemacht werden oder alternativ über den Hosting-Anbieter, welcher diese Option in der Regel im Kunden-Backend zur Verfügung stellt. Sobald der Ordner hochgeladen ist erscheint das neu erstellte Child-Theme bei der Themeübersicht und kann aktiviert und benutzt werden.

Fazit und Zusammenfassung

Ein WordPress Child-Theme ist relativ schnell eingerichtet und bringt einen grossen Vorteil mit sich. Änderungen können mit dem Child-Theme nachhaltig, sicher und unkompliziert gespeichert werden und der Aufwand dafür hält sich in Grenzen – es ist deshalb für sämtliche WordPress-Webseiten immer von Vorteil und lohnenswert, ein Child-Theme einzurichten.