In diesem Artikel erfährst du alles, was es zu Child-Themes in WordPress zu wissen gibt. Wenn du den Artikel gelesen hast, bist du mit dem Wissen ausgestattet, das du brauchst, um mit Child-Themes zu arbeiten. Konkret erfährst du im Artikel folgende Dinge.

1. Was ist ein Parent-Theme?
2. Was ist ein Child-Theme?
3. Wann benötige ich ein Child-Theme?
4. Wann brauche ich kein Child-Theme?
5. Wie erstellt man ein Child-Theme?
6. Wie installiert man ein Child-Theme?
7. Wie passt man ein Child-Theme an?
8. Weitere Möglichkeiten, ein Child-Theme in WordPress zu erstellen
9. Was kann man machen, wenn das WordPress Child-Theme nicht funktioniert?

Um zu verstehen, was Child-Themes sind, ist es erstmal sinnvoll kurz zu erklären, was ein Parent-Theme ist.

---

Was ist ein Parent-Theme?

Ein Parent-Theme ist ein vollständiges WordPress-Theme. Es enthält alle nötigen Dateien, die für das Funktionieren des Themes nötig sind. (s. WordPress Dokumentation)

---

Was ist ein Child-Theme?

Ein Child-Theme ist quasi ein “Unter-Theme”, das Funktion und Aussehen von dem Parent-Theme “erbt”. Es funktioniert wie jedes andere Theme auch, aber benötigt das Parent-Theme zum Funktionieren. (s. WordPress Dokumentation)

---

Wann benötige ich ein Child-Theme?

Wenn du ein Child-Theme erstellst, kannst du Änderungen an dem Parent-Theme vornehmen, ohne diese Modifizierungen durch ein Update zu verlieren.

Ohne ein Child-Theme müsstest du Änderungen direkt am Parent-Theme vornehmen. Nach jedem Update des Themes könnten deine Änderungen dann überschrieben werden. Außerdem kann ein Parent-Theme - gerade für Anfänger - sehr kompliziert wirken.

Tipp: Schau dir meinen Beitrag zu der functions.php-Datei an. Dann wirst du das alles noch besser verstehen.

Die Vorteile eines Child-Themes sind also klar:

• Die Änderungen sind klar vom Parent-Theme getrennt
• Die Änderungen bleiben auch nach Updates bestehen
• Du kannst in einer sichereren Umgebung lernen, wie Themes funktionieren, ohne irgendwelche Dinge kaputt zu machen

---

Wann brauche ich kein Child-Theme?

Es gibt Situationen, in denen du kein Child-Theme brauchst. Der Grund ist meistens einer der zwei folgenden:

1. Du möchtest theme-unabhängig benutzerdefinierte Funktionen einbauen
2. Du möchtest nur kleine Style-Änderungen an deinem Theme vornehmen

Wenn du benutzerdefinierte Funktionen einbauen möchtest, die unabhängig von deinem Theme sind, kannst du entweder ein eigenes Plugin erstellen oder Custom Code über ein Plugin wie Code Snippets hinzufügen.

Möchtest du keine Style-Änderungen an einem Theme vornehmen, geht das ganz einfach über Plugins oder den WordPress Customizer.

---

Wie erstellt man ein Child-Theme?

Die Erstellung eines Child-Themes ist recht einfach. Es ist egal, welches Theme du benutzt: Du kannst diesen Schritten mit jedem WordPress Theme folgen.

Für ein funktionierendes Child-Theme brauchst du erstmal nur 2 Dateien:

1. functions.php
2. style.css

Du wirst jetzt gleich lernen, wie man ein Child-Theme erstellt. Man kann den Prozess mit verschiedenen Tools automatisieren (ich zeige dir auch später, wie genau), aber für den Anfang lege ich dir ans Herz, die manuellen Schritte zu lesen, und durchzuführen, damit du genau verstehst, wie ein Child-Theme funktioniert.

Schritt 1: Erstelle den Ordner für dein Child-Theme

Zuerst musst du einen Ordner für dein Child-Theme erstellen, in dem alle wichtigen Dateien gespeichert werden.

Vorerst ist es kein Problem, diesen Ordner lokal auf deinem Computer zu lassen. Ich zeige dir später, wie du dein Child-Theme auf deiner WordPress-Seite installieren kannst.

Um den Namen des Ordners zu wählen, solltest du den Namen des Parent-Theme-Ordners suchen. Hänge an den Namen diesen Themes einfach “-child”. Ein möglicher Child-Theme-Ordner könnte also “hello-elementor-child” heißen.

