WordPress Child-Theme erstellen [quick tip]

Was ist eigentlich ein WordPress Child-Theme und wofür brauche ich das? Wir erklären kurz und bündig, was es damit auf sich hat und wie man es schnell einrichtet, um seine individuellen Anpassungen am Theme bei einem Update nicht zu überschreiben. 

quicktip-wordpress-child-theme-erstellen-wordpress-ideesign-koeln-webdesign-blogpost

Was ist ein Child Theme und wann brauche ich das?

Ein Child Theme wird dann benötigt, wenn ich in meinem WordPress Theme individuelle Anpassungen vornehmen möchte. In der Regel sind Design-Anpassungen am Theme über die „Theme Options“ möglich, die man bequem im WordPress Backend vornehmen kann. Dort kann ich z.B. die Schriftart, die Textgröße, Farben, Abstände, Hintergrundbilder und viele andere Dinge anpassen.

Möchte ich darüber hinaus Änderungen vornehmen, die etwas tiefergehende Anpassungen erfordern, bei denen ich also in den Quellcode der PHP-Templates eingreifen muss, ist ein Child Theme eine Notwendigkeit. Denn würde ich einfach drauflos in den Dateien des Themes Änderungen vornehmen, werden diese Änderungen mit dem nächsten Update des WordPress-Themes überschrieben.

Änderungen könnten z.B. Elemente sein wie zusätzliche Code Snippets, die ich in den Footer oder Header der Seite einbaue. Oder ich möchte nicht etwas einbauen sondern entfernen. Z.B. die Kommentarfunktion in der single.php, da ich keine Kommentare wünsche oder die Platzierung ändern möchte, die Gründe können vielfältig sein.

Wie erhalte ich ein Child Theme?

Viele Theme-Entwickler bieten für ihre professionellen WordPress Themes ein fertiges Child Theme an, das oftmals beim Kauf des Themes z.B. über den Envato Store in den Download-Dateien enthalten ist.

Ist das der Fall, muss ich lediglich beide Themes installieren, zunächst das Haupt-Theme (aber nicht aktivieren!) und danach das Child Theme, welches ich dann aktivieren kann. Das Child Theme erkennt automatisch, dass es selbst ein „Child“ und seine „Mutter“ vorhanden ist.

The7 Child Theme

Beispiel für ein Child Theme, das vom Theme-Entwickler mitgeliefert wird: Neben dem eigentlichen Theme im Hauptordner liegt im Unterordner „Developer Tools“ das Child Theme als Zip-Datei.

Mein Theme hat kein Child Theme mitgeliefert bekommen. Bekomme ich das auch selber hin?

Na klar, das ist auch gar nicht so schwer: Wir brauchen einen Ordner mit drei Dateien: Eine style.css, eine functions.php und optional eine screenshot.png.

Zunächst muss ein weiterer Ordner im WordPress Theme Ordner (wp-content/themes) erstellt werden. Naheliegenderweise sollte er „meintheme-child“ benannt werden, wenn „meintheme“ das Parent Theme, also das „Mutter-Theme“ ist.

style.css

Innerhalb des Ordners wird dann eine style.css erstellt mit folgenden Angaben. Dabei sind Theme Name, Theme URI, Description, Author, Author URI und die Versionsnummer vollkommen frei gestellt. Nur das Template muss mit dem Namen des Parent Theme übereinstimmen, damit die beiden Themes miteinander verbunden werden:

/*
Theme Name: Meintheme Child Theme
Theme URI: http://www.yourtheme-uri.com
Description: Foxy Child Theme
Author: Elegant Themes
Author URI: https://www.i-deesign.de
Template: meintheme
Version: 1.0.0
*/

functions.php

Danach kümmern wir uns um die functions.php. Hier ist es lediglich nötig, die Datei als PHP-Datei zu definieren, indem wir in Zeile 1 wir folgt beginnen:

<?php

