Anleitung: Ein WordPress-Child-Theme anlegen

Dieser Artikel ist veraltet. Hier geht es zur neuen, aktualisierten Version

Ein WordPress-Theme an die eigenen Bedürfnisse anzupassen ist gar nicht so schwer. Den Löwenanteil der 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 könnt Ihr einfach so bearbeiten, aber geschickter ist es, 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. So ist es leichter, die Änderungen nachzuhalten.

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

[white_box]Update: Bei den Kollegen von Elmastudio könnt Ihr seit Neuestem zu jedem Theme einen fertigen Childthemeordner herunterladen. Darin enthalten sind ein Bild für das Childtheme und eine CSS-Datei. Dadurch entfällt der erste und der zweite Schritt.[/white_box]
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 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:
*/
@import url("../Name_des_Parent-Theme-Ordners/style.css");

Erklärungen zum Codebeispiel

In der Zeile 2 steht der Name des Childthemes. Dieser Name erscheint dann auch im WordPress-Dashboard unter Design/Themes.
Die wichtigsten Informationen stehen in Zeile 6 und 10:
1. Der Name des Verzeichnisses, in dem Eurer Parent-Theme liegt
2. Der Pfad zum Stylesheet des Parent-Themes
Über den letztgenannten Pfad werden die Styles aus dem Parent-Theme in das Childtheme importiert. Eure CSS-Angaben schreibt Ihr dann einfach darunter. Die Styles aus dem Parent-Theme werden dadurch überschrieben und durch Euer Design ersetzt.

Ein Beispiel

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

/*
Theme Name: Twentytwelve Child
Description: Ein schönes Childtheme
Author: Kirsten Schelper
Author URI: http://www.schelperdesign.net
Template: twentytwelve
Version: 1.0
Tags:
*/
@import url("../twentytwelve/style.css");
/*hier kommen die neuen CSS-Angaben*/

 

Schritt 2: Das Childtheme im Backend

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

Bildschirmfoto 2013-06-18 um 11.25.42

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 300px mal 225px 600px mal 450px und den Namen screenshot.png haben. WordPress zeigt dann das Bild im Backend an:

Bildschirmfoto 2013-06-18 um 11.32.12

Das Theme könnt Ihr wie jedes andere aktivieren. So lange noch nichts in der style.css im Childtheme-Ordner drinsteht, sieht das Childtheme im Frontend exakt so aus wie das Parent-Theme.

Schritt 3: Das Theme bearbeiten

Ä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 kopiert Ihr die footer.php-Datei und legt sie in das Childtheme-Verzeichnis. Anschließend könnt Ihr diese Datei mit dem Texteditor öffnen und bearbeiten. WordPress zeigt Eure Änderungen nach einem Reload der Seite an.

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.
simonox/istockphoto.com