Tipp: Du findest die Themes deiner WordPress-Datei in wp-content → themes. Von hier kannst du dann den Namen des Ordners deines Parent-Themes kopieren.

Schritt 2: Erstelle die CSS-Datei für dein Child-Theme

Als nächstes erstellst du eine “style.css”-Datei in deinem Child-Theme Ordner. In dieser Datei befinden sich dann das Styling (das CSS) deines Child-Themes.

Diese Datei ist super wichtig! Sie legt fest, welches Parent-Theme dein Child-Theme als Referenz verwendet.

Du musst der style.css Datei sieht ungefähr so aus:

/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twentyfifteenchild
*/

Du kannst diese Elemente einfach kopieren und ganz oben in deine style.css-Datei einfügen. Ändere die Daten nach den Doppelpunkten dann einfach so, dass sie zu deinem Child-Theme passen.

Wichtig: Nur 2 der gegebenen Elemente werden von WordPress benötigt. Wenn du diese zwei Informationen nicht hast, funktioniert es nicht.

• Theme Name: Dieser Name muss einzigartig sein
• Template: Das ist der Name des Ordners, in dem das Parent-Theme liegt. Wie oben erwähnt, findest du die Thame-Ordner in wp-content → themes.

Hier eine Erklärung der anderen, optionalen Elemente:

• Theme URI: Ein Link zur Website und/oder Dokumentation deines Themes
• Description: Eine kurze Beschreibung deines Themes
• Author: Der Name des Autors des Themes
• Author URI: Die Website des Autors des Themes
• Version: Die Versionsnummer deines Themes
• License: Lass hier einfach den Standard
• License URI: Lass hier einfach den Standard
• Text Domain: Nimm hier einfach den Namen des Parent-Themes und hänge “child” hinten dran. Die “Text-Domain” wird für Internationalisierung, also für die Übersetzung deines Themes genutzt.

Diese optionalen Informationen verändern die Darstellung deines Themes im Theme Dashboard (Design → Themes). Das ist besonders dann interessant, wenn du planst, dein Child-Theme zu veröffentlichen.

Ich empfehle dir auch, die Versions-Nummer hinzuzufügen, weil das spätere Abläufe einfacher macht.

Wenn du das Theme jetzt mit Custom-CSS ausstatten willst, also das Aussehen des Themes anpassen möchtest, kannst du das unter diesem Bereich tun.

Schritt 3: Die Stylesheets des Parent- und Child-Themes “einreihen”

Jetzt ist es an der Zeit, die Stylesheets “einzureihen”. Das hat zwei Gründe:

1. Das Child-Theme übernimmt das Styling deines Parent-Themes. Wenn du das Child-Theme jetzt also aktivierst, sieht deine Website genau so aus, wie vorher!
2. Das Child-Theme Stylesheet wird vor dem Stylesheet des Parent-Themes geladen. So wird sichergestellt, dass Änderungen, die du am Style des Themes vornimmst, richtig angezeigt und übernommen werden.

Um die Stylesheets einzureihen, musst du den folgenden Code in die functions.php-Datei deines Child-Themes einfügen.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_include_style' );

function my_theme_include_style() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Tipp: Wenn du nicht weißt, was eine functions.php-Datei ist, lies dir doch meinen Post dazu durch! Dieser Prozess kann von Parent-Theme zu Parent-Theme etwas unterschiedlich sein. Wenn du also Probleme bei diesem Schritt hast, schaue auf der Website des Parent-Themes nach oder kontaktiere den Entwickler.

Schritt 4: Überprüfung und Erstellung der Zip-Datei

Super - du hast ein Child-Theme erstellt! Die zwei zentralen Dateien “style.css” und “functions.php” sollten jetzt in dem Ordner des Child-Themes liegen.

Um das Child-Theme jetzt über das WordPress-Admin-Dashboard zu installieren musst du den Ordern zu einer Zip-Datei komprimieren. Normalerweise kannst du das auf Windows und macOS mit einem Rechtsklick auf den Ordner tun. In dem Menü, das sich öffnet, gibt es wahrscheinlich eine “Komprimieren”- oder “Zu Zip komprimieren”-Option.

---

Wie installiert man ein Child-Theme?

Jetzt hast du eine Zip-Datei, die dein Child-Theme enthält. Gehe nun in dein WordPress-Admin-Dashboard und navigiere zu Design → Themes → Theme hochladen. Lade deine Zip-Datei hoch und klicke auf “Installieren”.

