Unser SEO-Kurs „New Level SEO“ vom 20.02. bis zum 27.02. wieder seine Türen geöffnet!Ja, ich will auf die Warteliste!
Bessere Text mit ChatGPT

27-seitiges E-BOOk für 0 €

14 simple Tipps, mit denen ChatGPT dramatisch bessere Texte schreibt

In unserem E-Book zeigen wir dir, wie du mit kleineren Änderungen oder Ergänzungen in deinen Prompts mit ChatGPT deutlich bessere Texte schreibst.

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

Ein Child-Theme bei WordPress erstellen
Foto des Autors

Finn Hillebrandt

Zuletzt aktualisiert:

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:

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

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:

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

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 selbst.

Hier findest du eine Liste mit beliebten WordPress-Themes, für die es vorgefertigte 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:

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. 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 ist schon seit über einem Jahrzehnt nutze und 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 folgende 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, erstellst du einen Ordner, 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 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: Blogmojo
Author URI: https://www.blogmojo.de
Template: divi
Version: 1.0
Text Domain: divi-child-manuell
*/

Natürlich solltest du Namen, Beschreibung, Autor etc. entsprechend anpassen. 😉

Die style.css erstellst du mit einem Text-Editor.
Wichtig: Achte beim Punkt „Template“ darauf, dass du exakt den gleichen Namen wie den des Parent-Themes verwendest (auch Groß- und Kleinschreibung beachten). WordPress kann sonst Child- und Parent-Theme nicht verknüpfen und zeigt eine Fehlermeldung an.
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 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:

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

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

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ü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.

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 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 Blogmojo 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, 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).

Achtung: Die Nutzung von Google Fonts, die von Google-Servern geladen werden, ist nicht DSGVO-konform und kann zu Abmahnungen oder Schadensersatzforderungen führen. Bitte binde Google Fonts lokal in WordPress ein. Den obigen Code kannst du z. B. in Kombination mit dem Plugin OMGF Pro nutzen.

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

Finn Hillebrandt

Finn Hillebrandt

Gründer von Blogmojo, SEO-Experte mit 11+ Jahren Erfahrung, WordPress-Fan

Finn hilft Online-Unternehmern mehr Besucher und Kunden über Google zu bekommen.

Er setzt dabei nicht auf Hörensagen, sondern führt ständig eigene Tests und Recherchen durch, um herauszufinden, wie Google wirklich tickt. Achtung, Nerd-Alarm! 🤓

Er teilt sein Wissen hier auf dem Blog in 100+ Fachartikeln zu Online-Business, WordPress und SEO sowie in Online-Kursen, wie seinem SEO-Kurs „New Level SEO“ und seinem Mini-Kurs „Kann ich ranken?“.

Erfahre mehr über Finn und das Team, folge ihm auf Instagram, tritt seiner Facebook-Gruppe SEO & Affiliate-Marketing bei oder mache es wie 10.500+ andere Blogger und Online-Unternehmer und abonniere seinen Newsletter mit exklusiven Marketing-Tipps.

🤩 Noch mehr genialer Content? Unsere Angebote für 0 €!

Gesetze erfolgreicher Blogartikel

14 Gesetze unglaublich erfolgreicher Blogartikel

Lerne, wie du Blogartikel schreibst, die tausende Besucher im Monat bekommen und tausendfach geteilt werden.

SEO-Fehler

10 SEO-Fehler, die dich in 2023 deine Rankings kosten

Du willst in 2023 mehr Kunden und Leser über Google bekommen? Dann solltest du diese 10 Fehler vermeiden.

Instagram Case Study

Case Study: Von 2K auf 100K Instagram-Follower in nur 3 Monaten

Wir zeigen dir, wie wir es geschafft haben, in nur 3 Monaten von 2K auf 100K Instagram-Follower zu kommen.

Online-Business Case Study

Case Study: 250.000 € Umsatz mit Online-Kursen

Wir zeigen dir, wie wir über 250.000 € Umsatz mit Online-Kursen gemacht haben. Ohne Ads, ohne Social Media und ohne Kaltakquise.

Bessere Texte mit ChatGPT

14 simple Tipps, mit denen ChatGPT dramatisch bessere Texte schreibt

ChatGPTs Schreibstil ist von Haus aus eher mittelmäßig. Texte enthalten z. B. Wiederholungen oder klingen monoton.

In unserem E-Book zeigen wir dir, wie das Tool mit kleineren Änderungen deutlich bessere Texte schreibt. 💪

👉 Ja, zeig mir das E-Book!