„Wie erstelle ich ein WordPress Child Theme“?

Wer Anpassungen an seinem Theme vornehmen möchte, ohne dabei das Original-Theme umzuschreiben, wird früher oder später auf das Thema „ WordPress Child Theme“ stoßen. Mit Child Themes können Änderungen an einem Parent-Theme vorgenommen werden, beispielsweise das Stylesheet oder Template-Dateien angepasst werden, ohne das Parent-Themes selbst zu verändern. So bleiben alle Anpassungen auch nach einem Update erhalten. In diesem Tutorial wird euch gezeigt, wie man ein Child Theme erstellt.

Die Funktion CHild Theme ist erst ab der Version Version 3.0 von WordPress integriert. Allerdings noch ein Hinweis: Viele Themes nutzen ein sehr umfangreiches „Framework“ und bringen sehr viele Funktionen mit. Als Laie kann es schwer fallen, hier genau zu überschauen, wie was wo zusammenhängt. Das Anpassen kann also unter Umständen viel Mühe kosten. Aber das Probelem besteht ja eh … auch wenn ihr euer Parent-Theme anpassen wollt. Einen echten Nachteil gibt es jedoch in der Performance. WordPress muss ja in zwei Bereichen nach Templates suchen. Auch die Stylesheets werden in der Regel mit „@“ eingebunden, was abermals Nachteile in der Performance hat. Unterm Strich ist einfach die Frage, wie umfangreich euer Blog ist. Prüft am besten, wie sich die Änderungen auf eure Performance auswirkt. Die meisten User werden wahrscheinlch gar keinen Unterschied merken.

Los gehts mit dem WordPress Child Theme Tutorial:

Als erstes legen wir ein neuen Ordner an, in dem wir alle Template-Dateien, Stylesheets, Bilder un Scripte packen. In meinem Beispiel nennen ich den Ordner twentytenCHILD. Um unser Child Theme für WordPress erkennbar zu machen, müssen wir nur die style.css innerhalb unseres neuen Ordners anpassen:

[code]
/*
Theme Name: TwentytenChild
Theme URI: http: //www.designers-inn.de
Description: Child theme für Twenty Ten Them
Author: Dein Name
Author URI: http: //www.designers-inn.de
Template: twentyten
Version: 0.1
*/
[/code]

Beschreibung:

Theme Name: Wichtig, damit WordPress das Child-Theme erkennt.
Theme URI: Eure Homepage (optional).
Description: Beschreibung des Themes (optional).
Author: Name des Autors (optional).
Author URI: Homepage des Autors (optional).
Template: Der Verzeichnis-Name des Haupt-Themes. Groß- und Kleinschreibung beachten.
Version: Child-Theme Version

WICHTIG: Das neue Stylesheet ersetzt die CSS des Parent-Themes vollständig! Will man nur kleine Änderungen in der style.css vornehmen, muss das Stylesheet des Haupt-Themes importiert werden.

Die Import-Funktion lautet: @import

[code]
/*
Theme Name: TwentytenChild
Theme URI: http: //www.designers-inn.de
Description: Child theme für Twenty Ten Them
Author: Dien Name
Author URI: http: //www.designers-inn.de
Template: twentyten
Version: 0.1
*/
@import url(„../twentyten/style.css“);

(… eure Anpassungen)
[/code]

Okay. Das war es dann eigentlich schon. Damit könnt ihr das neue Child Theme im Backend von WordPress aktivieren. Der Verweis auf das Parent-Theme ist übrigens ziemlich versteckt i der Beschreibung des aktivierten Child-Theme verstekct. Also vorsicht, wenn ihr künftig Themes löscht! Nicht, dass ihr versehentlich ein Haupt-Theme löscht und nur noch das Child-Theme übrig bleibt.

Nachdem wir das Stylesheet eingebunden haben, könnten wir uns auch den Funktionen widmen. Es können nämlich auch alle Template-Dateien des Basis-Themes vom Child Theme ersetzt werden. Im Prinzip sucht WordPress im übergeordneten Child Theme seine Informationen zusammen und geht erst dann zum Haupt-Theme.

Wichtig

Zu beachten ist, dass die Ordnerstruktur vom Haupt-Theme erhalten bleiben muss. Unsere angepassten Dateien müssen also im Child-Theme an genau der selben Stelle liegen wie im Haupt-Theme.

Einen Sonderfall nimmt die function.php ein. Die functions.php des Child-Themes wird nämlich zusätzlich vor der functions.php des Haupt-Themes geladen. Die bedeutet, dass bereits vorhandene Funktionen des Haupt-Themes überschrieben werden könnten. Auch sollte man an die Reihenfolge denken, wie WordPress die Funktionen abarbeitet. Alle übrigen Template-Dateien verhalten sich wie die style.css: sie werden überschrieben.

Beim Einbinden von Dateien muss ich als Pfad die Konstante zum Child-Theme wählen; also “STYLESHEETPATH” statt der üblichen „TEMPLATEPATH“.

[code]
require_once( STYLESHEETPATH . ‚/path/to/file/in/child/theme.php‘ );
[/code]

Fazit

Child-Themes sind ein guter Weg, sein Theme nach den eigenen Bedürfnissen anzupassen. Vor allem spart man sich bei Updates des Haupt-Themes das mühselige Gegrübel, wo man was geändert hatte. Außerdem kann man mit Child Theme auch ganz gut „Probe-Änderungen“ vornehmen, da man das Originaltheme ja nicht kaputt machen kann – und im Notfall das Child Theme einfach wieder daktiviert. Dennoch würde ich empfehlen, größere Änderungen erst auf einer Testumgebung zu prüfen. Ich hoffe, dass ich euch mit diesem WordPress Child Theme Tutorial etwas helfen konnte!