23 Kommentare zu “Anleitung: Ein WordPress-Child-Theme anlegen

  • Danke für die Anleitung. Das werde ich mir mal in die „digitale Ablage“ legen, da ich die Sache mit dem Child Theme schon immer mal selbst ausprobieren wollte. Bin gespannt, ob es funktioniert..ansonsten werd ich wohl nochmal „nerven“ müssen ;_)

    LG

    • Hallo, Jasmina,
      Du bist herzlich eingeladen zu nerven ;-)

      Liebe Grüße von Kirsten

  • Hallo Kirsten,

    zwei kleine Ergänzungen:
    Die screenshot.png muss nach dem Redesign mit WordPress 3.8 etwas größer sein, vor allem, wenn man auch ein Retina-taugliches Bild haben möchte:
    http://codex.wordpress.org/Theme_Development#Screenshot

    Und bei der Anpassung sollte unbedingt der Sonderfall mit der functions.php bedacht werden. Diese Datei wird nicht nur zusätzlich geladen statt überschrieben zu werden, sie wird auch *vor* der functions.php aus dem Eltern-Theme geladen:
    http://codex.wordpress.org/Child_Themes#Using_functions.php

    Ansonsten wieder mal ein toller Einstiegsartikel. Sehr praktisch zum Verlinken im Forum. Danke!

    • Kirsten 20. Mai 2014

      Danke Dir! Screenshotmaße sind korrigiert. Ich hätte geschworen, die functions.php vom Childtheme wird nach der des Parentthemes geladen, aber im Codex steht es schwarz auf weiß, das es so ist, wie Du sagst. Ich hab das mal zusammengeschrieben.

  • Hallo Kirsten,
    danke für deine super ausführliche Anleitung. Ich würde gerne vom Twenty Twelve Theme ein Child Theme erstellen und komme bei deinem ersten Schritt bereits ins Stocken.
    „Im Verzeichnis wp-content/themes ein neues Verzeichnis an. Dieser Ordner liegt auf derselben Ebene wie der Ordner Eures Parent-Themes“.
    Kannst du mir auf die Sprünge helfen, wie ich in das Verzeichnis wp-content/themes komme? Wenn ich bei mir in WordPress unter Design/Themes gehe, sehe ich kein Verzeichnis?
    Ich freue mich auf deine Antwort.
    Einen schönen Sonntag.
    Anna

    • TheMistress 26. Mai 2014

      Hallo, Anna,

      vielen Dank für deine Frage. Für diese Aktionen (Verzeichnis anlegen etc.) brauchst Du ein FTP-Programm, aus dem WordPress Backend heraus klappt das nicht. Ich hatte das im Text erwähnt, aber offenbar nicht deutlich genug. Ich habe das jetzt ein bisschen ausführlicher erklärt.

      Schöne Grüße

      von Kirsten

  • Hallo Kirsten, danke für Deine Anleitung zum Anlegen eines Child Themes. Bin noch sehr neu im Umgang mit WP. Leider bin ich auf die Notwendigkeit eines Child Themes erst aufmerksam geworden nachdem ich bereits einige Änderungen in der style.css vorgenommen habe. Kann ich nicht einfach die style.css aus dem Parent in das Child kopieren? LG Nikki

    • Kirsten 27. Mai 2014

      Hallo, Nikki,
      schau Dir den Schritt 1 nochmal genau an. Hier ist erklärt, wie die Styles aus dem Parenttheme in die style.css Deines Childthemes kommen. Nämlich über die @import-Funktion, die die Styles aus dem Parenttheme in Dein Childtheme importiert. Du musst also nicht per copy&paste arbeiten, @import erledigt das für Dich.

      Schöne Grüße

      Kirsten

  • Hallo Kirsten, danke für Deine rasche Antwort. Ich habe jedoch VOR dem Anlegen des Child Theme bereits Änderungen im style.css des Parent Theme vorgenommen. Die Originaldateien im Parent Theme sind damit geändert. Was passiert dann beim Update? LG Nikki

  • Hallo Kirsten, ich hätte noch eine Frage:
    1. Wie kann ich den Abstand zwischen Navigation und Seitenüberschrift ändern?
    Danke für Deine Hilfe und LG Nikki

  • /*
    Hallo Kerstin, so habe ich das Child Theme angelegt. Ist das so richtig?

    Theme Name: Twenty Eleven Child
    Author: Nikki Urbanetz
    Author URI: http://gatto-moebel.com
    Description: Child Theme Gatto
    Version: 1.0
    Template: twentyeleven
    Tags: Gatto
    */
    @import url(„../twentyeleven/style.css“);

    Vielen Dank und LG Nikki

  • Phan Duc 11. Juni 2014

    Hallo Kirsten,
    erstmal vielen Dank für deine tolle Anleitung. Ich bin auch noch super NEU mit wordpress und entschuldige mich schon mal vorab, falls ich nicht gleich alles auf Anhieb verstehe.

    Vorgestern zum ersten Mal WordPress installiert. Standard Theme Twenty Twelve übernommen und per FTP nach Anleitung ein Child Theme erstellt. Aber irgendwie übernimmt das Child Theme die Darstellung fehlerhaft. Trotz @import url:(../twentytwelve/style.css); …. und das mit fuction.php habe ich leider nicht verstanden. Lege ich nur eine leere function.php – Datei an oder kommt da noch etwas rein?

    Ich danke vielmals für weiterführende Tips.

    Grüße
    Duc

    • TheMistress 11. Juni 2014

      Halo, Phan Duc, eine spontane Idee hätte ich dazu: Schau doch mal nach, ob in der style.css im Chilthemeordner oben im Kopf auch wirklich Template: twentytwelve steht.

      • Phan Duc 12. Juni 2014

        Hi TheMistress,
        danke für dein Hinweis. Ich habe es noch einmal geprüft und da steht twentytwelve. Das Child Theme wird ohne jegliche Formatierung angezeigt. Als ob es die CSS-Datei des Parent Theme nicht laden kann.

        Meine CSS-Datei:
        Theme Name: twentytwelve Childtheme
        Description: modifiziertes twentytwelve
        Author: Phan Duc
        Author URI: http://www.xyz.de
        Template: twentytwelve
        Version: 1.0
        Tags:
        */
        @import url(„../twentytwelve/style.css“);

  • Phan Duc 12. Juni 2014

    Ergänzung:
    Ich habe es mal mit Twenty Thirteen probiert und es klappt auf Anhieb. Also musst es wohl einen besonderen Haken bei Twenty Twelve geben. Ich bin über für jeden Tipp dankbar.

    Beste Grüße

  • Hallo liebe Kirsten,

    was mich umtreibt, ist die Frage, wie ich Modifizierungen an den Original-php-Dateien in ein child theme einbinden kann, dies soll via functions.php möglich sein. Ein Beispiel: Die originale index.php habe ich um eine weitere div-Klasse ergänzt.

    Wenn ich die gesamte index.php kopiere, habe ich nichts von Updates des parent themes.

    LG Petra

    • TheMistress 30. Juni 2014

      Hallo, Petra, wenn Du etwas an einer Template-Datei ändern möchtest, dann duplizierst Du die Datei einfach und speicherst sie im Childtheme-Ordner ab. In Deinem Fall wäre das die index.php, davon machst Du eine Kopie und legst sie in den Childtheme Ordner. Sie muss dann weiterhin index.php heißen, also nix mit index-kopie.php oder so.
      An der Datei kannst Du dann Deine Änderungen vornehmen.

  • Hallo TheMistress,

    beim bloßen Kopieren laufen Updates des parent themes aber an meiner index.php vorbei.

    VG

    • Nein, das ist schon richtig so. Die index.php im Childtheme wird vorrangig behandelt und „überschreibt“ die index.php im Parent-Theme. Die Aktualisierungen im Parent-Themes dürfen weiter stattfinden, Dein Childtheme bleibt davon unangetastet.

  • Hallo Kirsten,

    genau das soll nicht geschehen. Vielmehr will ich nur den „Schnipsel“, den ich verändert habe, im child theme. Dafür soll es hooks geben (get_template_part). Aber ich verstehe nicht, wie man daraus einen Code für die functions.php schreibt.

  • Hallo! Danke für die super Anleitung, habe alles wie beschrieben gemacht. Wenn ich jetzt allerdings das Child Theme lade, habe ich nirgens mehr die richtigen Umaute, auch nicht im Dashboard.

    Habe bereits ein bisschen gegoogelt und kam auf den Punkt mit der UTF-8 without BOM Codierung, das ist aber bei mir alles richtig eingestellt bei jeder Datei.

    Woran kann das Umlautproblem denn noch liegen? Wechsle ich wieder ins Parent Theme, ist wieder alles ok….

    Viele Grüße
    Simone

    • Hallo, Simone,
      hm. den Fehler kenne ich nicht.
      Welches Theme ist denn Dein Parenttheme?

      Schöne Grüße von Kirsten

      • Hi! Danke für die schnelle Antwort! Mein Parenttheme ist Twentythirteen. Es lag aber glaube ich daran, dass ich versucht habe die language Dateien (MO und PO) auch zu kopieren. Jetzt habe ich die rausgelöscht und es funktioniert :)

        Danke!

Die Kommentare sind geschlossen.