Bist du mit dem Design deines WordPress-Themes nicht hundertprozentig zufrieden und möchtest individuelle Anpassungen vornehmen, um das Aussehen besser an dein Projekt anzupassen?
Oder genügen dir die Funktionen deines Themes nicht und du planst weitere Features hinzuzufügen?
Dann solltest du ein WordPress Child-Theme nutzen. Vor allem, wenn du Änderungen am Code deines WordPress-Themes vornehmen oder Code ergänzen möchtest.
In diesem Artikel zeige ich dir unter anderem:
- Was ein Child-Theme überhaupt ist und warum du eins verwenden solltest
- Wo du vorgefertigte WordPress Child-Themes für dein Theme findest
- Wie du ein WordPress Child-Theme erstellen kannst
1. Was ist ein Child-Theme?
Ein Child-Theme ist ein Klon deines eigentlichen Themes (auch „Parent-Theme“ genannt).
Die Dateien in deinem Parent-Theme werden dabei von den Dateien in deinem Child-Theme überschrieben oder um diese ergänzt.
Ähnlich wie ein WordPress-Plugin, das eine Erweiterung von WordPress darstellt und keine eigenständige Software ist, kann ein WordPress Child-Theme nicht für sich allein stehen.
Um eins zu nutzen, darf das Parent-Theme entsprechend nicht gelöscht werden, sondern muss weiterhin im Theme-Ordner von WordPress erhalten bleiben.
2. Vorteile eines Child-Themes
Ein Child-Theme zu erstellen, hat drei entscheidende Vorteile:
1. Keine Veränderungen nach Updates
Sagen wir, du möchtest das Aussehen deines WordPress-Themes per CSS anpassen.
Dazu kannst du im WordPress-Backend über Design > Theme Editor über die style.css Code ergänzen.
Hier kannst du zum Beispiel Schriftarten, Farben oder das Erscheinungsbild der gesamten Website bearbeiten. So musst du beispielsweise nicht jede Überschrift einzeln bearbeiten, sondern nimmst globale Änderungen am Design vor:
Dabei gibt es jedoch ein Problem:
Ergänzungen oder Änderungen der style.css und anderen Theme-Dateien, wie functions.php oder header.php werden bei jedem Update deines Themes gelöscht und du musst sie neu einfügen, was sehr viel Zeit in Anspruch nehmen kann.
Hier schafft ein Child-Theme Abhilfe:
Bei einem Theme-Update werden nur die Dateien des Parent-Themes aktualisiert, die des Child-Themes nicht. Das heißt, sämtliche Ergänzungen oder Änderungen bleiben erhalten.
2. Testen von Änderungen ist gefahrlos möglich
Mithilfe eines Child-Themes kannst du alle Anpassungen, die dir in den Sinn kommen, zunächst gefahrlos testen.
Sollte eine Änderung am Code nicht zu dem gewünschten Ergebnis führen oder gar schwerwiegende Fehler auf der Website verursachen, kannst du sofort wieder auf das Parent-Theme umstellen.
3. Einfach zu erstellen
Es klingt nach viel Aufwand, ein Child-Theme zu erstellen.
Ist es aber nicht!
Für viele Themes gibt es sogar vorgefertigte Child-Themes, die du nur herunterladen und installieren musst (eine Liste findest du im übernächsten Abschnitt).
Auch die manuelle Erstellung, die ich dir weiter unten Schritt für Schritt erkläre, ist einfacher, als du denkst.
3. Nachteile eines Child-Themes
Auch wenn ein Child-Theme viele Vorteile mit sich bringt, hat es auch zwei Nachteile, dich ich dir nicht vorenthalten möchte:
- Sollte sich in den Dateien deines Child-Themes eine Sicherheitslücke befinden, wird diese durch spätere Updates nicht geschlossen.
- Neue Funktionen oder Änderungen, die ein Update des Parent-Themes bringt, werden mitunter durch das Child-Theme überschrieben
Abhilfe schafft ein kleines WordPress-Plugin mit dem Namen Child Theme Check.
Es vergleicht die Dateien deines Child-Themes mit denen des Parent-Themes und zeigt Unterschiede auf.
4. Bietet mein Theme ein vorgefertigtes Child-Theme?
Viele Theme-Anbieter (oder auch freie Webentwickler) stellen dir vorgefertigte Child-Themes zur Verfügung, die du kostenlos herunterladen und installieren kannst.
Hier findest du eine Liste mit beliebten WordPress-Themes, für die es vorgefertigte Child-Themes gibt:
| Theme | Link |
|---|---|
| Avada | Download |
| Divi | Download |
| Enfold | Download |
| The7 | Download |
| Twenty Nineteen | Download |
| Stockholm Theme | Download |
| Monstroid2 | Download |
| GeneratePress | Download |
| Impreza Theme | Download |
| BeTheme | Download |
| The X Theme | Download |
| PILE | Download |
| Neve Theme | Download |
| Astra 3.0 | Download |
| Jupiter X | Download |
| Bridge | Download |
| Uncode Theme | Download |
| Storefront von WooThemes | Download |
5. Ein Child-Theme per Plugin anlegen
In der Liste ist dein Theme nicht dabei?
Kein Problem.
Du kannst ein WordPress Child-Theme auch im Handumdrehen selbst erstellen.
Hierfür gibt es zwei unterschiedliche Möglichkeiten:
- Du erstellst ein Child-Theme mittels eines Plugins
- Du erstellst das Child-Theme manuell
Zunächst schauen wir uns an, wie du das Ganze mithilfe des kostenlosen WordPress-Plugins Child Themes Generator machen kannst:
Der große Vorteil davon ist:
Das Plugin ist selbsterklärend und die vielen positiven Bewertungen zeigen, dass es zuverlässig arbeitet. Selbstverständlich, ohne die Performance deiner Website zu verschlechtern.
Nach der Installation findest du den Generator unter Einstellungen > Child-Theme Gen:
Die Anwendungsoberfläche ist simpel:
Du kannst entweder ein neues Child-Theme erstellen oder bereits erstellte Themes wieder löschen.
Um ein neues Child-Theme zu erstellen, musst du lediglich Titel und Beschreibung einfügen (das Feld „Child-Theme-URL“ musst du nicht befüllen) und zum Abschluss auf „Erstelle ein neues Child-Theme“ klicken.
Innerhalb weniger Sekunden wird dieses vom Plugin erstellt und kann unmittelbar im Anschluss durch einen einfachen Klick aktiviert werden.
Ob das Theme tatsächlich aktiviert wurde, kannst du unter Design > Themes überprüfen:
6. Ein Child-Theme manuell anlegen
Ein Child-Theme manuell anzulegen ist etwas aufwendiger, wenn auch keine Raketenwissenschaft.
Die Vorteile daran:
Du sparst es dir, ein weiteres Plugin herunterzuladen und lernst die Dateistruktur von WordPress besser kennen, was dir bei zukünftigen Design-Anpassungen helfen kann. Ich zeige dir nun, wie du das WordPress Child-Theme erstellen kannst.
6.1 Theme-Ordner anlegen
Bevor du mit den praktischen Maßnahmen beginnen kannst, benötigst du zunächst einen FTP-Zugang zu deinem Webspace. Du begibst dich also nicht klassisch in das Backend deiner Website über /wp-admin/, sondern greifst mit einem externen Tool auf deinen Webspace zu.
Das ganze sieht dann ähnlich aus wie der Windows Explorer oder Mac Finder.
Ein kostenloses Tool für dieses Vorhaben ist der FileZilla Client, das ich schon seit über einem Jahrzehnt nutze und dir wärmstens empfehlen kann.
Um erfolgreich eine Verbindung mit deinem Webspace herstellen zu können, benötigst du neben FileZilla folgende Daten, die du in der Regel im Mitgliederbereich deines Webhoster findest:
- Server-Name
- FTP-Benutzername
- FTP-Passwort
- Port
Diese Daten gibst du in der Kopfzeile von FileZilla ein und stellst eine Verbindung zu deinem Webspace her.
Sobald die Verbindung steht, erstellst du einen Ordner, in dem die Dateien deines Child-Themes später abgelegt werden. Diesen Ordner darfst du jedoch nicht irgendwo innerhalb deines Webspace platzieren, sondern unbedingt unter wp-content > themes.
In unserem Fall siehst du hier bereits den Ordner „DiviChildTheme“, den wir mithilfe des Plugins erstellt haben (siehe vorherigen Abschnitt).
Um keine Verwirrung zu stiften, erstellen wir einen zweiten Child-Theme-Ordner mit dem Namen „DiviChildThemeManuell“.
Das erledigst du wie gewohnt mit einem Rechtsklick und erstellst im Anschluss ein neues Verzeichnis:
6.2 style.css erstellen
Im zweiten Schritt erstellst du die erste Datei des Child-Themes, die sogenannte style.css.
Diese Datei ist später dafür verantwortlich, individuelle Design-Anpassungen im Child-Theme abzuspeichern und wird, wie alle anderen Dateien im Ordner, nicht bei Updates des Parent-Themes überschrieben.
Um die style.css zu generieren, erstellst du mittels eines HTML-Editors oder Nur-Text-Editors eine Textdatei, die unbedingt den Namen style.css erhält.
Hier fügst du folgenden Inhalt ein:
/*
Theme Name: Divi Child Manuell
Description: Manuell erstelltes Child Theme
Author: Gradually AI
Author URI: https://www.gradually.ai
Template: divi
Version: 1.0
Text Domain: divi-child-manuell
*/Natürlich solltest du Namen, Beschreibung, Autor etc. entsprechend anpassen.
Nachdem du die Datei erstellt hast, lädst du diese auf deinen Webspace, in den in Schritt 1 erstellten Ordner hoch:
6.3 functions.php erstellen
Damit dein WordPress Child-Theme korrekt funktioniert, müssen wir eine weitere Datei erstellen: die functions.php.
Diese Datei hat die Aufgabe, das Child-Theme mit dem Haupt-Theme zu verknüpfen und WordPress klarzumachen, dass beide Themes miteinander verwandt sind.
Außerdem kannst du deinem Child-Theme hier später Funktionen hinzufügen, um das Parent-Theme zu erweitern oder anzupassen.
Um die Datei zu erstellen, gehst du analog zu Schritt 2 vor. Du erstellst ein Textdokument mit dem Namen functions.php und fügst hier folgenden Code ein:
<?php
/**
* Parent-Theme CSS
*/
function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>Abspeichern, in den Child-Theme-Ordner hochladen und fertig!
Der Ordner deines WordPress Child-Themes sollte jetzt, wenn du alles richtig gemacht hast, folgendermaßen aussehen:
Ist das der Fall, sind bereits 90 % geschafft.
Auf geht’s zum letzten Schritt.
6.4 Screenshot hochladen
Um dein WordPress Child-Theme zu individualisieren und es eindeutig im WordPress-Backend erkennbar zu machen, kannst du einen Screenshot oder ein Bild hinzufügen.
Dieses Bild benennst du „screenshot.png“ und lädst es als die letzte von drei Dateien in deinen Child-Theme-Ordner hoch.
Fertig!
Jetzt solltest du abschließend überprüfen, ob alles funktioniert hat. Gehe hierzu im WordPress Backend in Design > Themes, wo dein gerade erstelltes Child-Theme nun erscheinen soll.
6.5 Einstellungen vom Parent-Theme exportieren (Customizer)
Bevor du das soeben erstellte Child-Theme aktivierst, solltest du zunächst überprüfen, ob du an deinem Parent-Theme bereits individuelle Änderungen am Design vorgenommen hast.
Das Problem ist nämlich:
Diese werden vom Child-Theme nicht automatisch übernommen und würden verloren gehen.
Doch keine Panik.
Es gibt eine einfache und schnelle Möglichkeit, alle Anpassungen des Parent-Themes mit nur wenigen Mausklicks in das Child-Theme zu integrieren.
Wir nutzen hierfür den WordPress Customizer in Kombination mit dem Plugin „Customizer Export/Import“:
Sobald du dieses kleine, aber geniale Plugin installiert hast, wird das Menü deines WordPress Customizers um den Punkt „Export/Import“ erweitert:
Für den Fall, dass du Designanpassungen vorgenommen hast, nutze die Export-Funktion, um deine Customizer-Einstellungen einfach und schnell zu exportieren.
Hast du das getan, ist es an der Zeit, unser neues Child-Theme zu aktivieren:
6.6 Child-Theme aktivieren
Um unser WordPress Child-Theme aktivieren zu können, begeben wir uns noch einmal in die Theme-Übersicht im WordPress Backend.
Hier klicken wir auf das Theme, das wir aktivieren möchten.
Ich empfehle dir unbedingt zunächst zu überprüfen, ob das Theme wirklich reibungslos funktioniert, indem du eine Live-Vorschau ansiehst. Erst nach erfolgreicher Sichtung solltest du das Child-Theme aktivieren.
6.7 Einstellungen vom Parent-Theme importieren
Sofern du in Schritt 5.5 die Customizer-Einstellungen deines Parent-Themes exportiert hast, ist es nun an der Zeit, diese im Child-Theme zu importieren.
Hierfür begibst du dich zurück in den Customizer.
Unter dem bereits bekannten Menüpunkt „Export/Import“ kannst du jetzt die zuvor exportierte Datei hochladen und aktivieren. Auf diese Weise werden sofort alle Designänderungen des Parent-Themes auf das Child-Theme übertragen.
Bei zukünftigen Anpassungen am WordPress Child-Theme bleibt das Parent-Theme ab sofort unberührt.
Im Folgenden zeige ich dir gängige Anpassungen, die du einfach und schnell an deinem WordPress Child-Theme vornehmen kannst:
7. Das Design des Child-Themes anpassen
Nachdem du dein Child-Theme in WordPress aktiviert hast, steht dir die gesamte Welt der CSS-Codes und Style-Anpassungen zur Verfügung.
Das Tolle ist:
Auch wenn du auf diesem Gebiet bislang unerfahren bist, kannst du nicht wirklich etwas kaputt machen, da du ja ein Child-Theme verwendest.
Genial, oder nicht? ?
Einige Beispiele möchte ich dir jetzt vorstellen.
CSS-Code kannst du übrigens direkt in der style.css des Child-Themes einfügen. Diese Datei findest du unter Design > Template-Editor.
Alternativ kannst du selbstverständlich auch den Punkt „Zusätzliches CSS“ im Customizer verwenden.
Beispiel 1: Überschriften ändern
Durch den nachfolgenden Code veränderst du die Haupt-Überschriften aller Seiten (nicht Blogbeiträge) in das damalige knallige Blogmojo-Pink. Außerdem wird die Überschrift zentriert dargestellt:
body.page h1 {
color: #ff4987;
text-align:center;
}Beispiel 2: Blog-Zwischenüberschrift ändern
Auf Gradually AI werden unter Zwischenüberschriften in Blogbeiträgen Trenner dargestellt. Dies könntest du mit folgendem Code umsetzen:
body.single-post h2 {
padding-bottom: 10px;
border-bottom: 3px solid #ff4987;
margin-top: 80px;
}Beispiel 3: Bildschatten hinzufügen
Als weiteres Beispiel möchte ich dir zeigen, wie du automatisch zu allen Bildern, die du innerhalb von Beiträgen verwendest, einen Bildschatten darstellst:
.single-post article img {
-webkit-box-shadow: 4px 3px 9px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 4px 3px 9px 0px rgba(50, 50, 50, 0.75);
box-shadow: 4px 3px 9px 0px rgba(50, 50, 50, 0.75);
}Beispiel 4: Schriftart global ersetzen
Bist du mit der Schriftart eines Themes nicht zufrieden, kannst du diese selbstverständlich im Child-Theme global verändern.
style.css, sondern in der functions.php. Du veränderst also nicht etwas am Styling der Website, sondern fügst dem Theme eine weitere Funktion hinzu. In diesem Fall die Funktion, eine Schriftart über Google Fonts abzurufen.Dafür musst du zunächst in der Fonts-Datenbank nach der gewünschten Schriftart (im Beispiel habe ich mich für Lato entschieden) suchen:
…und im Anschluss folgenden Befehl in der functions.php einfügen:
function load_google_fonts() {
wp_register_style('googleFonts', 'https://fonts.googleapis.com/css2?family=Lato:wght@300');
wp_enqueue_style( 'googleFonts');
}
add_action('wp_print_styles', 'load_google_fonts');Die URL https://fonts.googleapis.com/css2?family=Lato:wght@300 ersetzt du je nach Schriftart und gewünschten Schriftstärken (einfach von Google Fonts kopieren).
Beispiel 5: Globale Änderungen an Header und Footer
Möchtest du Änderungen an Seitenteilen wie Footer oder Header vornehmen, musst du zunächst die hierfür notwendigen Dateien aus dem Ordner deines Parent-Themes kopieren und im Ordner des Child-Themes einfügen.
Jeder Seitenbestandteil verfügt nämlich über eine eigene .php-Datei.
Nachdem du diese Dateien in den Ordner des Child-Themes eingefügt hast, erscheinen diese als Auswahlmöglichkeit im Theme-Editor und du kannst Code-Bestandteile hinzufügen.
8. Probleme mit Child-Themes beheben
Du bist nun in der Lage, ein WordPress Child-Theme manuell oder mithilfe eines Plugins zu erstellen, sowie das Design zu verändern und Funktionen hinzuzufügen.
Was ist jedoch, wenn Probleme bei der Erstellung oder Anpassung des WordPress Child-Themes auftreten?
Da es sich in der Regel immer wieder um die gleichen Fehler handelt, solltest du zunächst die folgende Checkliste Punkt für Punkt abarbeiten.
Ich bin mir sicher, dass 95 % aller Probleme hiermit gelöst werden:
8.1 Ist das Child-Theme überhaupt aktiviert?
Vielleicht ist nach wie vor das Eltern-Theme aktiviert? Dementsprechend werden Änderungen, die du im Theme-Editor am Child-Theme in WordPress vornimmst, logischerweise nicht dargestellt.
8.2 Browser-Cache und Page-Cache gelöscht?
Aktualisiere den Cache deiner Performance- und Caching-Plugins in WordPress und deines Browsers.
Wenn du eine gecachte, also ältere Version deiner Website betrachtest, kannst du Änderungen nicht erkennen.
8.3 Überprüfe, ob du alle Dateien korrekt benannt hast
Dieser Fehler schleicht sich sehr gerne ein. Aus functions.php wird zum Beispiel funcions.php (ist mir selbst beim Erstellen dieser Anleitung passiert).
Kontrolliere auch den Inhalt der style.css, insbesondere den Namen des Parent-Themes. Hier müssen auch Groß- und Kleinschreibung beachtet werden!
