Anleitung: Ein WordPress-Child-Theme anlegen

Dieser Artikel ist ursprünglich am 16. 05. 2014 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist womöglich nicht mehr ganz aktuell.

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

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

12 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, 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

  • 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 TheMistress,

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

    VG

Die Kommentare sind geschlossen.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.