Willkommen im Blog ʕ•ᴥ•ʔ

Tutorial: Ein WordPress-Child-Theme erstellen

Seit Version 3.0 bietet WordPress die Möglichkeit an, Child-Themes einzusetzen. Diese sind nicht nur für Theme-Entwickler interessant: Da mittlerweile auch Themes über den Admin-Bereich ganz einfach per Mausklick aktualisiert werden können, helfen Child-Themes dabei, durchgeführte Änderungen (CSS, PHP) beizubehalten — ansonsten werden sie mit dem nächsten Theme-Update wieder auf Null gesetzt. :/

Wer ein Theme bearbeiten/individualiseren möchte, sollte unbedingt ein Child-Theme anlegen.

Was können Child-Themes?
Child-Themes nutzen standardmäßig die Funktionen von Parent-Themes, d.h. sie sind von ihnen abhängig — ein Child-Theme braucht immer auch ein Parent-Theme.
Was genau vom Parent übernommen wird hängt davon ab, welche Funktionen das Child selbst bereitstellt. Besitzt das Child-Theme keine eigene functions.php, so wird die functions.php des Parent-Themes genutzt. Andersherum wird eine bestehende functions.php des Childs zusätzlich zur functions.php des Parents geladen.

Ein eigenes Child-Theme erstellen
Child-Themes lassen sich mit wenig Zeitaufwand ganz flugs selbst erstellen. In der Minimalversion wird lediglich eine eigene style.css benötigt. Probieren Sie es aus:

Erstellen Sie eine Datei namens style.css und definieren Sie einen WordPressP-üblichen Header. Hier ein Beispiel:

/*
Theme Name: Child-Beispiel
Template: twentyeleven
Theme URI: http: //beispiel.de/
Description: Ein Child für das twentyeleven-Theme 
Author: Hier kommt Ihr Name hin
Author URI: http: //beispiel.de/mein-child-theme/
Version: 1.0
*/

@import url('../twentyeleven/style.css');

Die Elemente Theme Name, Theme URI, Description, Author, Author URI und Version können mehr oder weniger beliebig bezeichnet werden. Lediglich das Element Template muss exakt den gleichen Namen des Parent-Themes haben. In unserem Beispiel ist dies twentyeleven, das Standard-Theme von WordPress 3.0. Wenn ein anderes Theme als Parent gebraucht wird, muss twentyeleven durch den Name des entsprechenden Themes ersetzt werden.

Die Angabe von @import url stellt sicher, dass die style.css des Parent-Themes eingebunden wird. Wenn Sie lieber mit einem leeren Stylesheet arbeiten möchten, entfernen Sie die letzte Zeile.

Die neu erstellte style.css verschieben Sie nun in einen ebenfalls neuen Ordner. Dieser muss den gleichen Namen haben wie unter Theme Name angegeben. Der Ordner wird anschließend in das Theme-Verzeichnis der WordPress-Installation kopiert (/wp-content/themes/). Wenn Sie alles richtig gemacht haben, existiert nun der Ordner /wp-content/themes/Child-Beispiel. Navigieren Sie nun in Ihrem Admin-Bereich zu Design Themes. Unter Verfügbare Themes sehen Sie das neue Child-Theme. Herzlichen Glückwunsch!

Wenn Sie Ihr Child-Theme aktiviert haben, werden Sie feststellen, dass ihre Seite genau so aussieht wie das Parent-Theme (ermöglicht durch @import url). Damit das nicht so bleibt, wird die strong>style.css des Child-Themes angepasst. Im folgenden Beispiel wird die Hintergrundfarbe des Headers geändert:

/*
Theme Name: Child-Beispiel
Template: twentyeleven
Theme URI: http: //beispiel.de/
Description: Ein Child für das twentyeleven-Theme 
Author: Hier kommt Ihr Name hin
Author URI: http: //beispiel.de/mein-child-theme/
Version: 1.0
*/

@import url('../twentyeleven/style.css');

#header {
        background: #000;
}

Ergebnis: Das Child-Theme nutzt die style.css des Parents (@import url), überschreibt aber den background für #header. Sie können nun ganz nach Belieben eigene CSS-Änderungen in der style.css des Child durchführen, während das originale Parent-Theme updatefähig bleibt. Großartig!

Child-Themes mit eigenen Templates
Bisher besteht das Child-Theme lediglich aus einer Datei (style.css). Alle weiteren Funktion werden vom Parent-Theme bereitgestellt. Wenn man eigene Templates und Funktionen erstellen möchte, reicht es, die entsprechenden Dateien in das Verzeichnis des Child-Themes zu kopieren. Dies geht z.B. mit der single.php (Einzelartikelansicht). Existiert die Datei im Child-Theme-Verzeichnis, so wird das Original des Parents ignoriert.
Anders sieht es bei der functions.php aus: Verfügt das Child über eine Datei dieses Namens, werden dort festgeschriebene Anweisungen zusätzlich und vor dem Parent-Original ausgeführt.

Zusammenfassung: Ein WordPress-Child-Theme erstellen

  • Wer Themes bearbeiten / individualisieren möchte, sollte Child-Themes nutzen
  • Änderungen am Child-Theme bleiben bestehen, wenn das Parent aktualisiert wird
  • Mehr als eine style.css wird nicht benötigt. Wichtig ist die Angabe des Parent-Namens im Header der Child-style.css
  • Template-Dateien des Childs überschreiben Funktiones das Parent-Themes (functions.php hingegen wird zusätzlich zum Parent ausgeführt)
SimonTutorial: Ein WordPress-Child-Theme erstellen

4 comments

Was halten Sie von diesem Artikel? :)
  • Frank - 10. Januar 2013 Antworten

    Vielen Dank für die Anleitung. Das hat mir gerade sehr geholfen.

  • Ingo - 11. Januar 2013 Antworten

    Vielen Dank für dieses kurze, übersichtliche und hilfreiche Tutorial. Ingo

  • Oli - 16. März 2013 Antworten

    Hi,

    danke für das Tutorial. Habe noch folgende Verständnisfrage:
    Ich habe bei meinem Theme die footer.php geändert und die WordPress und Theme Links entfernt.
    Muss ich die footer.php jetzt in das Child Theme mit einbinden, oder wie funktioniert das richtig?

    Danke 🙂

    Simon - 16. März 2013 Antworten

    Hier der für Sie relevante Satz aus dem Artikel:

    > Existiert die Datei im Child-Theme-Verzeichnis, so wird das Original des Parents ignoriert.

    In Ihrem Fall: Gibt es im Child-Theme eine Datei namens footer.php, so wird die footer.php des Originals ignoriert.

    Übrigens: Credit-Links einfach zu entfernen ist keine schöne Sache. Sie bekommen ein kostenloses Design für Ihre Webseite, da könnten Sie doch wenigstens einen Link zum Theme-Ersteller / CMS-Entwickler drin lassen, oder?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert