Unser SEO-Kurs „New Level SEO“ öffnet am 07.02. wieder seine Türen!Ja, zeig mir den Kurs!
Du möchtest mehr Leser für deinen Blog und mehr Kunden für dein Online-Business?

Dann mache es wie 10.500+ andere Online-Unternehmer und abonniere unseren Newsletter mit exklusiven Blog- und SEO-Tipps. Als Geschenk erhältst du unser E-Book Die 12 Gesetze unglaublich erfolgreicher Blogartikel.

Invalid email address

Abmeldung jederzeit möglich. Etwa 2 bis 5 E-Mails im Monat. Die Einwilligung umfasst die Hinweise zu Widerruf, Versanddienstleister und Statistik gemäß unserer Datenschutzerklärung.

Die 12 Gesetze unglaublich erfolgreicher Blogartikel

WordPress Child-Theme erstellen: Der ultimative Guide (2022)

Ein Child-Theme bei WordPress erstellen

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 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 Child-Themes zu deinem Theme findest
  • Wie du ein Child-Theme manuell oder per Plugin anlegen 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 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:

Die style.css ermöglicht es dir, umfangreiche Änderungen am Code vorzunehmen

Dabei gibt es jedoch ein klitzekleines Problem:

Ergänzungen oder Änderungen der style.css und anderen Theme-Dateien, wie z. B. 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 in Abschnitt 6 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:

  1. Sollte sich in den Dateien deines Child-Themes eine Sicherheitslücke befinden, wird diese durch spätere Updates nicht geschlossen.
  2. 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 macht dich auf Unterschiede aufmerksam.

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.

Achtung: Vertraue hier bitte ausschließlich auf seriöse Quellen, also z. B. bekannte WordPress-Portale oder die Entwickler selbst. Falls du keine findest, erstelle das Child-Theme besser in Eigenregie.

Hier findest du eine Liste mit beliebten WordPress-Themes, für die es vorgefertige Child-Themes gibt:

ThemeLink
AvadaDownload
DiviDownload
EnfoldDownload
The7Download
Twenty NineteenDownload
Stockholm ThemeDownload
Monstroid2Download
GeneratePressDownload
Impreza ThemeDownload
BeThemeDownload
The X ThemeDownload
PILEDownload
Neve ThemeDownload
Astra 3.0Download
Jupiter XDownload
BridgeDownload
Uncode Theme Download
Storefront von WooThemesDownload

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:

  1. Du erstellst ein Child-Theme mittels eines Plugins
  2. 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:

Um ein Child Theme zu erstellen kannst du einfach das Plugin WordPress Child Theme Generator verwenden

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:

Das Plugin Child Theme Generator ist wirklich selbsterklärend und zeigt dir ganz genau, was du zu tun hast.

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.

In unserem Fall hat alles wunderbar geklappt.

Du kannst sofort überprüfen, ob ein Child Theme erfolgreich erstellt wurde, indem du einen Blick unter Einstellungen > Themes wirfst

6. Ein Child-Theme manuell anlegen

Ein Child-Theme manuell anzulegen ist etwas aufwendiger, wenn auch keine Raketenwissenschaft.

Die Vorteile daran sind:

Du sparst es dir, ein weiteres Plugin herunterzuladen und lernst du die Dateistruktur von WordPress besser kennen, was dir bei zukünftigen Design-Anpassungen helfen kann.

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 Microsoft Datei Explorer.

Ein kostenloses Tool für dieses Vorhaben ist der FileZilla Client, den ich dir wärmstens empfehlen kann.

Mit FileZilla kannst du dich im Handumdrehen mit deinem Webspace verbinden.

Um erfolgreich eine Verbindung mit deinem Webspace herstellen zu können, benötigst du neben FileZilla die folgenden Daten, die du in der Regel im Mitgliederbereich deines Webhoster findest:

  1. Server-Name
  2. FTP-Benutzername
  3. FTP-Passwort
  4. Port

Diese Daten gibst du in der Kopfzeile von FileZilla ein und stellst eine Verbindung zu deinem Webspace. her.

Sobald die Verbindung steht, ist es deine Aufgabe, einen Ordner zu erstellen, in dem die Dateien deines Child-Theme später abgelegt werden. Diesen Ordner darfst du jedoch nicht irgendwo innerhalb deines Webspace platzieren, sondern unbedingt unter wp-content > themes.

Erstelle einen Ordner für dein Child-Theme über FTP.

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:

Child Theme Ordner mittels FileZilla erstellen

6.2 style.css erstellen

Im zweiten Schritt erstellen wir 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: Blogmojo
Author URI: https://www.blogmojo.de
Template: divi
Version: 1.0
Text Domain: divi-child-manuell
*/

