Hallo zusammen!
Heute möchte ich ein Thema aufgreifen, das bei WordPress-Projekten früher oder später fast immer relevant wird: das sogenannte Child Theme.
Gerade wenn man Anpassungen an einer Website vornehmen möchte – egal ob eigenes CSS, kleine PHP-Snippets oder umfangreichere Funktionen – sollte man diese Änderungen niemals direkt im eigentlichen Theme durchführen.
Denn spätestens beim nächsten Theme-Update können sämtliche Anpassungen überschrieben werden.
Genau hier kommt das Child Theme ins Spiel.
In diesem Beitrag zeige ich euch deshalb Schritt für Schritt:
- was ein Child Theme überhaupt ist
- warum es sinnvoll ist
- wie ihr eines erstellt
- welche Dateien benötigt werden
- und wie ihr das Child Theme anschließend in WordPress installiert und aktiviert.
Zusätzlich stelle ich euch am Ende des Beitrags ein paar vorbereitete Child Themes zum Download bereit.
Los geht’s!
#1 Was ist ein WordPress Child Theme?
Ein Child Theme ist vereinfacht gesagt eine Erweiterung eines bestehenden WordPress-Themes.
Das ursprüngliche Theme nennt man dabei „Parent Theme“.
Das Child Theme übernimmt automatisch sämtliche Funktionen, Designs und Einstellungen des Parent Themes und ermöglicht gleichzeitig eigene Anpassungen, ohne das Original-Theme direkt verändern zu müssen.
Man kann sich das Ganze ein wenig wie eine zusätzliche Ebene vorstellen, die über dem eigentlichen Theme liegt.
Das große Ziel dabei:
Eigene Änderungen bleiben auch nach Theme-Updates erhalten.
#2 Warum sollte man ein Child Theme verwenden?
Solltest du vorhaben, bei deiner Website eigene CSS-Anpassungen oder PHP-Funktionen zu ergänzen und dafür nicht extra zusätzliche Plugins verwenden wollen, dann empfehle ich dir als sauberste Lösung ein Child Theme.
Gerade kleinere individuelle Anpassungen landen sonst schnell direkt im eigentlichen Theme. Das funktioniert zwar grundsätzlich, bringt allerdings ein großes Problem mit sich:
Sobald das Parent Theme aktualisiert wird, können diese Änderungen überschrieben werden.
Mit einem Child Theme bleiben eigene Anpassungen hingegen sauber getrennt vom eigentlichen Theme und Updates können weiterhin problemlos durchgeführt werden.
Ich nutze Child Themes in meinen Projekten unter anderem für:
- eigene CSS Anpassungen
- PHP Snippets
- Custom Post Types
- WooCommerce Anpassungen
- Tracking Scripts
- kleinere individuelle Funktionen
Gerade bei Websites die langfristig betreut oder erweitert werden sollen, ist ein Child Theme daher meiner Meinung nach die sauberste Lösung.
#3 Child Theme erstellen
Grundsätzlich gibt es zwei Möglichkeiten ein Child Theme zu erstellen:
Entscheidet ihr euch für Variante 1 dann ist die Ornderstruktur für euch wichtig. Mit Version 2 könnt ihr die Dateien in einem Ordner lokal auf eurem Computer anlegen und anschließend als ZIP-Datei komprimieren und hochladen.
(Erklärung bei Punkt #5 Child Theme installieren)
Ordnerstruktur
Verbindet euch per FTP mit eurem Server und navigiert zum „themes“ Ordner.
Der Pfad sollte so aussehen:
/wp-content/themes/
Erstellt dort anschließend einen neuen Ordner für euer Child Theme. In meinem Beispiel arbeite ich mit dem Theme Astra und erstelle den Ordner „astra-child“. Wichtig ist hierbei, dass der Orndername keine Leerzeichen enthält.
Der finale Pfad sieht dann so aus:
/wp-content/themes/astra-child/
Die style.css Datei
Die wichtigste Datei ist die style.css.
Dort werden die grundlegenden Informationen des Child Themes definiert.
/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/
Besonders wichtig ist hier die Zeile:
Template: astra
Diese muss exakt dem Ordnernamen des Parent Themes entsprechen.
Bei Hello Elementor wäre das beispielsweise:
Template: hello-elementor
Zusätzlich können in der style.css Datei noch weitere Informationen hinterlegt werden.
Diese sind zwar nicht zwingend notwendig, sorgen aber für eine sauberere Struktur und mehr Informationen im WordPress Backend.
Dazu gehören unter anderem:
- Author → Name des Entwicklers oder der Agentur
- Author URI → Website des Entwicklers
- Description → kurze Beschreibung des Child Themes
- Version → aktuelle Versionsnummer
- Text Domain → wichtig für Übersetzungen und Mehrsprachigkeit
In meinem Beispiel würde die style.css Datei dann beispielsweise so aussehen:
/*
Theme Name: Astra Child
Template: astra
Author: WordPress Agentur Lumelab
Author URI: https://www.lumelab.at
Description: Neutrales Child Theme zur individuellen Erweiterung des Astra Themes.
Version: 1.0
Text Domain: astra-child
*/
Die functions.php Datei
Als nächstes benötigt ihr eine functions.php Datei.
Diese Datei wird später für eigene PHP-Funktionen, Snippets oder Erweiterungen verwendet. Zusätzlich sorgen wir hier dafür, dass die CSS-Datei des Child Themes korrekt geladen wird.
Da ich in diesem Beispiel mit dem Astra Theme arbeite, sieht die functions.php so aus:
<?php
define( 'ASTRA_CHILD_THEME_VERSION', '1.0' );
function lumelab_astra_child_enqueue_styles() {
wp_enqueue_style(
'astra-child-theme-css',
get_stylesheet_directory_uri() . '/style.css',
array( 'astra-theme-css' ),
ASTRA_CHILD_THEME_VERSION,
'all'
);
}
add_action( 'wp_enqueue_scripts', 'lumelab_astra_child_enqueue_styles', 15 );
In diesem Beispiel wird die style.css des Child Themes geladen. Die Angabe astra-theme-css sorgt dafür, dass die Child-Styles nach den Styles des Astra Parent Themes geladen werden.
Wichtig: Dieser Teil kann je nach Parent Theme unterschiedlich sein. Wenn ihr also nicht Astra verwendet, müsst ihr das Child Theme entsprechend an euer Parent Theme anpassen.
Für Hello Elementor sieht die functions.php daher etwas anders aus.
#4 Vorschau-Bild hinzufügen
Optional könnt ihr zusätzlich eine Bilddatei mit dem Namen: „screenshot.png“ oder „screenshot.jpg“ in den Child Theme Ordner legen. Diese Datei dient als Vorschau-Bild im WordPress Backend.
WordPress verwendet hier standardmäßig ein Seitenverhältnis von 4:3.
Ich nutze dafür meist eine Größe von: 1200 × 900 Pixel
Dadurch wirkt das Child Theme im Backend deutlich sauberer und professioneller.
#5 Child Theme installieren
Sobald alle Dateien erstellt wurden, kann das Child Theme verwendet werden. Je nachdem welche Methode ihr gewählt habt, gibt es nun zwei Möglichkeiten:
Variante 1 – direkt per FTP
Wenn ihr die Dateien direkt am Server per FTP angelegt habt, müsst ihr nichts mehr hochladen. Das Child Theme befindet sich bereits im richtigen Ordner und sollte nun im WordPress Backend unter: Design > Themes sichtbar sein.
Variante 2 – als ZIP-Datei hochladen
Habt ihr das Child Theme lokal auf eurem Computer erstellt, könnt ihr den gesamten Ordner nun als ZIP-Datei komprimieren.
Wichtig ist hierbei, dass wirklich der komplette Child Theme Ordner komprimiert wird und sich die Dateien nicht lose innerhalb der ZIP-Datei befinden.
Anschließend könnt ihr die ZIP-Datei direkt im WordPress Backend hochladen. Den Upload findet ihr unter: Design > Themes > Theme hinzufügen. Dort einfach die ZIP-Datei auswählen und installieren.
#6 Child Theme aktivieren
Nach der Installation erscheint das Child Theme ganz normal in der WordPress Theme-Übersicht. Dort könnt ihr es anschließend aktivieren.
WordPress verwendet ab diesem Zeitpunkt weiterhin das Parent Theme als Grundlage. Eigene Anpassungen und Erweiterungen laufen jedoch über das Child Theme.
Das eigentliche Parent Theme bleibt dadurch sauber getrennt und kann weiterhin problemlos aktualisiert werden.
#7 Änderungen testen
Nach der Aktivierung empfiehlt es sich, eine kleine Teständerung vorzunehmen.
Fügt zum Beispiel diesen Code in die style.css Datei hinzu:
body {
background: #FFEA00;
}
Färbt sich euer Seitenhintergrund in ein knalliges Gelb dann wisst ihr, dass euer Child Theme korrekt funktioniert und sauber eingebunden wurde.
#8 vorbereitete Child Themes als Download
Damit ihr nicht jedes Child Theme komplett selbst erstellen müsst, habe ich euch zusätzlich ein paar vorbereitete Varianten zusammengestellt.
Die Downloads enthalten lediglich die notwendigen Dateien für ein Child Theme und keine vollständigen WordPress Themes.
Hier könnt ihr folgende Daten herunterladen:
> Blanko Child Theme
> Astra Child Theme
> Hello Elementor Child Theme
Natürlich könnt ihr die Inhalte anschließend individuell an eure Projekte anpassen und erweitern.
Hinweis zur Blanko Vorlage
Bei der Blanko Vorlage müsst ihr vor der Verwendung zumindest folgende Angaben an euer Parent Theme anpassen:
In der style.css Datei:
Template: parent-theme-ordnername
Hier muss der exakte Ordnername eures Parent Themes eingetragen werden.
In der functions.php Datei:
Je nach verwendetem Parent Theme kann es notwendig sein, den sogenannten Style-Handle anzupassen, damit die CSS-Dateien korrekt geladen werden.
Dieser befindet sich in folgendem Bereich:
array( 'parent-style' )
Je nach Theme kann dieser Wert unterschiedlich heißen.
Als Beispiele hier die beiden Varianten der vorbereiteten Astra- und Hello Elementor Themes:
array( 'astra-theme-css' )
array( 'hello-elementor-theme-style' )
#9 Fazit
Ein Child Theme gehört für mich mittlerweile zu den wichtigsten Grundlagen bei WordPress-Projekten.
Es sorgt für eine saubere Struktur, schützt eigene Anpassungen vor Theme-Updates und macht individuelle Erweiterungen deutlich übersichtlicher.
Gerade wenn man regelmäßig mit CSS, PHP-Snippets oder eigenen Funktionen arbeitet, sollte man möglichst früh auf ein Child Theme setzen.
Ich hoffe, ich konnte euch mit diesem Beitrag einen verständlichen Überblick über das Thema geben und etwas Klarheit schaffen.
– Stefan