Du möchtest Änderungen an deinem aktuellen WordPress-Theme vornehmen? Dann solltest du definitiv ein WordPress-Child-Theme verwenden. Wie du ein WordPress-Child-Theme erstellen kannst und was das genau ist, erkläre ich dir in diesem Artikel.
Aber mal ganz langsam: bevor du dir dein erstes WordPress-Child-Theme erstellst, sollten wir ein paar grundlegende Fragen klären.
Das Wichtigste in Kürze:
- Child-Theme = Add-on: Es erbt Design und Funktionen vom Parent-Theme und macht deine Anpassungen update-sicher
- Drei Wege: Per Hand (zwei Dateien), per Plugin (Child Theme Configurator) oder per Online-Generator (childtheme-generator.net)
- Du brauchst nur zwei Dateien:
style.cssundfunctions.php– beide können fast leer sein - Wichtigstes Feld:
Template:in der style.css – sagt WordPress, welches Parent-Theme verwendet wird - Vor Aktivierung testen: Vorschau prüfen, damit deine Seite nicht kaputt geht
Was ist ein Child Theme
Ein Child-Theme ist laut Definition im WordPress Codex ein Theme, das
„die Funktionalität und das Design eines anderen Themes, des sogenannten Parent-Themes, erbt“
Child-Themes werden empfohlen, um bestehende Themes zu verändern und dabei ihr Design und ihren Code beizubehalten.
Diese Themes erlauben dir, neue Designs und Funktionen zu erstellen, die die Funktionen des Parent-Themes übernehmen.
Das klingt jetzt vielleicht für dich sehr nerdy. Allerdings benötigst du ein Child-Theme, um Custom CSS-Code und andere Änderung updatesicher in dein bestehendes WordPress-Theme zu integrieren.
Ein Child-Theme ist also ein Add-on für dein bestehendes WordPress-Theme.
Einfach ausgedrückt: Ein Child-Theme stellt sich vor dein „normales“ Theme. Der WordPress Core kommt vorbei und fragt dein Child Theme nach Regeln, Designs und Funktion. Diese im Child Theme definierten Eigenschaften haben höchste Priorität. Danach geht der WordPress Core weiter zu deinen „normalen“ Theme (auch Parent-Theme oder Eltern-Theme) und schau dort nach Funktionen, Designs und Regeln. Dabei benutzt der WordPress Core im Zweifel immer die Regeln (sofern es denn welche gibt) aus dem Child-Theme.
Child-Theme = höchste Priorität. Parent-Theme = Fallback. Du veränderst nie das Original – du legst nur was drüber.
Warum du ein Child-Theme benötigst
Ein Child-Theme ist ein WordPress-Theme, das die Funktionen, Eigenschaften und das Design eines anderen WordPress-Themes, des Parent-Themes, erbt. Du kannst das Child-Theme dann anpassen, ohne Änderungen am Parent-Theme vornehmen zu müssen.
Child-Themes sind der beste Weg, um ein WordPress-Theme anzupassen, denn sie sparen Zeit und Mühe. Das Parent-Theme enthält bereits viele Formatierungen und Funktionen, sodass du nicht alles von Grund auf neu programmieren musst.
Zudem kannst du so dein WordPress-Theme sicher aktualisieren.
Da du das Child-Theme und nicht das Parent-Theme geändert hast, gehen keine Anpassungen verloren, wenn du das Parent-Theme aktualisierst.
Du solltest immer bedenken, dass Änderungen an Theme Dateien beim Update überschrieben werden. Hier kommt also ein Child-Theme zum Einsatz: das Design und die Funktionen werden eben nicht geupdated und überschreiben die Regeln des Eltern-Themes.
Die Vorteile eines Child-Themes:
- Du kannst das Parent-Theme aktualisieren, ohne dass deine Anpassungen verloren gehen.
- Du nutzt die Funktionen von ausgefeilten Frameworks und übergeordneten Themes und kannst das Design an deine Bedürfnisse anpassen.
- Wenn du mit deinen Anpassungen nicht zufrieden bist, kannst du das Child-Theme einfach deaktivieren und alles bleibt so, wie es vorher war.
- Anstatt ein komplettes Theme von Grund auf zu erstellen, kannst du auf einem bereits bestehenden Theme aufbauen und so die Entwicklungszeit verkürzen.
- Das ist eine funky Möglichkeit, um zu lernen, wie Themes funktionieren.
Ein Child-Theme kann Bildordner, JavaScript, CSS, Template Dateien und viele andere Dinge enthalten. Das Schöne daran ist jedoch, dass sie das nicht müssen. Du kannst so viele oder so wenige Anpassungen vornehmen, wie du willst.
Eigentlich braucht ein Child-Theme nur drei Dinge: Einen Ordner, ein Stylesheet (style.css) und eine functions.php-Datei. Das war’s. Und die beiden Dateien können fast leer sein.
Wenn du eh schon ein Child-Theme baust, leg dir gleich ein Backup-System an. Vor jeder Änderung kurz die zwei Dateien sichern – dauert 10 Sekunden, spart dir aber Stunden, wenn du dich mal vertippst.
Okay, jetzt, wo du weißt, wie toll Child-Themes eigentlich sind und was du damit alles machen kannst, werden wir Schritt für Schritt ein eigenes WordPress-Child-Theme erstellen.
Ein Child-Theme in WordPress erstellen (per Hand)
Es ist beinah egal, welches WordPress-Theme du ein Child-Theme erstellen möchtest. Ich werde dir an den relevanten Stellen zeigen, was du bei deinem speziellen Theme einsetzen musst.
Wir werden das WordPress-Child-Theme erst mal lokal auf deinem Rechner erstellen, um es dann später mit einem FTP-Programm auf deinem Webserver hochzuladen.
Im ersten Schritt erstellst du einen neuen Ordner auf deinem Rechner. Je nachdem welches Parent-Theme du nutzt, vergibst du den Ordner-Namen mit einem „-child“ Suffix. Also falls du das Enfold Theme nutzt (und dies im Ordner „enfold“ in deinem Themes-Ordner ist) erstellst du einen Ordner: „enfold-child“.
Falls du nicht weißt, wie dein Parent-Theme heißt, schaue mit einem FTP-Programm auf deinen Webserver unter: wp-content/themes. Da sollte sich (je nachdem welches Theme du verwendest) ein Ordner befinden.
Nachdem du den Ordner erstellt hast, kannst du mit einem Text-Editor deiner Wahl eine neue Datei erstellen. Füge folgenden Code in die Datei ein:
/* Theme Name: Enfold Child Theme URL: http://deinedomain.de Description: Enfold Child Theme Author: Dein Name Author URL: http://deinedomain.de Template: enfold Version: 1.0.0 Text Domain: enfold-child */
Ändere alle Werte entsprechend. Das wichtigste Feld ist Template, weil es WordPress mitteilt, auf welchem Parent-Theme dein Child-Theme basiert. Wenn du fertig bist, speichere die Datei als style.css ab.
Erstelle eine weitere Datei namens functions.php im selben Ordner. Kopiere nun den unten stehenden Code, füge ihn in die leere Datei ein und speichere sie:
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri().'/style.css' );
}
?>
Das war’s! Du hast soeben dein erstes WordPress-Child-Theme erstellt!
Nun gehst du einfach in den Ordner in das Theme-Verzeichnis (wp-content/themes) und aktivierst das Child-Theme über dein WordPress-Backend (Design > Themes)
That’s it!
Natürlich hast du auch noch andere Möglichkeiten ein WordPress-Child-Theme zu erstellen. Ich werde im Folgenden darauf eingehen.
Ein Child-Theme in WordPress erstellen (mit Plugin)
Das Plugin Child Theme Configurator ist ein einfach zu bedienendes WordPress-Plugin, mit dem du schnell und ohne Code Child-Themes erstellen und anpassen kannst.
Als Erstes musst du das Child Theme Configurator Plugin installieren und aktivieren.
Nach der Aktivierung musst du in deinem WordPress Dashboard zu Werkzeuge → Kindthemen navigieren (jaja, die deutsche Übersetzung ist nicht so besonders…)
Auf der ersten Registerkarte Eltern/Kind wirst du aufgefordert, ein Parent-Theme aus einem Dropdown-Menü auszuwählen. Im Beispiele wähle ich das Theme „Enfold“ – du wählst hier natürlich dein Parent-Theme.
Wenn du auf den Button „Untersuchen“ klickst, prüft das Plugin, ob das Theme für die Verwendung als Parent-Theme geeignet ist. Das Enfold-Theme ist OK.
Als Nächstes wirst du aufgefordert, den Ordner zu benennen, in dem das Child-Theme gespeichert werden soll, und auszuwählen, wo die Styles gespeichert werden sollen. Wir belassen es bei den Standardeinstellungen.
Unter Punkt 6 wählst du den ersten Punkt aus: „Die WordPress Stil-Warteschlange benutzen.“
Wenn du zu Abschnitt 7 kommst, musst du auf den Button „Click to edit Child Theme Attributes“ klicken, um die Eigenschaften des Child-Themes zu bearbeiten. Dann kannst du dessen Details eingeben.
Wenn du ein Child-Theme manuell erstellst, verlierst du die Menüs und Widgets des Parent-Themes. Der Child Theme Configurator kann sie vom Parent- in das Child-Theme kopieren. Aktiviere das Kästchen Abschnitt 8, wenn du das möchtest.
Zum Schluss klickst du auf den Button, um dein neues Child Theme zu erstellen. Das Plugin erstellt einen Ordner für deine Child-Themes und fügt die Dateien style.css und functions.php hinzu, die du später zur Anpassung des Themes verwenden wirst.
Wenn alles zu funktionieren scheint, klicke auf die Schaltfläche Aktivieren & Veröffentlichen und dein Child-Theme wird aktiviert.
In diesem Stadium sieht das Child-Theme genauso aus wie das Parent-Theme und verhält sich auch so.
Falls die Einstellungen deines Themes nach dem Wechsel verschwunden sind, schau, ob es eine Export-/Importfunktion gibt. Beispielsweise bietet dir das Enfold-Theme unter dem Punkt „Export“ genau das. Exportiere die Einstellung des Parent-Themes und importiere sie ins Child-Theme.
[/sc]
Ein Child-Theme in WordPress erstellen (mit Generator)
Eine weitere Möglichkeit ein WordPress-Child-Theme zu erstellen, ist die Benutzung eines Child Theme Generators. Du findest so einen Generator etwa unter:
https://childtheme-generator.net/
Zugegeben, der Child Team Generator sieht nicht schön aus, macht aber was er soll. Zudem hat er die beliebtesten Themes bereits eingespeichert. Somit kannst du mit nur wenigen Klicks dein Child-Theme herunter- und direkt auf deinen Webserver hochladen. Natürlich machst du das wie immer in den Ordner wp-content/themes.
Falls die Formularfelder des Child Theme Generators für dich nicht selbsterklärend sind, hier noch die eine kleine Anleitung:
- Name of the parent theme: Gib den Namen des übergeordneten Themes ein, zum Beispiel „Twentyfifteen“ oder „Enfold“. Der Child Theme Generator wird versuchen, den richtigen Slug des übergeordneten Themes für dich zu finden.
- Slug of the parent theme: Dies ist einfach der Ordnername deines übergeordneten Themes. Du findest ihn in deiner WordPress-Installation unter /wp-content/themes/[theme], wobei [theme] der Ordnername deines Parent-Themes ist.
- Name of your child theme: Gib den Namen deines Child-Themes ein (das, das du jetzt erstellen wirst). Im Feld darunter wird automatisch ein Slug vorgeschlagen, der den Ordnernamen für dein Child-Theme darstellt.
- Slug of your child theme: Dies ist der Ordnername deines Child-Themes. Der Child Theme Generator schlägt ihn automatisch vor, aber du kannst ihn nach Belieben ändern.
Denk einfach daran: Kleinbuchstaben, keine Leerzeichen und keine Sonderzeichen. - Author email address: WordPress will, dass die E-Mail-Adresse des Autors in der style.css neben dem Autorennamen steht.
- Author name: Genau wie die E-Mail-Adresse wird auch dieser in der style.css-Datei gespeichert.
Wenn du keine Lust auf manuelle Datei-Erstellung hast und auch das Plugin sparen willst, ist childtheme-generator.net die schnellste Lösung. Drei Felder ausfüllen, ZIP runterladen, hochladen, aktivieren – fertig.
Häufig gestellte Fragen
Was ist ein WordPress Child-Theme?
Ein Child-Theme ist ein WordPress-Theme, das die Funktionen, Eigenschaften und das Design eines anderen Themes (des Parent-Themes) erbt. Du kannst es anpassen, ohne das Parent-Theme zu verändern. Vorteil: Wenn das Parent-Theme aktualisiert wird, gehen deine Anpassungen nicht verloren.
Brauche ich zwingend ein Child-Theme?
Ja, sobald du Custom CSS oder PHP-Code zu deinem Theme hinzufügen willst. Ohne Child-Theme werden deine Änderungen beim nächsten Theme-Update einfach überschrieben. Wenn du nur Einstellungen im WordPress-Customizer machst, brauchst du allerdings kein Child-Theme.
Welche Dateien braucht ein Child-Theme mindestens?
Nur zwei Dateien: style.css mit dem Theme-Header (besonders wichtig: das Feld Template: mit dem Slug des Parent-Themes) und functions.php mit dem Code zum Laden der Parent-Styles. Beide können fast leer sein.
Was ist der einfachste Weg, ein Child-Theme zu erstellen?
Für absolute Anfänger ist der Online-Generator unter childtheme-generator.net der schnellste Weg – einfach Formular ausfüllen, ZIP runterladen, hochladen. Wer kein zusätzliches Tool will, nimmt das Plugin Child Theme Configurator. Erfahrene Nutzer machen es per Hand mit zwei Dateien.
Was muss ich beim Template-Feld in der style.css beachten?
Der Wert bei Template: muss exakt dem Ordnernamen des Parent-Themes entsprechen – Groß-/Kleinschreibung inklusive. Wenn dein Parent-Theme im Ordner „enfold“ liegt, muss da „enfold“ stehen, nicht „Enfold“. Sonst zeigt WordPress dein Child-Theme erst gar nicht im Backend an.
Verliere ich beim Child-Theme meine Theme-Einstellungen?
Ja, das passiert leider häufig. Viele Themes (z.B. Enfold) bieten aber eine Export-/Importfunktion für ihre Einstellungen. Exportiere die Settings im Parent-Theme und importiere sie nach dem Child-Theme-Wechsel wieder. Auch Menüs und Widgets musst du eventuell neu zuweisen.
