Was ist das Child Theme und wie wende ich es an
Das Child Theme ist eine nützliche Ergänzung für dein Haupttheme bei WordPress. Dabei ist das WordPress Child Theme eine Kopie des Original-Themes, bei dem gesonderte Funktionen oder Dateien hinzugefügt werden können, ohne das Haupttheme zu beeinflussen.
Alle Details rund um das Child Theme und wie du es verwendest, kannst du jetzt hier nachlesen.
Inhaltsverzeichnis
1. Was ist ein WordPress Child Theme?
Das Child Theme ist eine Kopie deines aktuelle installierten WordPress Themes. Durch das Erstellen eines Child Themes – also einer Kopie – kannst du dein Theme so spezifisch anpassen, ohne dass die Änderungen mit dem nächsten Update verloren gehen.
Im Grunde bietet dir das WordPress Child Theme Möglichkeit, verschiedene Einstellungen und Anpassungen gefahrenlos zu testen.
Beispiel:
Wenn du das Design deiner Seite anpassen willst, kannst du im Child-Theme eigene CSS- oder PHP-Dateien bearbeiten. Änderst du stattdessen direkt die Dateien deines aktiven Themes, gehen diese Anpassungen beim nächsten Update verloren, weil die Originaldateien überschrieben werden. Mit dem Child-Theme sicherst du deine Änderungen dauerhaft und stellst sicher, dass sie auch nach Theme-Aktualisierungen bestehen bleiben.
Bei der Aktivierung des Child-Themes wirst du feststellen, dass du damit hauptsächlich CSS- und PHP-Dateien bearbeiten kannst. Dabei kannst du präzise auswählen, welche Funktionen du über das Child-Theme genau vornehmen möchtest.
Dein aktuelles Live-Theme wird in diesem Zusammenhang auch als Parent-Theme bezeichnet.
Die Grundstruktur des Child Themes
Das Child Theme erbt quasi die Funktionalität und das Design des ursprünglichen Themes – also in dem Zusammenhang das Parent Themes. Es wird verwendet, um Anpassungen vorzunehmen, ohne das Original-Theme direkt zu verändern. So bleiben Änderungen beim Update des Parent Themes erhalten.
Ein Child Theme hat im Prinzip denselben Aufbau wie ein Parent Theme, allerdings mit dem Ziel, das Parent Theme zu erweitern oder zu überschreiben, ohne es direkt zu verändern. Hier sind einige wichtige Punkte dazu:
Die folgenden Dateien findest du standardmäßig in deinem Parent als auch in deinem Child Theme:
Ordnerstruktur:
Ein Child Theme kann genauso wie das Original Parent Theme verschiedene Dateien und Ordner enthalten, wie z. B.header.php,footer.php,functions.php,style.css. Der Hauptunterschied liegt darin, dass beim Child Theme neue Dateien hinzugefügt oder bestehende Daten langfristig überschrieben werden.Templates und Template-Tags:
Du kannst die gleichen Template-Dateien wie im Parent Theme verwenden. Wenn du ein Template im Child Theme erstellst, wird es die Vorlage des Parent Themes überschreiben, wenn sie den gleichen Dateinamen trägt.Stylesheets:
Das Child Theme lädt das Stylesheet des Parent Themes und kann zusätzlich eigene Styles enthalten. Die CSS-Regeln des Child Themes überschreiben dann die des Parent Themes, wenn sie spezifischer sind.
Es gibt allerdings auch 🚫 Unterschiede, die aber meist erst nach dem Beginn der Umarbeitung im Child Theme eintreten:
-
Das Child Theme besitzt zwei notwendige Dateien:
style.css(mit den Basisinformationen und einem Import des Parent Stylesheets)functions.php(zum Laden des Parent Stylesheets und für weitere Funktionen)
Das Child Theme enthält keine vollständige Kopie des Parent Themes. Stattdessen wird nur der Inhalt benötigt, den du anpassen oder erweitern möchtest. Dazu zählen zum Beispiel neue Funktionen, neue Templates oder bestehende Inhalte, die du mit weiteren Optionen erweitern möchtest. Es reicht aus, diese im Child Theme zu hinterlegen.
Wie genau funktioniert das Child Theme?
Das Parent Theme und das Child Theme arbeiten im Grunde parallel zueinander.
Das Child Theme ist eine Kopie und damit sozusagen eine Erweiterung des Parent Themes, wodurch dieses nahezu dieselben Funktionen, Design und Code besitzen
Wenn ein Child Theme aktiviert wird, lädt WordPress zunächst das Parent Theme und anschließend das Child Theme. Das bedeutet, dass alle Funktionen, Stile und Templates des Parent Themes verfügbar sind. Aber nur, sofern sie im Child Theme nicht überschrieben werden. Denn das Child Theme kann bestimmte Dateien des Parent Themes überschreiben, wie zum Beispiel style.css oder Template-Dateien wiesingle.php oder page.php. Wenn eine solche Datei im WordPress Child Theme verwendet wird, wird diese auf der Live Webseite anstelle der vorherigen Datei des Parent Themes verwendet.
In den allermeisten Fällen ersetzt das Child Theme das Parent Theme aber nicht vollständig. Es gilt eher als Ergänzung und wird individuell modifiziert. So kannst du Anpassungen vornehmen, ohne das ursprüngliche Theme tatsächlich zu verändern.
Mit der Aktivierung des Child Themes erkennt WordPress automatisch die Verwendung und nutzt dieses entsprechend. Konkret bedeutet das, wenn das WordPress Child Theme bestimmte Dateien nicht enthält, greift WordPress auf das Parent Theme zurück. Verwendet das Child Theme neue Dateien, werden diese von WordPress verwendet.
Beispiel eines Child Theme Aufbaus
Wir nehmen einmal an, dass die Code Struktur deines Original Parent Themes so aussieht:
/parent-theme/
├── functions.php
├── style.css
├── header.php
├── footer.php
├── page.php
Diese Struktur muss dein Child Theme nicht genau übernehmen.Das Child Theme könnte aber folgende Dateien enthalten:
/child-theme/
├── functions.php
├── style.css
├── screenshot.png (optional)
└── header.php (optional, wenn du den Header ändern möchtest)
Der Aufbau des Child Themes ist also fast identisch mit dem des Parent Themes, aber das Child Theme enthält nur die Dateien und Anpassungen, die du benötigst. Du überschreibst nur, was du ändern möchtest, und alles andere bleibt vom Parent Theme erhalten. Das sorgt dafür, dass deine Anpassungen auch nach einem Update des Parent Themes erhalten bleiben.
Das Child Theme und das Parent Theme arbeiten demnach gemeinsam und parallel, um das fertige Endergebnis auf deiner Webseite so zu erreichen, wie du es dir vorstellst.
Für welche Anpassungen benötige ich ein Child Theme?
Das Child Theme kann für verschiedene Anpassungen verwendet werden. Zu den wichtigsten Funktionen gehören deshalb:
CSS-Änderungen
Das Aussehen deiner Website kannst du im CSS (Cascading Style Sheets) verändern. Durch die Anpassung im WordPress Child Theme bleiben deine Änderungen auch nach einem Theme-Update erhalten.
PHP-Funktionsänderungen
Auch die Funktionen in den PHP-Dateien des Themes kannst du über das Child Theme ändern oder hinzufügen. Änderungen an Dateien wie functions.php oder anderen Template-Dateien können sonst bei einem Update überschrieben werden.
Template-Anpassungen
Insbesondere deine Arbeiten an den Template-Dateien, wie zum Beispiel header.php, footer.php oder single.php solltest du am besten über das Child-Theme anpassen. So kannst du eigene Versionen dieser Dateien im Child Theme erstellen, die auch dauerhaft in deinem WordPress hinterlegt sind.
Hinzufügen neuer Funktionen
Nicht immer hat dein WordPress Theme alle Funktionen, die du benötigst. Oft kannst du einige deiner Funktionen über den WordPress Theme Customizer überarbeiten. Möchtest du über diese Möglichkeiten hinaus Einstellungen im CSS-Code oder in den PHP-Dateien verändern, lohnt es sich, diese Einstellungen über das Child Theme zu bearbeiten. Um diese sicher hinzuzufügen, kannst du das Child Theme verwenden.
Sicherheit und Stabilität
Die Verwendung eines WordPress Child Themes stellt sicher, dass deine Anpassungen die Kernfunktionen deines aktuellen Themes nicht stören und umgekehrt. Das dient vor allem der Stabilität und Sicherheit deiner Website.
Vor- und Nachteile des WordPress Child Themes
✅ Vorteile eines WordPress Child Themes
Sicherheit bei Updates
Das Parent Theme kann aktualisiert werden, ohne individuelle Anpassungen zu verlieren. Dabei bleiben die Änderungen am Child Theme allerdings bestehen, selbst wenn das Parent Theme ein Update erhält.
Einfache Anpassungen
Über das Child Theme hast du die Möglichkeit, Design und Funktionalität des Parent Themes anzupassen, ohne den Code direkt verändern zu müssen. Das macht Anpassungen einfacher und vor allem auch übersichtlicher.
Weniger Risiken bei Änderungen
Mit der Verwendung des Child Themes sinkt natürlich das Risiko bei Veränderungen nachhaltige Fehler zu machen. Denn Fehler im Child Theme sind unter anderem auch leichter zu identifizieren, zu beheben und betreffen nicht das Parent Theme.
Lernen und Experimentieren
Für Entwickler ist das WordPress Child Theme eine tolle Option und ein praktisches Werkzeug, um sich an einem Theme auszuprobieren, zu experimentieren und um zu verstehen, wie WordPress Themes funktionieren. Gerade für Entwickler, die noch lernen, bietet das Child Theme viel Potenzial, ohne Konsequenzen neue Funktionen zu testen.
Kompatibilität mit Plugins
Da das Child Theme eine direkte Kopie des Parent Themes ist, bleibt auch die Kompatibilität mit den bereits verwendeten Plugins bestehen.
❌ Nachteile eines Child Themes für WordPress
Abhängigkeit vom Parent Theme
Das Child Theme ist natürlich als Kopie vom Parent Theme abhängig. Sollte das Parent Theme nicht mehr aktualisiert werden oder mit den WordPress Core Updates nicht mehr kompatibel sein, gilt dies natürlich auch für das Child Theme.
Lernkurve
Vor- und Nachteil des Child Themes ist die Komplexität der Bearbeitung. Für Anfänger kann die Erstellung und Verwaltung eines WordPress Child Themes eine Herausforderung darstellen, aber auch sehr nützlich zum Lernen sein. Trotzdem benötigst du zum Verständnis, wie Child und Parent Themes interagieren, ein gewisses Maß an WordPress-Kenntnissen.
Zusätzlicher Wartungsaufwand
Obwohl ein Child Theme die Wartung durch die Trennung von Anpassungen vereinfacht, bedeutet das gleichzeitig auch die Bearbeitung, Verwaltung und Aktualisierung von zwei Themes.
Performance
In einigen Fällen kann die Verwendung eines Child Themes die Ladezeiten deiner Webseite etwas verschlechtern, da WordPress sowohl das Parent Theme als auch das Child Theme mit seinen Anpassungen im Hintergrund laden muss.
Begrenzungen durch das Parent Theme
Nicht vorhandene Funktionen im Parent Theme müssen im Child Theme manuell hinzugefügt werden. Gibt es im Parent Theme also auch Updates in der Functions.php musst du diese leider ebenfalls von Hand ins WordPress Child Theme übertragen, da diese im Update nicht übernommen werden.
Übertragbarkeit
Ein Child Theme ist auf das jeweilige Parent Theme konfiguriert, da dieses ja eine Kopie darstellt. Es ist demnach nicht ganz so leicht, Anpassungen im WordPress Child Theme auf ein anderes Parent Theme zu übertragen. Hier hast du lediglich die Möglichkeit, vorhandene Code-Abschnitte wiederzuverwenden.
- PageSpeed Score
- Core Web Vitals
- Parameter with explanation
After submitting, you will receive the result directly by e-mail.
By submitting this form, you agree to our privacy policy.
2. Das WordPress Child Theme erstellen & anwenden
Ein Child Theme kannst du auf zwei Wegen erstellen: manuell oder über ein Plugin. Da die manuelle Erstellung eines Child-Themes aber etwas komplexer ist, erklären wir hier die Erstellung anhand eines WordPress Plugins.
👉 Die genaue Anleitung für eine manuelle Child Theme Erstellung findest du hier bei WordPress.
WordPress Child Theme mit einem Plugin erstellen
Begib dich daher zunächst in dein WordPress Dashboard in den Bereich Plugin und klicke ganz oben auf Neues Plugin hinzufügen. Darüber gelangst du ins WordPress Plugin Verzeichnis. Suche hier nach dem Plugin Child Theme Configurator – dieses gehört zu den empfohlenen WordPress Child Theme Plugins.
Anschließend kannst du das Plugin wie gewohnt installieren und aktivieren.
Das beliebte Child Theme Configurator Plugin ist von der Firma Lilaea Media und hat bei WordPress über 300.000 aktive Installationen. Aktuell wurde es zwar noch nicht mit der aktuellen WordPress 6.4 Version getestet, trotzdem wird es regelmäßig aktualisiert und weiterentwickelt. Das Plugin lässt sich einfach anwenden und zielt rein auf die Erstellung eines WordPress Child Themes ab.
Vorteile
- einfache Erstellung eines Child Themes
- Fehler-Analyse deiner Einstellungen
- Anpassung der Schriftarten
- Kopiere Widgets, Menüs und Einstellungen in dein Child Theme
- Verändere Farben, Hintergründe, Schriften uvm. ohne andere Elemente zu beeinflussen
Preis: kostenlos bei WordPress
Das Child Theme bei WordPress einrichten und verwenden
Nachdem du das Plugin installiert hast, findest du das Plugin in deinem WordPress Dashboard unter Werkzeuge/ Tools. Hierüber gelangst du nun zu den Einstellungen, über die du das Child Theme erstellen kannst. So gehst du vor:
- Klicke auf Neues Child Theme erstellen, wenn der Punkt noch nicht ausgewählt ist
- Entscheide dich anschließend für ein Parent Theme, welches du kopieren möchtest
- Klicke anschließend auf Untersuchen
- Als nächstes scrollst du etwas nach unten, um den neuen Ordner deines Child Themes zu benennen
- Wähle nun aus, wo die neuen Stile gespeichert werden sollen: direkt im Child Theme oder in einer separaten Formatvorlage
- Im letzten Schritt musst du dich für ein Formatvorlagen Handling entscheiden.
- Anschließend klickst du auf Neues Child Theme konfigurieren.
- Zuletzt kannst du das Child Theme unter Designs aktivieren
Überprüfe, ob das WordPress Child Theme richtig geladen hat. In deinem WordPress Dashboard solltest du das Child Theme im Bereich deiner Themes finden. Dieses heißt dort dann beispielsweise Hello Elementor Child – je nachdem, auf welchem Parent Theme dein Child Theme basiert.
Ein bestehendes Child-Theme anpassen und bearbeiten
3. Praktische Tipps & Anwendungsbeispiele für das Child Theme
Code-Beispiele
Hinterlege eine saubere Struktur für deine wichtigen Dateien
Im Child Theme sollten mindestens diese Dateien liegen:
style.cssenthält Theme-Infos und eigene Styles.functions.phpenthält deine PHP-Anpassungen.
/mein-child-theme/
style.css
functions.php
Beispiel für style.css:
Dabei muss „Template“ exakt dem Ordnernamen des Parent Themes entsprechen.
/*
Theme Name: Mein Child Theme
Template: astra
Version: 1.0
*/
CSS richtig im Child Theme einbinden
Damit die Styles des Parent Themes geladen werden, ergänze in functions.php:
<?php add_action('wp_enqueue_scripts', 'mein_child_theme_styles');
function mein_child_theme_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
?>
Templates überschreiben
Möchtest du eine Vorlage ändern, kopiere sie aus dem Parent Theme ins Child Theme und bearbeite sie dort. WordPress lädt automatisch deine Version.
Beispiel:
Original:
wp-content/themes/astra/single.phpIm Child Theme kopieren nach:
wp-content/themes/mein-child-theme/single.php
Eigenes JavaScript einbinden
In functions.php kannst du dein Skript ergänzen:
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/meinscript.js', array('jquery'), '1.0', true);
Lege dann js/meinscript.js im Child Theme an.
Funktionen gezielt erweitern oder entfernen
Beispiel: Parent Theme hat ein Script, das du nicht willst:
function mein_child_dequeue_scripts() {
wp_dequeue_script('parent-script-handle');
}
add_action('wp_enqueue_scripts', 'mein_child_dequeue_scripts', 20);
Allgemeine Beispiele, wofür du ein Child Theme nutzen kannst
Design-Anpassungen:
Farben und Fonts ändern
Abstand oder Layout individualisieren
Templates umbauen:
Header oder Footer abändern
Beitragslayouts verändern (z.B. Featured Image oberhalb oder unterhalb des Titels)
Funktionen hinzufügen:
Eigene Shortcodes
Zusätzliche Widgets
Custom Post Type
WooCommerce individualisieren:
Templates in
woocommerce/überschreibenButtons umbenennen oder entfernen
4. So einfach legst du ein WordPress Child Theme an
Ein Child Theme zu erstellen bzw. zu verwenden kann verschiedene Vorteile mit sich bringen. Insbesondere das ungestörte und das gefahrlose Arbeiten am Design und den Funktionen kann dein Theme deutlich verbessern. Sollte etwas schiefgehen hast du immer noch die Möglichkeit zu deinem Parent Theme zurückzukehren, ohne dass sich etwas verändert hat. So bleibt dein Theme immer sicher und du profitierst von den Theme-Updates und individuellen Anpassungen.
Wofür verwendest du dein WordPress Child Theme und was ist dein größter Benefit davon? ☺️
Liebe Johanna,
Child-Theme klingt nach einem guten Tool. Super erläutert- danke dir. 🙂
Liebe Grüße
Nick
Liebe Johanna,
herzlichen Dank für die super Erklärung!
Viele Grüße
Timo