Natürlich solltest du den Inhalt entsprechend an deine individuellen Angaben anpassen. 😉

Die style.css erstellst du mit einem Text-Editor.
Wichtig: Achte beim Punkt „Template“ darauf, dass du exakt den Namen des Parent-Theme verwendest (auch Groß- und Kleinschreibung beachten), da andernfalls eine Fehlermeldung im Backend erzeugt wird. WordPress kann sonst Child- und Parent-Theme nicht verknüpfen.
Parent- und Child-Theme müssen sich erkennen und die korrekten Namen verwenden

Nachdem du die Datei erstellt hast, lädst du diese auf deinen Webspace, in den in Schritt 1 erstellten Ordner hoch:

Die fertige style.css lädst du in das Standard-Verzeichnis deines Themes hoch.

6.3 functions.php erstellen

Damit dein Child-Theme korrekt funktioniert, müssen wir eine weitere Datei erstellen: die functions.php.

Diese Datei hat die Aufgabe, das Child-Theme mit dem Parent-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 Child-Themes sollte an dieser Stelle, wenn du alles richtig gemacht hast, folgendermaßen aussehen:

Fertige Ordner des Child-Themes.

Ist das der Fall, sind bereits 90 % geschafft.

Auf geht’s zum letzten Schritt.

6.4 Screenshot hochladen

Um dein 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!

An dieser Stelle kannst du überprüfen, ob alles funktioniert hat. Gehe hierzu im WordPress Backend in Design > Themes, wo dein gerade erstelltes Child-Theme nun erscheinen soll.

In unserem Fall erkennst du das mittels Plugin erstellte Child-Theme ganz links, sowie das manuell erstellte Child-Theme, dem ich einen wunderschönen Screenshot der Blogmojo-Webseite zugewiesen habe ganz rechts. In der Mitte befindet sich das Parent-Theme:

Das erfolgreich erstellte Child-Theme sollte unter Design>Themes zu finden sein.

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“:

Customizer Export/Import WordPress Plugin

Sobald du dieses kleine, aber geniale Plugin installiert hast, wird das Menü deines WordPress Customizers um den Punkt „Export/Import“ erweitert:

WordPress Customizer mit Import/Export Funktion

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 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 kannst du das Child-Theme im nächsten Schritt aktivieren.

Child-Theme-Vorschau und Aktivierung

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 nun 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ünftige Anpassungen am 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 Child-Theme vornehmen kannst:

7. Das Design des Child-Themes anpassen

Nachdem du dein Child-Theme 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.

Anpassungen am Design kannst du in der style.css vornehmen.

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 geniale Blogmojo-Pink. Außerdem wird die Überschrift zentriert dargestellt:

body.page h1 {
color: #ff4987;
text-align:center;
}

Beispiel 2: Blog-Zwischenüberschrift ändern

Auf Blogmojo werden unter Zwischenüberschriften in Blogbeiträgen Trenner dargestellt. Dies könntest du mit folgendem Befehl 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, 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.

Hinweis: Hier arbeiten wir nicht in der 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:

In deinem Child-Theme kannst du die Fonts global ersetzen

…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).

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.

Wenn du Änderungen an Header und Footer vornehmen möchtest, musst du diese Dateien zunächst kopieren

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 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 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 Parent-Theme aktiviert? Dementsprechend werden Änderungen, die du im Theme-Editor am Child-Theme 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!

Finn Hillebrandt

Finn Hillebrandt

Gründer von Blogmojo, WordPress-Fan und SEO-Experte mit 10+ Jahren Erfahrung.

Finns große Leidenschaft ist es, epische Blogartikel zu schreiben und bei Google zu ranken (und nein, dass du hier gelandet bist, ist kein Zufall). 😎

Sein Motto und seine Mission lauten: Unf*ck SEO! ✊

Bei SEO setzt er entsprechend nicht auf Hörensagen, sondern führt ständig eigene Tests und Recherchen durch, um herauszufinden, wie Google wirklich tickt (Achtung, Nerd-Alarm!).

Erfahre mehr über ihn und das Team oder folge ihm auf Instagram, Twitter, LinkedIn oder Facebook.

Werbehinweis für Links mit Sternchen (*)

Es handelt sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalten wir eine Provision. Dies hat keinerlei Einfluss darauf, wie wir ein Tool oder einen Anbieter bewerten.

Wir empfehlen nur Tools bzw. Anbieter, hinter denen wir auch wirklich stehen. Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst jedoch uns und diesem Projekt. Danke! ❤️

Schreibe einen Kommentar