Anleitung: Child-Theme für WordPress erstellen und nutzen

Der Markt der WordPress-Themes ist groß – für fast jedes Vorhaben wirst du ein passendes Theme finden. Doch was ist, wenn du Änderungen am Design vornehmen möchtest? Schließlich willst du dich von der Masse abheben. Sind kleine Farbänderungen noch mit wenigen Zeilen CSS-Code innerhalb des Customizers umgesetzt, verhält sich dies bei aufwändigen Modifikationen anders. Hierfür sind in der Regel tiefe Eingriffe in die Theme-Dateien notwendig, um gewünschte Ergebnisse zu erzielen. Damit dies nicht in Chaos endet, solltest du in diesen Fällen immer auf ein Child-Theme setzen. Was solch ein Child-Theme ist und welche Vorteile es mit sich bringt, erfährst du in diesem Beitrag.

Was ist ein Child-Theme?

Das offizielle Theme Handbook erklärt, um was es sich bei einem sogenannten Child-Theme handelt. Demnach ist jenes ein Theme, das individuelle Anpassungen am Parent-Theme ermöglicht und den Umgang mit diesem vereinfacht. Das Parent-Theme ist dabei genau das, was du als normales WordPress-Theme (also zum Beispiel Avada) kennst.

linie infobox

Wie du bei den vielen Angeboten das richtig WordPress-Theme für deine Anforderungen findest, kannst du in diesem Blogbeitrag nachlesen.

linie infobox

Nun zum wichtigen Unterschied: Das Child-Theme erbt das grundsätzliche Design und die Funktionalität des übergeordneten Themes. Anpassungen, die am Child-Theme umgesetzt werden, überschreiben die Funktionalität des Parent-Themes.

In der Praxis bleibt das Parent-Theme selbst bei aufwändigen Modifikationen unangetastet. Änderungen werden lediglich in namensgleichen Dateien des Child-Themes durchgeführt. Daraus resultieren zahlreiche Vorteile, die die Nutzung von Child-Themes so attraktiv macht.

Wann ergibt ein Child-Theme Sinn?

Child-Themes sind unentbehrlich, wenn du Anpassungen an deinem WordPress-Theme vornehmen und diese nicht verlieren möchtest. Die Gründe erfährst du selbst spätestens dann, wenn du Änderungen an Theme-Dateien vorgenommen hast und dann Updates des Themes einspielst. Denn wird ein Theme aktualisiert, so werden sämtliche Theme-Dateien überschrieben und auch die individuellen Anpassungen gehen logischerweise verloren.

Child-Themes eignen sich besonders auch für Code-Anfänger und -Neulinge. Jene können die Funktionalität eines bestehenden Themes als Basis nutzen, um mit Hilfe eines Child-Themes eigene Wünsche umzusetzen. Hier muss also nicht von Grund auf ein komplettes WordPress-Theme entwickelt werden, was auch einen zeitlichen Vorteil darstellt.

Allgemein lässt sich sagen, dass du gewisse Grundkenntnisse im Bereich WordPress und Webentwicklung haben solltest, damit dir ein Child-Theme nicht nur einen Vorteil bringt, sondern du dieses auch sicher nutzen kannst.

free dev blog lila

Für wen eignet sich ein Child-Theme nicht?

Child-Themes eignen sich in der Regel eher für Nutzer, die größere Änderungen an ihren Themes durchführen. Solltest du selbst nur wenig Erfahrung in der Webentwicklung haben und beschränken sich deine Änderungen auf wenige Zeilen CSS-Code, ist ein Child-Theme nicht unbedingt notwendig. Diese Änderungen kannst du auch bequem in den Customizer von WordPress einpflegen.

Auch Änderungen, die über die Optionen des installierten WP-Themes durchgeführt werden können, solltest du nicht über ein Child-Theme implementieren. Dies können beispielsweise einfache Farbänderungen, Headerbilder oder andere Layout-Optionen sein, für die der Entwickler bereits vorgesorgt hat. Ein Child-Theme würde hier in der Regel deine WordPress-Website nur unnötig verlangsamen. Auch die Übersicht geht so schnell verloren.

Sollten deine Änderungen innerhalb eines Child-Themes einen gewissen Umfang überschreiten, erstellst du vielleicht besser ein eigenständiges Theme – so empfiehlt es übrigens auch der WordPress-Codex. Warum? Änderst du zu viele Funktionalitäten und Dateien, können Probleme bei Updates des Parent-Themes auftreten.

