Ein WordPress Child Theme erstellen – so geht’s
Für individuelle Theme-Anpassungen gibt es in WordPress die sogenannten Child Themes. In diesem Beitrag erfährst Du, wofür und warum Du ein Child Theme verwenden solltest und ich zeige Dir Schritt für Schritt, wie es geht.
Was ist ein Child Theme?
Ein Child Theme ist mit einem anderen Theme verknüpft und erbt alle Stile, Eigenschaften und Funktionen des übergeordneten Themes. Das Child Theme enthält lediglich die Anpassungen.
Mit einem Child Theme lässt sich ein Theme individuell anpassen ohne dass dazu das ursprüngliche Theme verändert werden muss.
Was ist ein Parent Theme?
Das Theme, mit dem ein Child Theme verknüpft ist, wird Parent Theme genannt. Es handelt sich um ein ganz normales WordPress #theme.
Potenziell kann jedes Theme ein Parent Theme sein. Ausgenommen sind Child Themes. Eine mehrfache Ableitung ist also nicht möglich.
Ein Child Theme hat genau ein Parent Theme, mit dem es verknüpft ist.
Wofür verwende ich ein Child Theme?
Mit einem Child Theme kannst Du ein Theme anpassen, das Du beispielsweise aus dem Theme-Verzeichnis von wordpress.org oder einer anderen Quelle installiert hast.
Seit #wpversion 4.7 kann im Customizer zusätzlicher CSS-Code eingefügt werden. Kleinere Anpassungen – zum Beispiel das Ändern einer Farbe – können hier leicht durchgeführt werden.
Ein großer Vorteil des Customizers ist, dass Änderungen am CSS sofort in der Vorschau sichtbar werden. Bei umfangreicherem CSS ist die Anpassung im Customizer aber unpraktisch (siehe auch unsere Übersicht über die Möglichkeiten CSS zu bearbeiten).
Außerdem ist es eine generelle Überlegung, ob man Design-Anweisungen in WordPress selbst vornehmen und in der WordPress-Datenbank speichern möchte. Grundsätzlich gehört alles, was das Design der gesamten Website betrifft, ins Theme.
Die Trennung von Design und Inhalt ist die Hauptaufgabe eines Content Management Systems. Puristen bekommen alleine schon bei dem Gedanken Magenschmerzen, Teile des Designs zusammen mit dem Inhalt in der Datenbank zu speichern.
Davon abgesehen ist die Möglichkeit, zusätzlichen CSS-Code direkt im Customizer einzufügen, schlicht und einfach sehr praktisch und für kleinere Anpassungen durchaus in Ordnung. Größere Anpassungen sollten aber sauber in einem Child Theme vorgenommen werden.
Haben mehrere Personen Zugriff auf den Customizer mag es sinnvoll sein, auch für kleine Anpassungen schon ein Child Theme zu verwenden.
Außerdem sind die Möglichkeiten eines Child Themes wesentlicher umfangreicher. Die möglichen Anpassungen beschränken sich nicht auf CSS. Ein Child Theme kann jede Datei des Parent Themes überschreiben. Damit lassen sich komplette Templates ersetzen oder auch ganz neue Funktionen dazuprogrammieren.
Warum sollte ich ein Child Theme verwenden?
Die Frage ist berechtigt. Schließlich könnten die gewünschten Änderungen auch direkt im Theme vorgenommen werden.
Es gibt einen ganz einfachen Grund, warum Du das auf gar keinen Fall machen solltest: beim nächsten Update des Themes werden alle Änderungen, die Du direkt am Theme vorgenommen hast, überschrieben.
Natürlich kannst Du das Theme auch komplett kopieren und umbenennen. Damit erhältst Du keine Updates mehr.
Der Vorteil von Child Themes liegt genau darin, dass das Parent Theme aber nach wie vor mit Updates versorgt wird. Sämtliche Anpassungen bleiben im Child Theme von den Updates unberührt.
Ein Child Theme ist damit die perfekte Methode, um ein Theme, das Du nicht selbst erstellt hast, anzupassen. Deshalb solltest Du Änderungen niemals direkt in einem Theme vornehmen, sondern immer ein Child Theme erstellen.
Wie erstelle ich ein Child Theme?
Damit kommen wir zur Schritt für Schritt Anleitung zum Erstellen eines Child Themes für WordPress.
Einen Ordner für das Child Theme anlegen
Alle Themes liegen im Ordner wp-content/themes. Für jedes Theme gibt es dort ein eigenes Unterverzeichnis. Bei einer aktuellen standardmäßigen WordPress-Installation findest Du dort die Verzeichnisse twentysixteen, twentyseventeen und twentynineteen, in denen sich das jeweilige Theme befindet.
Für Dein Child Theme musst Du in diesem Ordner ebenfalls ein eigenes Verzeichnis anlegen. Wie dieses Verzeichnis heißt, spielt keine Rolle. Aber es gibt die Empfehlung, das Verzeichnis nach dem Parent Theme mit dem Zusatz -child zu benennen.
Das ist ein gutes Namenskonzept und sorgt für Übersicht im Ordner. Wenn Du beispielsweise ein Child Theme für das Twenty Nineteen Theme anlegen möchtest, würdest Du den Ordner twentynineteen-child nennen. Zwingend nötig ist das wie erwähnt aber nicht.
Zum Anlegen eines neuen Ordners auf Deinem Webserver musst Du Dich per FTP mit dem Server verbinden. Dazu benötigst Du einen FTP-Client sowie die FTP-Zugangsdaten, zu Deinem Server, die Du von Deinem Hoster erhältst.
Ein Stylesheet für das Child Theme anlegen
Die zentrale Datei, die jedes WordPress Theme benötigt, ist eine Stylesheet-Datei, die zwingend den Namen style.css haben muss. Nach dieser Datei wird gesucht, damit das Theme im WordPress Admin angezeigt wird.
Diese Datei legst Du mit einem Text-Editor auf Deinem PC an und überträgst sie per FTP auf den Server. Es empfiehlt sich, einfach das gesamte Child Theme am PC genauso anzulegen wie am Server. Bei Änderungen kann einfach der ganze Ordner hochgeladen werden.
An dieser Stelle wieder einmal der obligatorische Hinweis, dass Textverarbeitungsprogramme wie beispielsweise Word keine Text-Editoren sind. Solche Programme speichern neben dem sichtbaren Text auch zusätzliche Informationen in der Datei und machen sie damit für WordPress unbrauchbar. Ein empfehlenswerter Text-Editor ist beispielsweise Notepad++.
Die Informationen, die WordPress für die Anzeige benötigt, müssen sich in einem Kommentar zu Beginn der Datei befinden. Die Angaben müssen in einem definierten Muster erfolgen.
Das folgende Beispiel zeigt den minimalen Inhalt, der für ein Child Theme nötig ist.
/*
Theme Name: Mein Theme
Template: twentynineteen
*/
Bei Theme Name ist der Name des Themes anzugeben, so wie er im Admin angezeigt werden soll.
Bei Template wird angegeben, auf welchem Parent Theme das Child Theme basiert. Wichtig ist, dass hier der Name des Ordners eingetragen werden muss, in dem sich das Parent Theme befindet und nicht der angezeigte Name. Tatsächlich ist es diese eine Zeile im Stylesheet, die aus einem Theme ein Child Theme macht. Um den Rest kümmert sich WordPress.
Wenn Du diese Datei auf Deinen Webserver hochlädst, wird Dir das Child Theme bereits im WordPress Admin angezeigt.
Wenn Du Dir nun die Details anzeigen lässt, dann siehst Du, dass hier noch einiges fehlt. Zumindest ist hier aber ersichtlich, dass es sich um ein Child Theme handelt. Auch das Parent Theme wird angezeigt.
Du kannst das Child Theme nun auch schon aktivieren. Wenn Du das machst, wirst Du allerdings feststellen, dass die Website nicht korrekt dargestellt wird. Dazu gleich mehr.
Wenn Du das Child Theme nur für Dich selbst erstellst, ist das wahrscheinlich für Dich so ausreichend. Möchtest Du das Child Theme weitergeben oder auch für Dich selbst eine „schönere“ Ansicht haben, kannst Du weitere Angaben im Kopf der style.css einfügen.
/*
Theme Name: Mein Theme
Theme URI: https://wpwissen.com/wordpress-child-theme-erstellen
Description: Das ist ein Child Theme, basierend auf dem Theme Twenty Nineteen. Es dient zur Demonstration für den Artikel "Ein WordPress Child Theme erstellen - so geht's", erschienen auf wpwissen.com.
Author: Peter von wpwissen.com
Author URI: https://wpwissen.com
Template: twentynineteen
Version: 1.0.0
*/
Auf die einzelnen Angaben gehe ich hier nicht näher ein, die sollten selbsterklärend sein. Es gibt noch weitere mögliche Angaben, auf die ich ebenfalls nicht eingehen werde. Damit sieht die Detailansicht unseres Child Themes schon besser aus.
Ein Vorschaubild für das Child Theme anlegen (optional)
Wenn Du in der Theme-Übersicht für Dein Child Theme auch ein Vorschaubild angezeigt bekommen möchtest, musst Du dazu nur ein Bild mit den Namen screenshot.png in der Größe 1200 x 900 Pixel in den Ordner speichern.
Neben dem Dateiformat PNG sind auch JPG und GIF erlaubt, WordPress empfiehlt allerdings ausdrücklich die Verwendung von PNG.
Nach dem Hochladen des Bildes wird uns in der Theme-Übersicht sofort das Vorschaubild angezeigt. Ebenso natürlich auch in der Detail-Ansicht.
Eine functions.php für das Child Theme erstellen
Wie bereits weiter oben erwähnt, wird Deine Website jetzt nicht korrekt angezeigt, wenn Du das Child Theme aktivierst. Das liegt daran, dass das Stylesheet style.css des Parent Themes nicht geladen wird.
WordPress basiert auf der Programmiersprache PHP. Auch der Code für Themes wird in PHP programmiert. Das ist mit einer der Gründe für den Erfolg von WordPress. Bei anderen Content Management Systemen muss häufig eine eigene Sprache für das Erstellen von Designs erlernt werden.
Die zentrale PHP-Datei, die von WordPress beim Laden eines Themes immer als erstes geladen wird, heißt functions.php. Beim Erstellen dieser Datei ist Vorsicht geboten. Ein kritischer PHP-Fehler kann dazu führen, dass WordPress gar nicht mehr funktioniert. Sollte Dir das passieren – keine Panik. Lösche einfach die functions.php am Webserver und WordPress läuft wieder.
Neben der style.css des Parent Themes wollen wir auch die style.css des Child Themes laden. So können wir in dieser Datei die gewünschten CSS-Änderungen vornehmen.
<?php
function mein_theme_styles() {
wp_enqueue_style( 'mein-theme-parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'mein-theme-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'mein-theme-parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'mein_theme_styles' );
?>
Eine Erklärung des Codes würde den Rahmen dieses Artikels sprengen. Wenn Du Dich in das Thema einlesen möchtest empfehle ich Dir zum Einstieg meinen Artikel Was sind WordPress Hooks, Actions und Filter?. Weiterführende Informationen findest Du dann in den WordPress Developer Resources, im WordPress Codex sowie im PHP Manual.
Wenn Du diese Datei per FTP auf Deinen Webserver hochlädst und das Theme aktivierst, dann wirst Du feststellen, dass die Website exakt gleich aussieht wie mit dem Twenty Nineteen Theme. Das ist nicht verwunderlich, da wir noch keine Änderungen am Child Theme vorgenommen haben.
Du hast damit erfolgreich ein Child Theme erstellt. Jetzt geht es ans Anpassen Deines Child Themes.
Wie passe ich das Child Theme an?
Nun möchte ich beispielhaft ein paar Anpassungen am Child Theme vornehmen, um Dir zu zeigen, wie es funktioniert.
Zum Beispiel ist es bei Verwendung des Twenty Nineteen Themes nicht möglich, die Textfarbe zu ändern. Als Farbe für den Text ist der hexadezimale Farbcode #111 definiert. Eine kurze Erklärung zu hexadezimalen Farbwerten findest Du im SELFHTML Wiki.
Um die Farbe etwas aufzuhellen legen wir in unserem Child Theme einen Farbwert von #666 für den Text fest. Das ist zugegebenermaßen etwas zu hell, aber so sieht man den Unterschied deutlich. Für diese Änderung fügen wir am Ende unserer style.css eine CSS-Anweisung ein.
body {
color: #666;
}
Wenn Du die Website jetzt neu lädst, wirst Du den Unterschied deutlich sehen. Nehmen wir noch ein paar weitere Anpassungen vor.
Als Beispiel passen wir den Header-Bereich etwas an. Wir wollen die Abstände verringern, eine Hintergrundfarbe definieren und am Ende eine dunkelgraue Linie einfügen.
.site-header {
padding: 2rem 0;
background-color: #eee;
border-bottom: 1px solid #333;
}
Darauf, ob die Änderungen an anderer Stelle möglicherweise negative Auswirkungen haben, habe ich nicht geachtet. Die Anpassungen dienen nur der Demonstration.
Auch auf CSS an sich werde ich nicht eingehen. Bei Interesse empfehle ich für den Anfang das CSS-Einstiegstutorial von SELFHTML.
Entfernen wir nun noch die Linie, die oberhalb der Überschriften angezeigt wird.
.entry .entry-title:before {
display: none;
}
Die Unterschiede sind jetzt schon deutlich zu sehen. Das folgende Bild zeigt links einen Screenshot mit dem Twenty Nineteen Theme und rechts mit unserem Child Theme.
Alle diese Änderungen hätten wir auch im Customizer vornehmen können. Deshalb zum Abschluss eine Änderung, die mit dem Customizer nicht möglich ist.
Das Twenty Nineteen Theme verwendet ausschließlich Systemschriftarten. Wir wollen stattdessen Schriften von Google Fonts einbinden. Dazu ist nicht nur eine Anpassung des Stylesheets nötig, sondern die Schriftarten müssen auch eingebunden werden.
Für unser Beispiel wollen wir für den normalen Text die Schriftart Montserrat verwenden und für Überschriften Merriweather.
Als erstes müssen wir dazu die Schriftarten von Google Fonts laden. Dazu können wir unseren bereits vorhandenen Code in der functions.php erweitern.
<?php
function mein_theme_styles() {
wp_enqueue_style( 'mein-theme-parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'mein-theme-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'mein-theme-parent-style' ) );
wp_enqueue_style( 'mein-theme-google-fonts', 'https://fonts.googleapis.com/css?family=Merriweather|Montserrat' );
}
add_action( 'wp_enqueue_scripts', 'mein_theme_styles' );
?>
Als nächstes müssen wir die Schriftarten noch im CSS zuweisen. Als Fallback, für den Fall dass die Schriftarten nicht geladen werden konnten, übernehmen wir die vorhandenen Definitionen aus dem Twenty Nineteen Theme.
Zusammenfassend nachfolgend der gesamte Inhalt unserer style.css.
/*
Theme Name: Mein Theme
Theme URI: https://wpwissen.com/wordpress-child-theme-erstellen
Description: Das ist ein Child Theme, basierend auf dem Theme Twenty Nineteen. Es dient zur Demonstration für den Artikel "Ein WordPress Child Theme erstellen - so geht's", erschienen auf wpwissen.com.
Author: Peter von wpwissen.com
Author URI: https://wpwissen.com
Template: twentynineteen
Version: 1.0.0
*/
body {
color: #666;
font-family: "Montserrat", "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
}
.site-header {
padding: 2rem 0;
background-color: #eee;
border-bottom: 1px solid #333;
}
.entry .entry-title:before {
display: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Merriweather", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
Nun noch einmal die Änderungen im Vergleich.
Download
Hier kannst Du das komplette Child Theme aus dem Beispiel als ZIP-Datei herunterladen.
Was kann ich mit einem Child Theme sonst noch verändern?
Das Prinzip von Child Themes ist, dass jede Datei im Child Theme Ordner die entsprechende Datei im Parent Theme Ordner überschreibt. Die einzigen beiden Ausnahmen sind die style.css und die functions.php.
WordPress lädt die style.css weder vom Child Theme noch vom Parent Theme automatisch. Die functions.php hingegen wird immer sowohl vom Child Theme als auch vom Parent Theme automatisch geladen.
Alle anderen Dateien können mit dem Child Theme einfach überschrieben werden. Du kannst also eine beliebige Datei aus dem Parent Theme in Dein Child Theme kopieren und wie gewünscht anpassen. Dateien, die im Parent Theme nicht vorhanden sind, können einfach im Child Theme angelegt werden.
Darauf näher einzugehen ist in diesem Rahmen nicht möglich. Bei Interesse empfehle ich als Einstiegslektüre die Beschreibung der WordPress Template Hierarchie.
Was passiert beim Wechsel zu einem Child Theme mit meinen Customizer-Einstellungen?
WordPress speichert Änderungen, die Du im Customizer vornimmst, pro Theme ab. Das muss auch so sein, da unterschiedliche Themes verschiedene Einstellungsmöglichkeiten bieten und außerdem so zwischen Themes gewechselt werden kann ohne vorgenommene Einstellungen zu verlieren.
Ein Child Theme bildet da keine Ausnahme. WordPress speichert die Einstellungen für das Child Theme separat ab. Wenn Du also für Dein Theme bereits Einstellungen im Customizer vorgenommen hast, werden diese nicht übernommen, wenn Du ein Child Theme erstellst, das auf diesem Theme basiert.
Wenn Du bereits umfangreichere Einstellungen vorgenommen hast und diese nicht manuell übernehmen willst, kannst Du das Plugin Customizer Export/Import verwenden.
Fazit
Mit Child Themes bietet WordPress eine tolle und relativ einfache Möglichkeit, ein Theme anzupassen ohne das ursprüngliche Theme zu verändern. Das Parent Theme wird weiterhin mit Updates versorgt.
Vorgenommene Änderungen werden nicht durch Updates wieder überschrieben und das Child Theme profitiert ebenfalls von den Updates des Parent Themes.
Anpassungen an einem Theme, das Du nicht selbst erstellt hast und das mit Updates versorgt wird, solltest Du in jedem Fall immer nur mit einem Child Theme vornehmen und niemals direkt im Theme.