Sobald das Theme installiert ist, bekommst du eine kurze Nachricht von WordPress, in der du darauf hingewiesen wirst, dass das Parent-Theme benötigt wird. Normalerweise wirst du auch darüber informiert, ob das Parent-Theme aktuell installiert ist. Wenn das alles gut aussiehst, kannst du auf “Aktivieren” klicken.

Mega! Dein Child-Theme läuft. Du solltest es jetzt im Themes-Bereich deiner Website sehen.

Tipp: Wenn du den Screenshot deines Child-Themes anpassen möchtest, der im Themes-Bereich angezeigt wird lade eine “screenshot.png” oder “screenshot.jpg” Datei in deinen Child-Theme-Ordner. Das ist zwar nicht wichtig für die Funktion, aber trotzdem cool.

So, das Child-Theme läuft. Aber moment mal! Der Sinn des Child-Themes war ja, dass du ohne Probleme Änderungen am Parent-Theme vornehmen kannst. Dann lass und das mal tun.

---

Wie passt man ein Child Theme an?

Es gibt drei zentrale Wege, ein Child-Theme anzupassen:

1. Benutzerdefiniertes CSS
2. Benutzerdefinierte Funktionen in functions.php
3. Benutzerdefinierte Template Dateien

1. Benutzerdefiniertes CSS

Um benutzerdefiniertes CSS hinzuzufügen, kannst du einfach die style.css-Datei in deinem Child-Theme-Ordner bearbeiten. In dieser Datei kannst du ganz einfach Abstände, Farben, Schriftgrößen und mehr ändern. Die CSS-Regeln, die du in dieser Datei angibst, überschreiben das Styling deines Parent-Themes.

2. Benutzerdefinierte Funktionen in functions.php

Um die Funktionalität deines Parent-Themes anzupassen, musst du die functions.php-Datei deines Child-Themes bearbeiten und PHP-Code schreiben.

In dieser Datei hast du wirklich viele Möglichkeiten. Du kannst beispielsweise eine Options-Page erstellen, um an einer zentralen Stelle Kontaktdaten und Ähnliches zu verwalten. Wie du das machst, erfährst du in einem anderen Artikel.

Wenn du Hilfe brauchst, bestimmte Funktionen einzubauen, schreib mir gern eine Nachricht.

Tipp: Wenn du nicht weißt, was diese functions.php-Datei ist und wie du sie bearbeiten kannst, lies dir doch meinen Post dazu durch!

3. Benutzerdefinierte Template Dateien

Zu guter Letzt kannst du das Child-Theme auch verwenden, um die Templates des Parent-Themes zu überschreiben. Template-Dateien kontrollieren das Layout und den Inhalt verschiedener Teile deiner Seite, wie Footer, Header, Blog-Archive oder Blog-Detail-Seite.

Hierfür brauchst du ein gutes Verständnis von PHP und HTML - wenn dir das etwas zu technisch ist, solltest du vermutlich ein Page-Builder-Plugin wie Elementor verwenden.

Wenn du eine Template-File des Parent-Themes bearbeiten möchtest, kopiere die Datei einfach vom Parent-Theme-Folder in deinen Child-Theme Folder.

Du kannst beispielsweise die single.php Datei kopieren, die kontrolliert, wie ein Blog-Beitrag aussieht. Du kannst jetzt die einzelnen Teile dieser Datei in dem Child-Theme-Ordner anpassen. WordPress wird dann deine modifizierte Version (also die Datei im Child-Theme-Ordner) als Template verwenden.

---

Weitere Möglichkeiten, ein Child-Theme in WordPress zu erstellen

Wie zu Beginn erwähnt gibt es verschiedene Möglichkeiten zur Erstellung eines Child-Themes. Das Grundwissen hast du jetzt drauf. Es gibt verschieden andere Möglichkeiten ein Child-Theme zu erstellen, die ich dir jetzt erklären werde.

1. Verwende ein Child-Theme-Plugin

Es gibt verschiedene kostenlose Plugins, die dir bei der Erstellung eines Child-Themes helfen. Suche im Plugins-Bereich deiner Website einfach nach “Child Theme” und du solltest einige Ergebnisse bekommen.

Wichtig: Achte bei der Wahl des Plugins darauf, dass es seriös wirkt, mit deiner WordPress-Version kompatibel ist, und einige aktive Installationen und Bewertungen hat. So kannst du sicherstellen, dass das Plugin deine Seite nicht beschädigen wird.