Wo erhalte ich jenes Theme?

Nutzer vieler Bestseller wie Enfold, Avada und Co können sich freuen. Denn zahlreiche Theme-Anbieter bieten bereits vorgefertigte Child-Themes für ihre eigenen WordPress-Templates zum Download an. Avada liegt so beispielsweise bereits ein passendes Child-Theme bei. Nutzer des beliebten Themes Divi müssen dagegen – trotz zahlreicher Nutzerwünsche – noch immer selbst Hand anlegen oder nutzen ein vorgefertigtes Child-Theme aus der Community. 

Bevor du also eigenständig tätig wirst, solltest du immer zuerst beim Anbieter nachschauen, ob dieser nicht vielleicht bereits für dich vorgesorgt hat. Dieser kann schließlich am besten gewährleisten, dass das Child-Theme mit dem dazugehörigen WP-Template fehlerfrei funktioniert.

Child-Theme selbst erstellen

Stellt dein Anbieter kein Child-Theme zum Download bereit, ist das nicht weiter schlimm. Die Erstellung eines solchen Themes ist relativ einfach und erfordert lediglich etwas Zeit, Grundkenntnisse im Bereich der Webentwicklung und den S/FTP-Zugang oder SSH-Zugang zu deiner Website. Die Nutzung eines Code-Editors wird ebenso empfohlen.

Hier sorgen am Ende dann drei simple Dateien dafür, dass du die Vorzüge eines Child-Themes nutzen kannst. Befolge dazu einfach die nachfolgende Anleitung:

Schritt 1: Ordner erstellen

Hast du dir über FTP Zugang zu deiner Website verschafft, so solltest du im ersten Schritt zum Theme-Ordner (/wp-content/themes/) deiner WordPress-Installation navigieren. Hier musst du lediglich den Ordner deines Child-Themes erstellen. 

child theme ordner erstellt
In diesem Beispiel habe ich den Ordner für das Child-Theme des WordPress-Themes TwentyFifteen erstellt.

Den Namen kannst du frei wählen, es empfiehlt sich aber für eine bessere Übersicht, einfach ein “-child” an den Namen des Ordners des Parent-Themes zu hängen. Erstellst du ein Child-Theme für das WordPress-Theme TwentyFifteen, wäre der passende Ordnername also twentyfifteen-child.

Schritt 2: style.css erstellen

Im nächsten Schritt wird ein Stylesheet mit dem Namen style.css benötigt, das direkt im zuvor erstellten Ordner seinen Platz findet.

Mit folgendem Inhalt sollte eben jene Datei befüllt werden:

/*
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
*/

Der Header des Stylesheets beinhaltet damit verschiedenste Informationen zum Child-Theme. Diese Informationen sind mit Ausnahme zweier Zeilen nicht zwingend erforderlich.

Theme-Name und Template müssen unbedingt ausgefüllt werden, damit das Child-Theme funktioniert. Template sorgt dafür, dass WordPress den Zusammenhang zwischen Child- und Parent-Theme erkennen kann. Die hinterlegte Information (im Beispiel: twentyfifteen) sollte deshalb im Child-Theme mit der Information im Stylesheet des übergeordneten Themes übereinstimmen.

Schritt 3: functions.php erstellen

Im dritten Schritt musst du die functions.php deines Child-Themes anlegen. Der Inhalt jener Datei sorgt dafür, dass das Stylesheet des Eltern-Themes geladen wird.

Kopiere folgenden Inhalt in die PHP-Datei mit dem Namen functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() { 

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
      );
    }

Bei der Nutzung des Child-Themes zur Individualisierung wirst du später in dieser Datei auch Funktionserweiterungen einpflegen.

Schritt 4: Screenshot für dein Child-Theme

Der vierte Schritt ist nicht zwingend erforderlich. Wenn du möchtest, dass in der Theme-Übersicht innerhalb deiner WordPress-Installation ein Screenshot zum Child-Theme angezeigt wird, kannst du dafür passendes Bildmaterial hinterlegen.

fertiger ordner
So sollte der fertige Ordner des Child-Themes mitsamt des Screenshots am Ende aussehen.

WordPress nutzt hier automatisch eine Datei mit dem Namen screenshot.png, die sich im Hauptordner des Child-Themes befindet. Du kannst deiner Kreativität hier freien Lauf lassen, der WordPress-Codex empfiehlt eine Größe von 1200px in der Breite und 900px in der Höhe.