Damit ist zunächst alles getan. Die Datei liegt im selben Ordner wie die style.css. Bei großen Themes ist die functions.php i.d.R. vollgepackt mit Code. Alles, was ich jetzt in die functions.php meines Child Themes schreibe, wird an die ursprüngliche Datei angehängt, also quasi addiert.

Das gleich gilt für meine styles.css. Auch diese Datei ist bei WordPress Themes der Ort, an dem alle Theme-relevanten CSS-Angaben gemacht werden. Sollte dies nicht der Fall sein, und die Datei leer sein, liegt das daran, dass dann wiederum über die functions.php ein anderer Ort angeben wird, um die Styles zu laden. Das ist z.B. bei sehr umfangreichen Multi Purpose Themes oft der Fall.

screenshot.png

Die Datei screenshot.png ist nötig, wenn man im WordPress Backend unter Design > Themes ein Bild zu seinem Child Theme angezeigt bekommen möchte. Für die Größe der Datei gibt es ein klare Vorgabe: Im besten Fall beträgt sie 1200 x 900 px. Alles andere ist auch machbar, wird aber dann sicher nicht so angezeigt, wie gewünscht, bzw. von WordPress zurechtgeschnitten.

Ich hab die drei Dateien. Was jetzt?

Jetzt muss das Child Theme in WordPress aktiviert werden. Dazu geht man im Backend zum Bereich Design > Themes und aktiviert dort sein Child-Theme. Wenn die Angaben korrekt sind, erkennt WordPress den Zusammenhang zwischen Child- und Haupt-Theme.

Im Backend und auf der Webseite sollte ich keinen Unterschied erkennen. Die Webseite wird ganz normal durch das Haupt-Theme definiert.

Die ganze Kraft eines Child Themes entfaltet sich erst, wenn ich beginne, die Webseite zu individualisieren. Testweise kann man einfach mal die style.css mit der Angabe

body {background:red;}

versehen, um zu sehen, ob es funktioniert. Färbt sich der Hintergrund meiner Seite entsprechend ein, läuft alles optimal. Das funktioniert so, da die Angaben in einem Child Theme immer NACH der Haupt-CSS geladen werden. Dadurch werden ursprüngliche Angaben überschreiben, da sie im Quellcode weiter unten kommen.

The7 Child Theme
Beispiel für eine Ordner-Struktur im WordPress „themes“-Ordner: „dt-the7“ ist das Maintheme, „dt-the7-child“ das Child Theme und das Standard-Theme „twentytwenty“ dient als Fallback.

Weitere Template-Dateien hinzufügen

Nach diesem Prinzip kann ich jetzt jede beliebige Datei aus meinem Haupt-Theme kopieren und in mein Child Theme einfügen. Sobald die Datei identischen Names in meinem Child Theme Ordner vorkommt, wird WordPress diese Datei der eigentlichen Datei im Haupt-Theme vorziehen.

Das bezieht sich ebenso auf etwaige Unterordner. Liegt im Haupt-Theme eine Datei z.B. unter „meintheme/includes/header.php“, muss ich diese Ordnerstruktur in meinem Child Theme nachbauen, damit WordPress diese Datei benutzt.

Fazit

Child Themes sind unabdingbar, wenn man WordPress professionell einsetzt, ob als CMS oder als Blog. In der Regel werden Child Themes von den Theme-Entwicklern mitgeliefert. Wenn nicht, hilft eine kurze Google-Suche nach dem Theme-Namen plus „child theme“ und man kommt meistens schnell an eine Download-Datei. Sollte das nicht der Fall sein, kann man sich mit ein paar schnellen Handgriffen selbst ein Child Theme erstellen.

Auch wenn man außer ein paar Angaben in der CSS zunächst nicht viel braucht: Es fühlt sich einfach sicherer an, wenn man ein Child Theme auf seiner Webseite aktiv hat. Denn jede etwaige Änderung an meinem Theme wird bei einem Update überschrieben. Und das lässt sich mit einem Child Theme von vorne herein verhindern.