Child Themes sind eine besonders elegante Möglichkeit ein bestehendes Themes abzuändern, zu modifizieren oder zu optimieren ohne das eigentliche Basis Theme zu ändern.
Dazu wird in einem Unterordner eines bestehenden Themes ein Child Theme angelegt und als solches gekennzeichnet.

Alle Dateien die in diesem Unterordner hinterlegt werden, werden statt der Original- Dateien mit gleichem Namen genutzt, sobald das Child Theme aktiviert wurde. Legt man beispielsweise eine footer.php Datei an wird nicht mehr die Original- Datei vom “Eltern Theme” geladen, sondern die entsprechende Datei von unserem Child Theme. So kann man bestimmte Bereiche eines bestehenden Themes ändern, ohne an diesem direkt Änderungen vornehmen zu müssen.

Was ist der Vorteil von Child Themes?

Die Vorteile liegen dabei auf der Hand: Gibt es ein Update für das Parent Theme werden Änderungen nicht mehr überschrieben sondern bleiben separat im Child Theme erhalten.
Man kann also Abweichungen vom Original sauber getrennt in einem anderen Verzeichnis hinterlegen.

Ich selber nutze als Parent Theme ein eigens entwickeltes WordPress Framework mit allen Funktionen und Scripten die ich häufig und gerne einsetze. Ich kann dieses Theme separat pflegen und Optimierungen vornehmen.
Bei einem neuen WordPress Projekt kann ich dieses Theme als solide Basis einsetzen und mit einem Child Theme dann die eigentlichen Änderungen an Design und Layout vornehmen.

Dabei ist aber niemand gezwungen sich selber ein solides Parent Theme zusammen zubauen. Ein einfaches Basis Theme wie das allzeit beliebte Twenty Thirteen taugen bereits als Parent Theme.
Aber auch eine große Zahl professioneller Frameworks, wie Gantry, Thesis, Divi und Genesis (um nur einige zu nennen) sind am Markt erhältlich.

Ein Child Theme anlegen

Ein Child Theme anzulegen ist relativ simpel. Dazu muss nur ein neue Ordner im/themes/ Verzeichnis (<- Wichtig! NICHT im Verzeichnis des „Eltern“ Themes, sondern eben eine Ebene darüber) der WordPress Installation angelegt werden. Nennen wir ihn einfach mal /childtheme.
In diesem Verzeichnis muss eine style.css Datei hinterlegt werden mit folgenden Angaben:

/*
Theme Name: Child Theme
Template: twentythirteen
*/

“Theme Name” ist hierbei der Name des Child Themes welcher frei gewählt werden kann. Er dient nur der Identifizierung im WordPress Backend.
“Template” ist der Name des Parent Themes. Also das wichtigste an der ganzen Sache. Hier müsst ihr auf Leerzeichen, Groß- und Kleinschreibung achten. Am besten einfach den Verzeichnisnamen eures Parent Themes eintragen. Also nicht “Twenty Thirteen”, sondern eben “twentythirteen”.

Ist diese Datei erstmal angelegt kann bereits im WordPress Backend unter “Design” das entsprechende Child Theme aktiviert werden.

Nicht erschrecken: Da im Child Theme eine praktisch leere style.css Datei vorhanden ist und die Dateien des Child Themes ja ANSTATT derer des Parent Themes verwendet werden, führt die Aktivierung zu einer komplett “ungestylten” Seite.

Man kann jetzt alle CSS Klassen aus der eigentlichen style.css Datei in die neue Child Theme style.css Datei reinkopieren und die gewünschten Änderungen an diesen vornehmen.

Oder, etwas eleganter, per Import:
@import url("../twentythirteen/style.css");

die eigentliche Datei importieren. Dies macht insbesondere dann Sinn wenn man die Basis Styles im Großen und Ganzen behalten will und nicht das komplette Styling umkrempeln will. Hierdurch hat man dann auch den Vorteil das Änderungen an der style.css Datei des Parent Themes automatisch vom Child Theme geladen werden.

Alle CSS Klassen mit gleichem Namen die nach dem @import Aufruf eingefügt werden überschreiben die ursprünglichen Klassen.

Achtung!: Neue „Best Practice“ zum einbinden der Styles des Parent Themes und des Child Themes

Im WordPress Codex wird seit einiger Zeit davon abgeraten die style.css Datei des Parent Themes per @import zu laden. Es ist zwar nicht falsch, aber es geht noch etwas eleganter (und mit einem request weniger…) mit der „Enqueue“ Methode. Dazu einfach eine neue Datei im Stammordner des Child Themes mit dem Namen functions.php anlegen und hier volgenden PHP Code hinterlegen:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    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')
    );
}

Damit werden die beiden CSS Dateien bereits auf dem Server per PHP richtig „sortiert“. Das erst eine Datei im Browser aufgerufen wird und dann ihrerseits eine weitere Datei vom Server anfordert, entfällt bei dieser Methode.

Eine kleine Ausnahme

Die Dateien des Child Themes werden anstatt der Dateien des Parent Themes mit gleichem Namen geladen. Dies gilt für alle Dateien eines Themes mit der Ausnahme der functions.php Datei. Hier werden die Inhalte beider Dateien nacheinander geladen. In der functions.php Datei des Child Themes sollten also nur solche Funktionen hinterlegt werden, die im Child Theme ZUSÄTZLICH benötigt werden.

Fazit

Child Themes sind eine super Sache wenn es um Wartbarkeit, Wiederverwendbarkeit von Code, oder Trennung unterschiedlicher Bereiche geht. Sie machen es einem einfach schnell Änderungen vorzunehmen und wieder zurückzuschrauben wenn nötig. Komplett unterschiedlich gestaltete Versionen ein und der selben Internetseite können separat entwickelt und getestet werden.
Child Themes sind eine Erfindung die das Leben eines WordPress Entwicklers oder Theme Designers grundsätzlich vereinfachen können.

Bisherige Kommentare (Selber ein Kommentar hinterlassen)

  • […] etc. Die Arbeitsweise hier ist: Man läßt das Framework selber völlig unberührt und arbeitet mit Child Themes. Kurz gesagt: Ein Starter Theme ist wie ein frisch renoviertes, aber leeres Zimmer: Da muss noch […]

  • Frank sagt:

    Hi, danke für die Anleitung. Ich habe Travelify als Theme. Obwohl ich alles so mache, wie du es geschrieben hast, bekomme ich nicht die Ausgabe wie unter dem Haupttheme, sondern immer eine Optik ohne Hintergrundbild, ohne Widgets auf rechter oder linker Seite und auch ohne Formatierungen, wie Hintergrundfarbe der einzelnen Seitenaufteilung. Woran kann das liegen?? Ich habe sogar versucht, sämtliche css und php Dateien aus dem Verzeichnis des Themes zu übernehmen. Ändert aber nichts. Ich müsste nur einmal auf die neueste WordPressversion updaten, traue mich das aber natürlich so ohne Childtheme nicht. Hast du einen Rat, wo die Daten für Formatierungen hinterlegt sind? Wie gesagt, ich habe sogar alle Dateien rübergezogen in das Childtheme, aber auch dann keine Möglichkeit.
    Gruß Frank

  • Holger sagt:

    Hallo!
    Das ist im Prinzip beides das gleiche.

    Das komplette Beispiel aus dem Codex sieht so aus:

    < ?php
    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')
        );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    ?>

    Der einzige Unterschied ist das noch die Versionsnummer hinten dran gehängt wird um dem Brwoser Cache klar zu machen das er die neuste Version laden soll.

    Und ja, die Parent Theme Styles werden nach wie vor geladen. Normalerweise schreibst du in die Child Theme style.css ja nur das was du ändern/überschreiben willst.
    Beide werden geladen, erst das Parent Theme, dann das Child theme um eventuelle Werte zu überschreiben.

  • Rainer sagt:

    Noch eine Frage: Es funktioniert zwar mit Deinem Code bei meinem Theme, aber wo ist der Unterschied zu dieser Version https://codex.wordpress.org/Child_Themes welche ich in einigen anderen Tutorials gefunden habe? Wenn ich das richtig sehe, hast du noch

    wp_enqueue_style( ‚child-style‘,
    get_stylesheet_directory_uri() . ‚/style.css‘,
    array(‚parent-style‘)
    );
    }

    angefügt. Wird das Stylesheet so nicht nach wie vor extern geladen? Könntest du erklären wieso du das so gemacht hast?

  • Rainer sagt:

    Vielen Dank für das Tutorial! Nachdem es mit einer anderen Anleitung bei meinem Theme aufgrund falscher Darstellung nicht richtig funktioniert hat, klappt es jetzt!

  • Andreas Meyer sagt:

    Hi,
    du brauchst nicht schauen, ich habe den Fehler gefunden:
    get_stylesheet_directory-uri()
    Wenn man hinten einen Bindestrich statt einen Unterstrich in die Variable einbaut, muss sich keiner wundern. Das gibt dann eine weiße Seite, wo nichts mehr drauf ist.
    Danke dennoch.
    VG
    Andreas

  • Andreas Meyer sagt:

    Hi,
    ich konnte den code nicht richtig rüber bringen, er hat es verstümmelt.

    Versuche es nochmal mit Kommentarzeichen
    /*
    function theme_enqueue_styles() {

    wp_enqueue_style( ‚divi-style‘, get_template_directory_uri() . ‚/style.css‘ );
    wp_enqueue_style( ‚divi-gtruman-style‘, get_stylesheet_directory-uri() . ‚/style.css‘);
    }
    add_action( ‚wp_enqueue_scripts‘, ‚theme_enqueue_styles‘ );

    */

  • Andreas Meyer sagt:

    Hallo, ich habe das so gemacht – hier meine functions.php.
    get(‚Version‘);
    }
    add_action( ‚wp_enqueue_scripts‘, ‚theme_enqueue_styles‘ );

    ?>

    Jetzt wird nur noch eine weiße Seite angezeigt.
    Erst wenn ich die zweite Zeile mit wp_enqueue auskommentiere:
    //wp_enqueue_style( ‚gtruman-style‘, get_stylesheet_directory-uri() . ‚/style.css‘, array(‚divi-style‘), wp_get_theme()->get(‚Version‘);
    geht die Seite wieder. Offensichtlich überschreibt die Zeile dem child-theme-style auf so falsche Art das parent style sheet, das nichts mehr geht.
    Ich habe mir schon den Kopf zerbrochen. Siehst du evtl. etwas?
    Danke und Gruß
    Andreas

  • Holger sagt:

    Vermutlich wird eine andere/extra CSS Datei über die functions.php deines Child Themes geladen. Damit wird dann irgendwo etwas verzerrt. Ist natürlich nur eine Vermutung. Am besten mal genau in die functions.php werfen und gucken was damit gemacht wird. Wenn nichts drin steht was du brauchst, dann lass sie einfach aus dem Child Theme weg.

  • Sue sagt:

    Hallo,
    danke für die gute Anleitung, leider hab ich ein Problem mit der funktions.php

    Wenn ich das ganze ohne diese seite anlege, wird mein child theme korrekt angezeigt, mit jedoch völlig verzerrt.. Was mach ich falsch?

    LG

  • Holger sagt:

    Hängt von der genauen Fehlermeldung und der/den Funktionen ab die du in die functions.php des Child Themes geschrieben hast. Schon ein Leerzeichen zuviel am Anfang führt zu einem Fehler. Auch muss die Datei mit „

  • Hallo,

    Danke für den Artikel. Funktioniert bei mir nur teilweise.

    Ich habe in der eigentlichen Functions.pho Datei weitere Codes eingetragen, um mein Theme zu erweitern. Gibt es ein Theme Update wird das überschrieben. Jetzt will ich ein Child Theme einrichten und habe in der Child Function.php die Erweiterungen eingetragen. Mal am Anfang mal am Ende. Aber jedesmal funktioniert danach das Theme nicht mehr und mal sieht eine Fehlermeldung im Browser, sobald das Child-Theme aktiviert wird.

    Gibt es da noch einen weiteren Trick?

  • Holger sagt:

    Das geht von Haus aus nicht auf Theme Basis in WP. Dafür gibt es dann die Templates. Ich würde dass Parent Theme aktivieren und dort dann ein eigenes Templates anlegen. Dieses dann eine andere CSS Datei laden lassen. Dieses Template dann für die Seite oder den Eintrag auswählen.
    Oder, wie so häufig, gibt es für das nutzen verschiedener Themes gleichzeitig für unterschiedliche Seiten auch mehrere Plugins. Eines das ich auf die schnelle gefunden hab und gut aussah war: https://wordpress.org/plugins/jonradio-multiple-themes/

  • Super erklärt, hat super funktioniert, allerdings muss ich das Chldtheme dann aktivieren, wodurch das Hauptheme zwar gezogen wird, abe eigentlich deaktiviert wird. Wie kann ich das jetzt so einstellen, dass das Childtheme nur in den Seiten genutzt wird, in denen ich es will und nicht überall

    liebe Grüße
    Lars Pilawski

  • Holger sagt:

    Hm, kleine Checkliste:
    – Ist im Child Theme Ordner auch wirklich eine style.css vorhanden?
    – Ist in dieser:
    /*
    Theme Name: Child Theme
    Template: twentythirteen
    */

    eingetragen? Und ist dabei der „Template:“ Name mit dem tatsächlichen Theme Handle ersetzt worden? Diesen findest du in der style.css Datei des Parent Themes ganz oben unter „Theme Name“

  • Johanna sagt:

    vielen Dank für die hilfreiche Beschreibung!
    Ich habe alles so gemacht, wie es in der anleitung steht. Aber mein Childtheme ist trotzdem nicht unter Themes verwalten sichtbar. Was habe ich falsch gemacht?

  • Michael Kolb sagt:

    Danke für den Artikel. Hat mir sehr geholfen.

  • Holger sagt:

    Child Theme heißt ja nur das geänderte Daten die im Child Theme hinterlegt sind die des Parent Theme überschreiben. Wenn gerade das untersuchte Element nicht durch eine Datei aus dem Child Theme überschrieben wird, wird auch bei aktivem Child Theme die Datei des Parent Theme geladen. Beispiel: Du hast eine footer.php Datei im Verzeichnis des Parent Theme liegen, nicht aber im Verzeichnis des Child Theme. Dann wird immer noch die footer.php aus dem Parent Theme verwendet, obwohl das Child Theme aktiv ist.

  • Simon sagt:

    Hey,

    super Aritkel, hat mir sehr geholfen! Eine Frage blieb dabei nur offen; wie ändert man des verwendeten Theme? Wenn ich bei meiner Website beispielsweise ein Element untersuche steht dort immer noch mein Parent-Theme obwohl das Child-Theme aktiviert ist?

    Viele Grüße, Simon

  • Holger sagt:

    Ach ja, und wenn du andere PHP Dateien in deine functions.php einbinden willst nutz am besten:
    require get_template_directory() . '/folder/file.php';

    Kannst dann deine functions.php Datei in Einzelzeile zerlegen. Macht das ganze übersichtilicher und besser ist wartbar

  • Holger sagt:

    Mit der „Enqueue“ Methode wird über die functions.php Datei die richtige CSS (style.css) Datei geladen.
    Dann brauche ich kein @import mehr in einer CSS Datei zu machen. Es wird dann einmal automatisch die CSS Datei des Parent Themes geladen und danach die CSS Datei des Child Themes.
    Die eigenen CSS Änderungen hinterlegt man dann in der Child-Theme CSS Datei.

    Das Ganze ist für CSS oder JS Dateien gedacht um diese zentral zu verwalten und dynamisch zu laden. Hier ist der entsprechenden Artikel im WP Codex: https://codex.wordpress.org/Function_Reference/wp_enqueue_style

  • Daniel Gruber sagt:

    Danke für den Beitrag Holger.

    Vertehe noch nicht ganz ob die „Enqueue“ Methode nun für die function.php oder die style.css datei da ist.
    Kann ich dan direkt unter dem „Enqueue“ Code die function.php Änderungen platzieren. Und wo füge ich dan die Style.css Codes ein ?

    Wird derselbe „Enqueue“ Code auch für weitere php Datein verwendet z.B. footer.php, header.php usw.
    Wie ist da das Vorgehen ?

    Kann ich da bsp. @import url(„../twentythirteen/header.php“); nutzen ?

  • Thomas sagt:

    Danke für die gute Beschreibung. Hat auf Anhieb funktioniert!

    Schöne Grüße!

  • Holger sagt:

    Hallo!
    Das könnte daran liegen wie die Stylesheets eingebunden wurden.
    Nutzt man:
    < ?php echo get_template_directory_uri(); ?>
    wird der Pfad zu dem Stylesheet des PARENT Themes verwendet. Dies sollte also nur verwendet werden wenn auf css Dateien des Eltern- Themes zugegriffen werden soll.
    Nur mit:
    < ?php echo get_stylesheet_directory_uri(); ?>
    wird auf das Verzeichnis des wirklich aktuell aktiven (Child-) Themes verwiesen. Dies sollte verwendet werden wenn auf individuelle Dateien des Child Themes zugegriffen wird.

    Macht man es jetzt umgekehrt sucht das Child Theme nach individuellen Styles im Verzeichnis des Parent Themes und findet natürlich nichts.

    Daher am besten die functions.php oder header.php (oder wo auch immer dein Theme die CSS Dateien des Child Themes läd) überprüfen und ggf. anpassen.

  • Heike sagt:

    vielen Dank für die gute Beschreibung! Hat mir sehr weitergeholfen!
    Nach dem Hochladen der Dateien auf den Server wird allerdings das Layout nicht dargestellt – ich nehme an, dass die css des childs nicht geladen wird. Gibt es dazu eine Idee, was schief gelaufen sein könnte?

    Danke


Kommentar schreiben (* Pflichtfelder)