Schritt 5: Child-Theme aktivieren

Das war es auch schon – das Child-Theme muss nur noch aktiviert werden. Dies geschieht auf die gleiche Weise, wie du bereits das Parent-Theme aktiviert hast. Gehe dazu einfach in die Theme-Übersicht deiner WordPress-Installation und wähle das nun erscheinende Child-Theme aus.

Es kann sein, dass nach der Aktivierung bestimmte Einstellungen, die du zuvor am Parent-Theme getätigt hast, verschwunden beziehungsweise nicht mehr wie zuvor gesetzt sind. Das ist normal. Im besten Fall installierst und aktivierst du also das Child-Theme, bevor du erste Änderungen an deinem Theme vornimmst. 

Alternative: Child-Theme mit Plugin erstellen

screenshot plugin
WordPress-Plugins wie dieses machen die Erstellung eines Child-Themes zwar bequemer, sind aber nicht unbedingt notwendig.

Es ist auch möglich, dass passende Child-Theme über ein WordPress-Plugin zu erstellen. Eines der beliebtesten Plugins ist in diesem Fall der Child-Theme Configurator. Dieser bietet nicht nur die Erstellung eines Child-Themes, sondern auch weitere Konfigurationsmöglichkeiten.

Da die Erstellung eines solchen Themes sehr einfach ist, ist auch für weniger versierte Nutzer ein solches Plugin keineswegs notwendig. Im Hinblick auf die Performance deiner WordPress-Webseite rate ich sogar von der Installation zu vieler, nicht notwendiger Plugins ab.

Mit dem Child-Theme arbeiten

Es ist ganz einfach, mit dem selbst erstellten Child-Theme zu arbeiten. Hast du jenes aktiviert, so erwartet dich auf deiner WordPress-Website das Design des Parent-Themes. Das ist logisch, schließlich entspricht dies genau der Funktionsweise des Child-Themes:

Jede Datei, die du innerhalb deines Child-Themes anlegst, überschreibt die namensgleiche Datei in deinem Parent-Theme. Lediglich die functions.php und das Stylesheet bilden eine Ausnahme. Nicht nur der Name, sondern auch die Ordnerstruktur sollte exakt gleich sein.

Möchtest du zum Beispiel den Footer (footer.php) des Parent-Themes modifizieren, so fügst du eine Kopie eben jener Datei direkt zum Ordner des Child-Themes hinzu. Diese Datei überschreibt nun die namensgleiche Datei im Parent-Theme. Änderungen, die du dann hier durchführst, werden auf deiner Website sichtbar.

Sonderfall: Die functions.php überschreibt nicht, sondern wird vor der gleichnamigen Datei des Parent-Themes geladen. Möchtest du einzelne PHP-Funktionen des Parent-Themes überschreiben, so kannst du dies innerhalb der functions.php des Child-Themes umsetzen. Diese Möglichkeit richtet sich ausschließlich an erfahrene Nutzer. Eine Hilfestellung dazu bietet dir diese ausführliche Anleitung.

Fazit: Praktisches, unentbehrliches Feature!

Ein Child-Theme zu erstellen, ist verhältnismäßig simpel. Auch die Nutzung eines solchen Themes erweist sich im Alltag als nicht besonders schwer. Genau deshalb ist ein Child-Theme für alle WordPress-Nutzer zu empfehlen, die Änderungen an ihrem Theme „ordentlich“ durchführen möchte. Die Vorteile überwiegen eindeutig.

Nachteile ergeben sich fast keine. Zwar wird oft ein möglicher Performance-Nachteil durch Child-Themes angeführt, dieser ist jedoch – wenn überhaupt – nur minimal. Child-Themes bleiben vergleichsweise schlank, da diese meist nur den Code der Modifikationen enthalten.

Dennoch solltest du bei der Nutzung von Child-Themes immer genau wissen, was du tust. Auch hier kannst du schnell dafür sorgen, dass deine WordPress-Website unbrauchbar wird und nur noch Fehler ausspuckt. Ein WordPress-Backup ist bei solchen Modifikationen unverzichtbar – im Zweifel solltest du immer einen Profi mit entsprechender Expertise konsultieren.

Kennst du schon die aktuellen WordPress-News?

Erhalte alle zwei Wochen unsere neuesten Artikel und Neuigkeiten rund um WordPress!

Ja, ich bin mit der Datenverarbeitung einverstanden.
Beitragsbild: Anthony Robert | Unsplash