Anleitung Childtheme anlegen (Update)

Dies ist eine überarbeitete Version des Artikels „Ein WordPress-Child-Theme anlegen“

Torsten Landsiedel hat auf dem WordCamp Köln 2015 einen sehr spannenden Vortrag gehalten: „Das Childtheme Dilemma“. Darin hat er gezeigt, in welche Fallen man tappen kann, wenn man mit Childthemes arbeitet. Diesen Vortrag habe ich zum Anlass genommen, die Childthemes-Anleitung hier im Blog endlich mal zu aktualisieren.

Ein WordPress-Theme an die eigenen Bedürfnisse anzupassen ist gar nicht so schwer. Die meisten Anpassungen kann man über die CSS-Datei des Themes umsetzen. Bei WordPress hat diese Datei immer den Namen style.css. Man findet sie auf der obersten Ebene des Theme-Ordners.

Das Stylesheet (style.css) im WordPress Theme könnt Ihr in einem Editor wie Textmate (Mac), Notepad (Windows) oder Coda (Mac) bearbeiten. Besser ist es aber, Ihr arbeitet mit einem Childtheme. Ein Childtheme ist ein kleiner Ableger des Original-Themes, das damit zum Parent (=Eltern)-Theme wird. Der Vorteil dabei: Das Eltern-Theme bleibt wie es ist und wird nicht angetastet. Wenn also mal etwas schiefgeht beim Basteln, dann ist nicht gleich das ganze Theme kaputt. Und wenn die Entwickler des Themes ein Update zur Verfügung stellen, könnt Ihr das Parent-Theme updaten, ohne dass Eure Anpassungen überschrieben werden.
Im Childtheme-Ordner liegen nur die Dateien, die tatsächlich verändert wurden. Das macht es leichter, die Änderungen nachzuhalten.

Voraussetzung: Zugriff via FTP

Um die folgenden Schritte auszuführen, braucht Ihr ein FTP-Programm. Aus dem WordPress Backend heraus ist das nicht machbar. Über FTP könnt Ihr direkt auf Euren Server zugreifen, auf dem Eure WordPress-Installation liegt. Ihr braucht dazu Zugangsdaten zu Eurem Server (beim Provider erfragen) und ein FTP-Programm.
Ich arbeite sehr gerne mit Transmit von Panic, ein gutes kostenloses Opensource-Programm ist FileZilla. Jetzt braucht Ihr eigentlich nur noch einen Texteditor (nicht MS Word!), mit dem Ihr die Dateien bearbeiten könnt.

Schritt 1: Den Childtheme-Ordner anlegen

Zuerst legt Ihr im Verzeichnis wp-content/themes ein neues Verzeichnis an. Dieser Ordner liegt auf derselben Ebene wie der Ordner Eures Parent-Themes. Ihr könnt den Ordner ganz nach Belieben benennen, es sollten jedoch keine Leerzeichen und Umlaute im Namen vorkommen.

In den Childtheme-Ordner hinein legt Ihr eine neue, leere Datei namens style.css. Das könnt Ihr über Eurer FTP-Programm machen oder Ihr erzeugt die Datei auf dem Desktop-Rechner und ladet sie dann per FTP hoch. In diese Datei müsst Ihr nun ein paar Zeilen Code eintragen, damit WordPress das Verzeichnis samt style.css als Euer neues Childtheme erkennt.

/*
Theme Name: Das neue Childtheme
Description: Ein schönes Childtheme
Author: Kirsten Schelper
Author URI: http://www.schelperdesign.net
Template: Name_des_Parent-Theme-Ordners
Version: 1.0
Tags:
*/

In der Zeile 2 steht der Name des Childthemes. Dieser Name erscheint dann auch im WordPress-Dashboard unter Design/Themes. In Zeile 6 steht der Name des Verzeichnisses, in dem Eurer Parent-Theme liegt.

Beispiel für eine Childtheme CSS-Datei

Angenommen, Ihr wollt eine Variante vom Standardtheme Twenty Fifteen machen. Euer Childtheme soll „Twentyfifteen Child“ heissen. Dann sieht der Code in der style.css so aus:

/*
Theme Name: Twentyfifteen Child
Description: Ein schönes Childtheme
Author: Kirsten Schelper
Author URI: http://www.schelperdesign.net
Template: twentyfifteen
Version: 1.0
Tags:
*/

Schritt 2: Das CSS des Elternthemes mit dem Childtheme verknüpfen

Damit das Childtheme funktionieren kann, brauchen wir noch eine weitere Datei in unserem Childtheme-Ordner. Die Datei hat den Namen functions.php.

Update: Bitte nicht die functions.php aus dem Parent-Theme kopieren. Ihr müsst eine neue, leere Datei anlegen. Die Datei ist eine PHP-Datei und muss deshalb mit dem entsprechenden PHP-Tag beginnen:

<?php

/* Hier kommen die functions für mein Child-Theme */

In dieser Datei binden wir das Stylesheet der Childthemes ein und zwar so, dass es nach der style.css des Parent-Themes geladen wird. Wäre die Reihenfolge anders herum, würden wir unsere Änderungen im Childtheme nicht sehen, weil das CSS vom Childtheme vom Parent-Theme überschrieben würde.

function twentyfifteen_child_styles() {
wp_deregister_style( 'twentyfifteen-style');
wp_register_style('twentyfifteen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style('twentyfifteen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style( 'childtheme-style', get_stylesheet_directory_uri().'/style.css', array('twentyfifteen-style') );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_child_styles' );

Update: Ich habe das Codebeispiel geändert und es etwas ausführlicher gemacht.
Bei manchen Themes, die mit mehreren CSS-Dateien arbeiten, kann es nämlich nötig sein, zuvor die CSS-Dateien des Eltern-Themes zu deregistrieren und noch einmal neu zu registrieren. So stellt man sicher, dass die Reihenfolge stimmt, in der die Styles geladen werden – Eltern-Theme zuerst, erst danach die vom Childtheme.
In der oben gezeigten Funktion wird zuerst das CSS des Eltern-Themes geladen. Das erreicht man dadurch, dass man dem Child-CSS eine dependency (Abhängigkeit) zuweist, nämlich das Parent-CSS. Im Codebeispiel ist das der Teil, der in dem array steht:

array('twentyfifteen-style')

Was genau in dem array stehen muss, ist natürlich von Theme zu Theme verschiedenen. Bei Twentyfifteen heisst der handle, mit dem die Styles eingebunden werden, ‚twentyfifteen-style‘. Zu finden ist diese Information in der functions.php von Twentyfifteen in Zeile 209.

Bildschirmfoto 2015-06-13 um 14.28.24

Wie das handle, also der Name, der dem Styles des Eltern-Themes mitgegeben wurde –genau heisst, müsst Ihr also in der functions.php von Eurem Eltern-Theme nachgucken. Wenn diese Angabe nicht stimmt, wird das CSS nicht richtig geladen.

Früher hat man die style.css des Parent-Themes per @import direkt im CSS des Childthemes eingebunden. Das ist inzwischen aber nicht mehr zu empfehlen, siehe WordPress Codex. Die Styles können so schneller, weil ein einem Stück, geladen werden.

Schritt 3: Das Childtheme im Backend

Wenn Ihr Euch jetzt in das Backend Eurer WordPress-Seite einloggt, erscheint dort das neue Childtheme.

Childtheme-ohne Screenshot

Das sieht noch ein bisschen traurig aus – damit beim Childthemes ein Bild erscheint, müsst Ihr eine Bilddatei in das Childtheme-Verzeichnis legen.
Die Datei sollte die Größe 600px mal 450px und den Namen screenshot.png haben. WordPress zeigt dann das Bild im Backend an:

Childtheme-mit Screenshot

Das Theme könnt Ihr wie jedes andere aktivieren.

Schritt 3: Das Theme bearbeiten

Eure Änderungen im CSS des Themes tragt Ihr in die Datei style.css des Childthemes ein.
Wenn Ihr etwas in den Theme-Templates ändern möchtet, kopiert Ihr das Template, das Ihr verändern möchtet, vom Parent-Theme-Verzeichnis in das Childtheme-Verzeichnis.

Angenommen, Ihr wollt die Copyright-Angaben „Proudly Powered by WordPress“ in der footer.php-Datei ändern. Dazu macht Ihr eine Kopie der footer.php-Datei und legt diese Kopie in das Childtheme-Verzeichnis. Anschließend könnt Ihr die footer.php mit dem Texteditor öffnen und bearbeiten.

So könnt Ihr im Prinzip mit allen Template-Dateien (header.php, page.php, single.php etc.) verfahren. WordPress überprüft, welche Templates im Child-Theme-Verzeichnis vorhanden sind und verwendet automatisch die Dateien aus dem Childtheme-Verzeichnis.

Zusammenfassung

Um ein Childtheme anzulegen, sind folgende Schritte notwendig:

  1. Ein neues Verzeichnis für das Childtheme anlegen und benennen (Name frei wählbar).
    Das Verzeichnis muss auf derselben Ebene liegen wie das Verzeichnis des Elternthemes.
  2. Im Childtheme-Verzeichnis eine leere Datei anlegen und diese Datei style.css nennen.
  3. In die style.css die Zeilen für den CSS-Header (siehe Beispiel für eine Childtheme CSS-Datei) einfügen.
    Dabei darauf achten, dass hinter „Template“ exakt der Name (slug) des Verzeichnisses des Elternthemes steht.
  4. Eine leere Datei anlegen und diese functions.php nennen.
  5. Im Childtheme die Datei functions.php anlegen und dort den Code eintragen, der für die Einbindung/Verknüpfung der CSS-Dateien aus Eltern- und Childtheme sorgt (siehe Schritt 2: Das CSS des Elternthemes mit dem Childtheme verknüpfen).
  6. Jetzt ist das Childtheme einsatzfähig und im Backend auswählbar.
    Wer Lust hat, legt noch einen Screenshot (screenshot.png) ins Childtheme-Verzeichnis.
    Dann sieht es im Backend in der Themeauswahl hübscher aus.

Das Child Theme Dilemma

Stimmt, da war noch was. Wie Torsten in seinem Vortrag gezeigt hat, kann man sich mit einem Childtheme auch Probleme einkaufen. Und zwar genau an der Stelle, wo das Childtheme eigentlich seine Stärken hat: Kommt ein Update vom Eltern-Theme, kann man das problemlos durchführen, ohne dass im Childtheme etwas durcheinander gerät. Alle Änderungen, die man gemacht hat, bleiben erhalten und die Seite sieht genauso aus wie vorher.

Sicherheitslücken werden konserviert

Aber nicht nur Änderungen bleiben erhalten. Angenommen, man hat ein Template für das Childtheme verändert, die oben genannte footer.php oder die header.php. Dazu dupliziert man das Template duplizieren und legt die Kopie in den Childtheme-Ordner. WordPress erkennt, dass im Childtheme eine header.php liegt, und lädt diese Datei und nicht die aus dem Eltern-Theme.

Was aber passiert, wenn im Theme eine Sicherheitslücke steckt? Sobald der Fehler dem Theme-Autor zu Ohren kommt, macht der sich ans Werk, beseitigt den Fehler und stellt ein Update des Themes zur Verfügung. In der Regel erscheint dann eine Update-Meldung im WordPress Backend, wir klicken auf „aktualisieren“ und unser Eltern-Theme ist wieder auf dem neusten Stand.

Dumm nur, wenn der Fehler in einer der Template-Dateien steckte, die wir in unsere Childtheme kopiert haben, zum Beispiel in der header.php. Denn da sitzt er dann immer noch, der Fehler, auch wenn das Eltern-Theme nach dem Update fehlerfrei ist. Das ist eine ziemlich dumme Sache.

Das Plugin Template Checker

Aber Torsten hat aber nicht nur gemeckert, er hat auch gleich eine Lösung vorgeschlagen. Mit dem Plugin Template Checker kann man sich gegen solche Fallen absichern. Das Plugin guckt nämlich nach, ob im Childtheme Ordner veraltete Template-Dateien liegen und spuckt eine Warnung aus.

Das Plugin ist momentan noch in der Entwicklung, aber so wie ich Torsten und die Jungs kenne, ist es schon so gut wie fertig.

15 Kommentare zu “Anleitung Childtheme anlegen (Update)

  • Hallo Kirsten,

    kann es sein, dass in Deiner Anleitung ein kleiner Bug ist ?
    Du schreibst: „Die wichtigsten Informationen stehen in Zeile 6 und 10:“

    Der Inhalt der style.scc ist dich aber nur 9 Zeilen lang ?
    Ich vermisse dort den @import url …….

    Zu der Funktion.php:
    müssen da nur die von Dir angegebenen Zeilen rein ?
    Was genau muß auf das eigene child-Theme angepasst werden ?

    Gruß
    X-GER

    • Danke für den Hinweis, das mit Zeile 9 war noch ein Satz aus dem alten Text. Ich habe leider Deine Frage nicht ganz verstanden. Kannst Du es nochmal versuchen?

  • Hallo Kirsten,

    meine Frage bezieht sich auf die anzulegende function.php.

    Folgende Zeilen soll die function.php laut der Anleitung beinhalten:

    function child_styles() {
    wp_enqueue_style( ‚childtheme-style‘, get_stylesheet_directory_uri().’/style.css‘, array(‚parenttheme-style‘), ‚YOUR_THEME_VERSION‘ );
    }
    add_action( ‚wp_enqueue_scripts‘, ‚child_styles‘ );

    Muß nun „NUR“ an der Stelle wo Du „YOUR_THEME_VERSION“ schreibst, der Name meines Child-Theme (twentytwelve-child) eingetragen werden … sonst keine weiteren Änderungen ?

    Ich frage deshalb, weil ich das so gemacht habe und beim Aktivieren des Child-Theme eine Fehlermeldung erhalte :-(

    Vorab vielen Dank.

    • Ich habe den Artikel noch einmal überarbeitet. Ich hoffe, es wird jetzt deutlicher, was zu tun ist. Die Theme Version ist nicht wichtig, ich habe den Teil der Übersichtlichkeit halber weggelassen. Wichtig ist, dass der korrekte handle (Namen) vom Elterntheme-CSS in der Funktion steht (s. Erklärung im Artikel).

  • Hallo Kirsten,

    sorry, nun ist die Verwirrung leider komplett :-(

    Du schreibst in Deinem Blog von einem Child-Theme für das Theme twentytwelve und bringst dann im Beispiel twentyfifteen …
    Sind beide Themes vom Aufbau her gleich ?

    Wenn ich in Sachen WordPress zu „frisch“ bin, bitte ich um Nachsehen … aber ich bin ehrgeizig und möchte das sehr gerne mit Hilfe Deines Blogs hinbekommen !

    Darf ich mal kurz zusammenfassen:

    – neuen Ordner „twentytwelve-child“ erstellen
    – dort eine leere style.css anlegen
    – in die style.css folgende Zeilen einfügen:

    /*
    Theme Name: twentytwelve-child
    Description: Ein schönes Childtheme
    Author: Kirsten Schelper
    Author URI: http://www.schelperdesign.net
    Template: twentyttwelve
    Version: 1.0
    Tags:
    */

    – screenshot anlegen
    – dann eine Datei names functions.php erstellen (oder kann ich hier auch eine Kopie von der Original functions.php nehmen, die ich dann modifiziere ?

    Welchen kompletten Inhalt muß die functions.php enthalten ?

    So heißen die Ordner bei mir:
    Original = twentytwelve
    Child = twentytwelve-child

    Ich würde mich sehr freuen, wenn „wir“ das hinbekommen würden.

    Viele Grüße

    • Bitte nicht die functions.php aus dem Parent-Theme kopieren. Das Child-Theme bekommt eine eigene functions.php. Ich habe den Artikel entsprechend ergänzt.

  • Hallo Kirsten,

    herzlichen Dank für das tolle Tutorial. Ich bin fast verzweifelt, weil mein child-CSS immer vor dem parent-CSS eingebunden wurde. Das mit der enqueue-function ist mir erst bei deinem Tutorial so richtig klar geworden.

    Viele Grüße,
    Tobse.

  • Hi, bin fast am Verzweifeln. Ich bekomm das mit den Childthemes nicht hin. damit es bei mir im Backend auftaucht muss ich die datei erst zippen und dann hochladen. Dann jedoch übernimmt es nicht die Änderungen in der Style.css die ich darin abgespeichert habe und an nachträgliche Änderungen ist auch nicht zu denken.
    Wie gesagt, ich bin ratlos da weder das mit der @url Anweisung in der Css noch die Empfohlene Variante mit der functions.php zu funktionieren scheint.

    • Wenn Du Das Childtheme hochgeladen hast (als zip-Archiv), erscheint das Theme dann in deiner Themeauswahl? Kannst Du es aktivieren?

  • Hey,

    Danke für den Artikel! Wäre die Sache mit dem Handle nicht, wäre es wesentlich einfacher. Bei meinem Theme war der nämlich nicht direkterweise in der functions.php, sondern in einer, individuell für das Theme erstellten Datei.

    Könntest du das fehlende „<?php" der functions.php noch im -Kasten hier auf der Seite ergänzen? Ich habe erst beim Testen des Childthemes bemerkt, dass es einen Fehler produziert. Das könnte auch das angesprochene Problem bei X-GER gewesen sein (siehe 1. Post von X-GER). Den Hinweis darauf in der Zusammenfassung habe ich gerade eben noch entdeckt.

    Thx

    • Hallo, Michael,

      jede PHP-Datei beginnt mit einem

      < ?php

      Dieses Tag steht ganz an Anfang der Datei, damit wird die Datei als PHP-Datei erkannt. Auch die functions.php beginnt damit.
      Bei PHP-Syntax muss man ein bisschen aufpassen. Die PHP Tags umschliessen PHP-Code-Abschnitte bzw. ganze Dateien.

      < ?php //hier steht der PHP-Code ?>

      An der falschen Stelle platziert oder nicht richtig angewandt erzeugen diese Tags massive Fehler.
      Deshalb habe ich ganz bewusst die PHP-Tags in den Snippets weggelassen, weil das zu Problemen führen würde, wenn Leute die Code-Schnipsel per cut&paste kopieren und einsetzen.

      Schöne Grüße

      von Kirsten

  • Hallo Kirsten,
    erstmal danke für Deine Anleitung. Ein kleines Problem habe ich jedoch mit der Versionsnummer. In meiner style.css habe ich Versionsnummer 1.0 vergeben. Bei der Aktivierung meines Child-Themes (basierend auf twentyfifteen) will er ein Update auf die Versionsnummer des Parent-Themes machen. Wie kann ich das denn verhindern?
    Viele Grüße
    Christian

    • Nachtrag:
      Wenn ich
      add_filter(’site_transient_update_themes‘, ‚remove_update_themes‘, 100, 1);

      function remove_update_themes($value) {
      return null;
      }
      in meine functions.php reinschreibe, löse ich das Problem zwar, gefällt mir aber irgendwie nicht so …

    • Hallo, Christian,

      bitte entschuldige, dass ich nicht eher geantwortet habe. August war Ferienzeit und ich war mal nicht am Rechner.
      Wo trägst Du die Versionsummer ein, wie sieht der header Deiner style.css aus?
      Ich vermute mal, dass das Parent-Theme sich angesprochen fühlt, weil sich die Versionsnummer so wie Du sie eingetragen hast auf das Parent Theme (und nicht aufs Childtheme) bezieht.
      Die Funktion würde ich wieder rausnehmen. Die unterdrückt die sämtliche Updates von Themes. Das ist nicht sinnvoll.

      Schöne Grüße

      Kirsten

Die Kommentare sind geschlossen.