2. Vorgefertigte Child-Themes vom Entwickler des Parent-Themes

In den meisten Fällen verwendest du vermutlich ein Theme von einem anderen Entwickler. Manche Parent-Themes bieten vorgefertigte Child-Themes an. Du findest diese vorgefertigten Child-Themes normalerweise auf der offiziellen Website des Themes, die meistens in dem Themes-Bereich des WordPress-Admin-Dashboard (Design → Themes) verlinkt ist.

3. Benutze eine Child-Theme-Generator-Website

Es gibt kostenlose Websites, auf denen du dein Child-Theme generieren lassen kannst. Eine dieser Website ist Free Worpdress Child Theme Creator & Generator. Du gibst einfach ein paar grundlegende Informationen an und schon hast du die grundlegenden Dateien deines Child-Themes.

---

Was kann man machen, wenn das WordPress Child-Theme nicht funktioniert?

Wenn dein Child-Theme nicht funktioniert, kann das an verschiedenen Dingen liegen. Hier ein paar Tipps, die bei der Fehlersuche helfen können.

1. Überprüfe die functions.php-Datei deines Child-Themes

Wenn die functions.php die Styles nicht richtig einbindet, wird dein Child-Theme nicht richtig geladen. (s. Schritt 3 des Abschnittes “Wie erstellt man ein Child-Theme?”). Deine Seite sieht vermutlich auf den ersten Blick ganz normal aus, weil das Styling des Parent-Themes trotzdem greift, aber Änderungen des Child-Themes werden nicht übernommen.

Wenn du zusätzlich Custom PHP Code hinzugefügt hast, solltest du den Code auf Fehler (Syntaxfehler, Tippfehler, Logikfehler etc.) überprüfen.

2. Überprüfe die style.css-Datei des Child-Themes

Überprüfe unbedingt, ob du die CSS-Datei des Child-Themes wirklich “style.css” genannt hast. Nicht “styles.css”, “stylesheet.css”, “styling.css”, “main.css” oder anderes. Dein Child-Theme wird nicht funktionieren, wenn der Name dieser Datei falsch ist.

Außerdem solltest du überprüfen, ob du in der style.css-Datei den richtigen Namen des Parent-Themes angegeben hast. Der Name, den du angegeben musst, ist der Ordnername des Parent-Themes (wp-content → themes).

Überprüfe die style.css-Datei auf syntaktische CSS-Fehler. Dabei kann dir ein Code-Editor wie Visual Studio Code helfen.

Achte noch dazu darauf, dass du Elemente, IDs und Klassen stylest, die wirklich existieren. Wenn du beispielsweise die Klasse “container” stylen willst, aber aus Versehen einen Tippfehler machst und “conainer” stylest, wird dein CSS nicht funktionieren.

3. Lösche den Cache

Manche WordPress Seiten verwenden ein Plugin zum Cachen. Das kann dazu führen, dass der WordPress Server dir eine alte Version der Website zeigt.

Versuche deshalb, den Cache zu leeren. Wie das geht hängt von dem Plugin ab, das du benutzt. Du findest vermutlich nähere Informationen auf der Website des Plugins.

Außerdem kannst du versuchen, den Cache deines Browsers zu leeren. Versuche auch, die Website in einem Privat-Tab zu öffnen, um zu sehen, ob die Änderungen dort sichtbar sind.

4. Benutze “!important”

Es kann passieren, dass das Parent-Theme das Styling des Child-Themes aus irgendeinem Grund überschreibt. Benutze deshalb bei den CSS-Regeln, die vom Parent-Theme überschrieben werden, “!important”. Das sieht folgendermaßen aus:

p {
  color: red !important;
}

Du musst das “!important” einfach vor das Semicolon setzen.

5. Hilfe bei einem Entwickler oder dem Theme-Support suchen

Zu guter Letzt kannst du Hilfe bei einem erfahrenen Entwickler oder dem Support-Team deines Parent-Themes suchen.

---

Fazit

Du weißt jetzt ganz genau, wie du ein Child-Theme in WordPress erstellen, anpassen und installieren kannst. Du hast verschiedene Tipps, Methoden und Anwendungszwecke kennengelernt und bist jetzt mit dem Wissen ausgestattet, das du brauchst, um mit Child-Themes zu arbeiten!

Vielen Dank, dass du diesen Artikel gelesen hast. Lass mich gern wissen, wenn du Fragen oder Feedback haben solltest! Schreib mir dazu gern eine E-Mail an silas@silaswolf.com.