Wordpress Basics: Child Themes anlegen und nutzen

Child Themes sind eine besonders elegante Möglichkeit ein bestehendes Themes abzuändern, zu modifizieren oder zu optimieren ohne das eigentliche Basis Theme zu ändern. Dazu wird in einem Unterordner eines bestehenden Themes ein Child Theme angelegt und als solches gekennzeichnet.

Alle Dateien die in diesem Unterordner hinterlegt werden, werden statt der Original- Dateien mit gleichem Namen genutzt, sobald das Child Theme aktiviert wurde. Legt man beispielsweise eine footer.php Datei an wird nicht mehr die Original- Datei vom “Eltern Theme” geladen, sondern die entsprechende Datei von unserem Child Theme. So kann man bestimmte Bereiche eines bestehenden Themes ändern, ohne an diesem direkt Änderungen vornehmen zu müssen.

Was ist der Vorteil von Child Themes?

Die Vorteile liegen dabei auf der Hand: Gibt es ein Update für das Parent Theme werden Änderungen nicht mehr überschrieben sondern bleiben separat im Child Theme erhalten. Man kann also Abweichungen vom Original sauber getrennt in einem anderen Verzeichnis hinterlegen.

Ich selber nutze als Parent Theme ein eigens entwickeltes Wordpress Framework mit allen Funktionen und Scripten die ich häufig und gerne einsetze. Ich kann dieses Theme separat pflegen und Optimierungen vornehmen. Bei einem neuen Wordpress Projekt kann ich dieses Theme als solide Basis einsetzen und mit einem Child Theme dann die eigentlichen Änderungen an Design und Layout vornehmen.

Dabei ist aber niemand gezwungen sich selber ein solides Parent Theme zusammen zubauen. Ein einfaches Basis Theme wie das allzeit beliebte Twenty Thirteen taugen bereits als Parent Theme. Aber auch eine große Zahl professioneller Frameworks, wie Gantry, Thesis, Divi und Genesis (um nur einige zu nennen) sind am Markt erhältlich.

Ein Child Theme anlegen

Ein Child Theme anzulegen ist relativ simpel. Dazu muss nur ein neue Ordner im/themes/ Verzeichnis (<- Wichtig! NICHT im Verzeichnis des "Eltern" Themes, sondern eben eine Ebene darüber) der Wordpress Installation angelegt werden. Nennen wir ihn einfach mal /childtheme. In diesem Verzeichnis muss eine style.css Datei hinterlegt werden mit folgenden Angaben:

/* Theme Name: Child Theme Template: twentythirteen */

“Theme Name” ist hierbei der Name des Child Themes welcher frei gewählt werden kann. Er dient nur der Identifizierung im Wordpress Backend. “Template” ist der Name des Parent Themes. Also das wichtigste an der ganzen Sache. Hier müsst ihr auf Leerzeichen, Groß- und Kleinschreibung achten. Am besten einfach den Verzeichnisnamen eures Parent Themes eintragen. Also nicht “Twenty Thirteen”, sondern eben “twentythirteen”.

Ist diese Datei erstmal angelegt kann bereits im Wordpress Backend unter “Design” das entsprechende Child Theme aktiviert werden.

Nicht erschrecken: Da im Child Theme eine praktisch leere style.css Datei vorhanden ist und die Dateien des Child Themes ja ANSTATT derer des Parent Themes verwendet werden, führt die Aktivierung zu einer komplett “ungestylten” Seite.

Man kann jetzt alle CSS Klassen aus der eigentlichen style.css Datei in die neue Child Theme style.css Datei reinkopieren und die gewünschten Änderungen an diesen vornehmen.

Oder, etwas eleganter, per Import: @import url("../twentythirteen/style.css");

die eigentliche Datei importieren. Dies macht insbesondere dann Sinn wenn man die Basis Styles im Großen und Ganzen behalten will und nicht das komplette Styling umkrempeln will. Hierdurch hat man dann auch den Vorteil das Änderungen an der style.css Datei des Parent Themes automatisch vom Child Theme geladen werden.

Alle CSS Klassen mit gleichem Namen die nach dem @import Aufruf eingefügt werden überschreiben die ursprünglichen Klassen.

Achtung!: Neue "Best Practice" zum einbinden der Styles des Parent Themes und des Child Themes

Im Wordpress Codex wird seit einiger Zeit davon abgeraten die style.css Datei des Parent Themes per @import zu laden. Es ist zwar nicht falsch, aber es geht noch etwas eleganter (und mit einem request weniger...) mit der "Enqueue" Methode. Dazu einfach eine neue Datei im Stammordner des Child Themes mit dem Namen functions.php anlegen und hier volgenden PHP Code hinterlegen: