Einstieg in WordPress Child-Themes

Als Betreiber einer WordPress Website stehst du sicher irgendwann vor der Herausforderung das Aussehen deiner Seite anzupassen. Themes sind genau dafür da und bilden den optischen Rahmen deiner WordPress-Seite. Damit dir bei der nächsten Updateroutine des Themes nicht alle eigenen Anpassungen um die Ohren fliegen, gibt es sogenannte Child-Themes. Wie du Child-Themes einsetzt, welche Vorteile sie bringen und was du sonst noch wissen solltest, erfährst du hier.

Was ist ein Theme?

Ein Theme definiert in erster Linie die Optik deiner Website. Mit WordPress selbst hast du einen technischen Rahmen, welchen du relativ unabhängig mit Themes gestalten kannst. In den Templates sind Layout, Farben, Schriften und andere Stilelemente verbaut, die das Theme ausmachen. Darüber hinaus können Themes auch Funktionale Erweiterungen mit sich bringen. Je nach Komplexität sind diese als Plugins auszulagern, da sie bei einem Wechsel des Themes evtl. nicht mehr zur Verfügung stehen. Dazu jedoch später mehr… Die Auswahl an Themes ist sehr groß und du hast die Wahl, wie deine Seite aussehen soll. Ein guter Start ist sicher das Theme-Verzeichnis von WordPress, wo du gratis Themes findest. Viele Entwickler bieten auch eine kommerzielle Version des eigenen Themes, inkl. Support oder weiteren Funktionalitäten an.

Und was ist ein Child-Theme?

Die kurze Antwort ist: Das Child-Theme erweitert dein Parent-Theme um individuelle Anpassungen, damit letzteres updatesicher bleibt und du dich frei austoben kannst.

Wenn mit „Child-Theme“ und „Parent-Theme“ Fragezeichen über deinem Kopf auftauchen, kann ich dich beruhigen, es ist nicht so kompliziert. Als „Theme“ (oder auch „Parent-Theme / Eltern-Theme“) bezeichnet man den Teil Software in WordPress, welcher für das primär für die Erscheinung, also das Aussehen deiner Seite zuständig ist.

Das Child-Theme ist somit wortwörtlich das „Kind“-Theme und übernimmt alle bestehenden Einstellungen des Eltern-Themes und ergänzt diese neben Template-Dateien um individuelle optische und funktionale Anpassungen. Dies hat den Vorteil, dass du dich nicht mit den Anpassungen direkt im Theme selbst herumschlagen musst, die beim nächsten Update wieder weg sind bzw. überschrieben werden können.

Ab wann brauche ich ein Child-Theme?

Nicht jeder benötigt zwingend ein Child-Theme! Es kommt darauf an, was du machen möchtest. Die erste Option sollte immer der Customizer sein. Dieser bringt bereits einfache, gestalterische Möglichkeiten bei jeder Grundinstallation mit sich und kann durch dein Theme bereits erheblich erweitert sein. Der einfache Zugang und die bequeme Steuerung über das Backend ermöglichen es jedem Seiteninhaber gestalterisch aktiv zu werden. Sollte dir all das nicht reichen, schau dir gerne noch die Option „zusätzliches CSS“ an, welche sich seit WordPress 4.7 ebenfalls im Customizer befindet. Solltest du auch damit nicht ans gewünschte Ziel kommen ist ein Child-Theme der nächste Schritt.

OK, legen wir los!

Der grundlegende Aufbau des Child-Themes ist immer gleich und unterscheidet sich kaum. Der Umfang kann jedoch stark variieren und hängt von deinen gewünschten Änderungen ab. Als erstes benötigst du für dein Child-Theme einen weiteren Unterordner im Themes-Verzeichnise (/wp-content/themes/). Dies erreichst du per FTP-Client (z.B. FileZilla) auf deinem Server. Den Ordner deines neuen Child-Themes kannst du individuell benennen. Bewährt hat sich der Eltern-Theme-Name mit dem Zusatz „-child“ am Ende um den Überblick zu behalten.


style.css

In diesem neuen Ordner erstellst du nun eine css-Datei mit dem Namen „style.css“ und folgendem Inhalt:

/*
Theme Name:	Test-Child
Template:	twentyseventeen
*/

Diese beiden Angaben sind das minimum, damit WordPress weiß, wie es damit umzugehen hat. Mit dem Theme Name wird der Name deines Child-Themes gesetzt und das Template definiert das Eltern-Theme, worauf aufgebaut wird. In unserem Beispiel wird das vorinstallierte Theme „twentyseventeen“ genutzt.

Angaben wie Description (Beschreibung) und Author (Name des Autors) können ebenfalls im Kopf deiner style.css untergebracht werden. Weitere optionalen Daten wie „Theme URI, Author URI, Version, License, License URI, Tags, Text Domain“ sind ebenfalls möglich. Diese werden bei den Theme-Details angezeigt, sind jedoch nicht zwingend nötig im ersten Schritt. Deine style.css kann nun also auch so aussehen.

/*
Theme Name: Test-Child
Theme URI: https://www.deinwp.de/child-themes/
Template: twentyseventeen
Author: Maik Bernstein
Author URI: https://www.deinwp.de/
Description: Ein Child-Theme zum testen der Funktionen.
Tags: modern, minimal
Version: 1.1
*/

Direkt unter diesen Angaben, welche als Kommentar zwischen /* und */ gesetzt werden, kannst du ab der nächsten Zeile deine eigenen CSS-Styles definieren. Diese werden zusätzlich geladen und können bestehende Definierungen überschreiben.


functions.php

Nun benötigst du noch eine weitere wichtige Datei, damit dein Child-Theme funktioniert, die functions.php. Sie liegt ebenfalls direkt im Ordner des Child-Theme und ist, wie der Name schon vermuten lässt, für weitere Funktionen zuständig. Mit den folgenden Zeilen stellen wir zunächst einmal sicher, dass das Layout vom Eltern-Theme korrekt geladen wird.

<?php // Öffnender PHP tag - der Beginn deiner functions.php

// Style vom Eltern-Theme einbinden
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Der Öffnender PHP tag steht zu Beginn jeder functions.php und muss nicht -wie sonst üblich- am Ende geschlossen werden. Die nachfolgenden Zeilen rufen das Verzeichnis des Parent-Themes auf, um dann die style.css zu laden. Damit wäre schon das absolute Minimum eines Child-Themes erfüllt. Einen tieferen Einblick in den Aufbau gibt die Dokumentation von WordPress, woher auch die obenstehenden Zeilen stammen. Alle weiteren Funktionen die du hier einträgst, können dein Parent-Theme um diese erweitern oder vorhandene überschreiben. Hier sprechen wir von sog. Snippets (Code-Schnipseln), welchen wir uns später widmen werden.

Die functions.php des Child-Themes wird bei einem aktiven Theme als erstes geladen und ergänzt -im Gegensatz zu den restlichen Template-Dateien- die des Parent-Themes, statt sie zu überschreiben.


Template-Dateien

Mit den Templates oder auch Vorlagen kannst du den Aufbau deiner Seite komplett umkrempeln, wenn Styling und Funktionen an ihre Grenzen kommen. Du kannst z.B. bestehende Template-Dateien deines Themes direkt in dein Child-Theme kopieren und dort die gewünschten Anpassungen vornehmen. Sollte mal etwas nicht klappen, löschst du die Datei einfach wieder und alles bleibt beim Alten. Solange die kopierte Datei in der gleichen Pfadebene deines Child-Themes abgelegt wird, überschreibt sie die des Parent-Themes.

Neben bereits bestehenden Template-Dateien kannst du natürlich auch eigene Vorlagen als .php Datei anlegen und musst diese dann noch einbinden. Dies machst du wiederum über die functions.php und folgenden Zeilen.

function dwp_new_file() {
	require_once ('neue-datei.php');
}

add_action( 'after_setup_theme', 'dwp_new_file' );

Mit diesem Beispiel fügst du eine weitere Datei mit dem Namen „neue-datei.php“ hinzu. Diese liegt ebenfalls im Ordner deines Child-Themes. Neben dieser Variante gibt es noch weitere Möglichkeiten Templates einzubinden, dazu jedoch in einem anderen Beitrag mehr. Alternativ schau dir gerne die Dokumentation von WordPress näher an.


Häufige Fragen & Antworten rund um WordPress Child-Themes

Geht das auch einfacher?

Bei WordPress machen sich zum Glück viele Menschen stark, damit es jeder Anwender leicht hat. In diesem Fall gibt es bereits Plugins, welche genau diese Aufgaben für dich übernehmen. Mit dem Plugin „Child Theme Configurator“ kann jeder mit wenigen Klicks ein eigenes Child-Theme erstellen.

Hilfe, alle Einstellungen im Customizer sind plötzlich weg!

Sobald du von deinem Parent-Theme zu einem Child-Theme wechselst, verschwinden sehr wahrscheinlich deine individuellen Einstellungen im Customizer (Design > Customizer). Dies passiert, weil die Einstellungen nur innerhalb des -zu diesem Zeitpunkt aktiven- Themes getroffen werden. Doch keine Angst, mit einem Wechsel sind sie nicht weg und ich verrate dir, wie du sie für dein Child-Theme ganz unkompliziert übernehmen kannst.

Dazu installierst du das Plugin „Customizer Export/Import“ und aktivierst es. Dein Eltern-Theme muss aktiviert sein, damit die Einstellungen abgerufen werden können. Direkt im Customizer findest du nun die Option „Export/Import“ und kannst die gesamten Einstellungen exportieren. Dann musst du wieder dein Child-Theme aktivieren und im Customizer wieder importieren. Das war es schon und es sollten alle Anpassungen im Customizer übernommen sein. Das Plugin kannst du danach direkt wieder entfernen, da es seinen Zweck erfüllt hat und nicht weiter benötigt wird.

Müssen alle Einstellungen im Eltern-Theme erneut angepasst werden?

Es kommt ein wenig auf dein gewähltes Theme an. Soweit die Einstellungen des Themes über den in WordPress integrierten Customizer erfolgen, kannst du den Tipp von oben nutzen und sie einfach mit dem genannten Plugin exportieren und importieren. Sollte dein Theme eigene Einstellungen in einem anderen Menü haben, die evtl. über den Customizer hinaus gehen, solltest du mal schauen, ob es evtl. auch eine Export/Import Möglichkeit für dein Theme gibt. Oft können alle getroffenen Einstellungen und Anpassungen mit z.B. einer großen kryptischen Zeichensammlung kopiert werden. Kopiere sie dazu einfach aus dem Export-Feld und füge sie nach dem Wechsel wieder in das Import-Feld ein. Das Zwischenspeichern in einer einfachen Textdatei kann so auch als eine Art Backup dieser Einstellungen dienen.


Zusammenfassung / Fazit

Child-Themes sind wohl der beste und auch empfohlene Weg, wenn du dein WordPress-Theme anpassen möchtest. Kleine und größere Änderungen sind nach Bedarf an unterschiedlichen Stellen möglich, ohne das Parent-Theme selbst zu verändern. Das hat den Vorteil, dass du Theme-Updates ohne Verlust deiner Anpassungen einfach installieren kannst. Solltest du eigene Templates nutzen, prüfe diese nach dem Update, falls sich der Aufbau im Parent-Theme verändert hat.

Ich hoffe ich konnte dir den Aufbau und Sinn eines Child-Theme näher bringen und freue mich, wenn du wieder ein Stück besser mit deiner Seite umgehen kannst.

Sollte hier noch etwas fehlen, oder hast du eine Frage, teile es gerne in den Kommentaren.


28.06.2019 – Beitragsveröffentlichung
24.01.2020 – Erweiterung um FAQ-Bereich

2 Gedanken zu „Einstieg in WordPress Child-Themes“

Schreibe einen Kommentar