Anleitung Childtheme anlegen (Update)

Dieser Artikel stammte ursprünglich aus dem Jahr 2017. Er wurde im Februar 2020 überarbeitet und aktualisiert.

Ein WordPress-Theme an die eigenen Bedürfnisse anzupassen ist gar nicht so schwer. Die meisten Anpassungen kannst du über zusätzliche CSS-Angaben umsetzen. Das machst du entweder über den Customizer oder über ein Child-Theme.

CSS im Customizer

Deine CSS-Angaben schreibst du in das Customizer Panel „zusätzliches CSS“. Du siehst gleich, ob deine Anweisung greift, weil der Customizer die Seite mit dem neuen CSS sofort nachlädt.
Es gibt sogar ein Syntax-Highlighting und Fehlermeldungen, falls in der Schreibweise mal was nicht stimmt.

Der Customizer eignet sich sehr gut für kleine Anpassungen. Wenn dir das Theme im Großen und Ganzen gut gefällt und du nur ein paar wenige Details verändern möchtest, dann kannst du das sehr gut über den Customizer machen.

Sobald du aber etwas tiefer in das Design des Themes eingreifst, sammeln sich schnell viele Zeilen CSS an. Dann wird es unübersichtlich im Customizer. In diesem Fall ist es sinnvoller, ein Child-Theme anzulegen.

Was ist ein Child-Theme?

Ein Childtheme ist ein kleiner Ableger des Original-Themes. Das Original-Theme wird zum Parent (=Eltern)-Theme.

Der Vorteil dabei: Das Eltern-Theme bleibt wie es ist und wird nicht angetastet. Wenn die Entwickler des Themes ein Update zur Verfügung stellen, kannst du das Parent-Theme updaten, ohne dass deine Anpassungen verloren gehen.

Im Childtheme-Ordner liegen nur die Dateien, die tatsächlich verändert wurden. Das macht es leichter, die Änderungen nachzuhalten und den Überblick zu behalten.

Ein Child-Theme besteht aus drei Dateien: Einer CSS-Datei, einer functions.php und einem Screenshot. Den Screenshot kann man theoretisch auch weglassen, aber es ist netter, wenn man das Theme im Backend auch optisch unterscheiden kann.

So sieht ein Child-Theme aus:

├── mein-child-theme
    ├── style.css
    ├── functions.php
    └── screenshot.png

Voraussetzung: Zugriff via FTP

Um die folgenden Schritte auszuführen, brauchst du ein FTP-Programm. Aus dem WordPress Backend heraus ist das nicht machbar. Über FTP kannst du auf deinen Server zugreifen, auf dem deine WordPress-Installation liegt.

Du brauchst dazu Zugangsdaten zu deinem Server (beim Provider erfragen) und ein FTP-Programm. Ich arbeite sehr gerne mit Transmit von Panic, ein gutes kostenloses Opensource-Programm ist FileZilla. 
Jetzt brauchst du noch einen Texteditor (nicht MS Word!), mit dem du die Dateien bearbeiten kannst und es kann losgehen.

Falls du keinen Zugriff auf deinen Server hast oder nicht selbst basteln möchtest, kannst du auch ein Plugin verwenden. Child Theme Generator macht einen ganz guten Eindruck.

Schritt 1: Das Childtheme anlegen

Zuerst legst du im Verzeichnis wp-content/themes ein neues Verzeichnis an. Dieser Ordner liegt auf derselben Ebene wie der Ordner des Parent-Themes. Du kannst den Ordner ganz nach Belieben benennen, es sollten jedoch keine Leerzeichen und Umlaute im Namen vorkommen.

In den Childtheme-Ordner hinein legst du eine neue, leere Datei namens style.css. Das kannst du über dein FTP-Programm machen oder du erzeugst die Datei auf dem Desktop-Rechner und lädst sie dann per FTP hoch. In diese Datei musst du nun ein paar Zeilen Code eintragen, damit WordPress das Verzeichnis als dein neues Childtheme erkennt.

/*
Theme Name: Mein Childtheme
Description: Ein Childtheme von Theme XY
Author: Kirsten Schelper
Author URI: https://www.die-netzialisten.de
Template: Name_des_Parent_Theme_Ordners
Version: 1.0
Tags:
*/

In der Zeile 2 steht der Name des Childthemes. Dieser Name erscheint dann auch im WordPress-Dashboard unter Design/Themes. In Zeile 6 steht der Name des Verzeichnisses, in dem dein Parent-Theme liegt.

Beispiel für eine Childtheme CSS-Datei

Angenommen, du willst eine Variante vom Standardtheme TwentyFifteen machen. Das Childtheme soll „TwentyFifteen Child“ heissen. Dann sieht der Header-Code in der style.css so aus:

/*
Theme Name: TwentyFifteen Child
Description: Ein TwentyFifteen Childtheme
Author: Kirsten Schelper
Author URI: https://www.die-netzialisten.de
Template: twentyfifteen
Version: 1.0
Tags:
*/

Schritt 2: Elterntheme und Childtheme verknüpfen

Damit das Childtheme funktionieren kann, brauchen wir noch eine weitere Datei in unserem Childtheme-Ordner. Die Datei hat den Namen functions.php.

Hinweis: Bitte nicht die functions.php aus dem Parent-Theme kopieren. Du musst eine neue, leere Datei anlegen. Die Datei ist eine PHP-Datei und muss deshalb mit dem PHP-Tag beginnen <?php.

In dieser Datei holen wir uns das CSS des Parent-Themes und kombinieren es mit dem CSS des Childthemes.
Das Stylesheet der Childthemes wird nach der style.css des Parent-Themes geladen. Wäre die Reihenfolge anders herum, würden wir unsere Änderungen im Childtheme nicht sehen, weil das CSS vom Childtheme vom Parent-Theme überschrieben würde.

<?php
function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() . '/style.css' , array('parent-style'));
//wp_enqueue_style( 'child-print-css', get_stylesheet_directory_uri() . '/print.css');
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );

Themes mit vielen CSS-Dateien

Bei Themes, die mit vielen CSS-Dateien arbeiten, kann es nötig sein, die CSS-Dateien des Eltern-Themes zuerst zu deregistrieren und noch einmal neu zu registrieren. Damit stellt man sicher, dass die Reihenfolge stimmt, in der die Styles geladen werden: Die des Eltern-Themes zuerst, erst danach die vom Childtheme.

Dazu muss man ins Parent-Theme gucken und nachschauen, wie der handle vom Parent Theme Styles heisst. Im Fall von TwentyFifteen ist das twentyfifteen-style.

<?php

/* Hier kommen die functions für mein Child-Theme */

function twentyfifteen_child_styles() {
wp_deregister_style( 'twentyfifteen-style');
wp_register_style('twentyfifteen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style('twentyfifteen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style( 'childtheme-style', get_stylesheet_directory_uri().'/style.css', array('twentyfifteen-style') );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_child_styles' );

@import ist überholt

Früher hat man die style.css des Parent-Themes per @import direkt im CSS des Childthemes eingebunden. Das ist inzwischen aber nicht mehr zu empfehlen, siehe WordPress Codex.

Schritt 3: Das Childtheme im Backend

Wenn du dich jetzt in das Backend deiner WordPress-Seite einloggst, erscheint dort das neue Childtheme.

Das sieht noch ein bisschen traurig aus – hier fehlt noch die Bilddatei.
Die Datei sollte die Größe 1200px mal 900px und den Namen screenshot.png haben. WordPress zeigt dann das Bild im Backend an:

Schritt 3: Das Theme bearbeiten

In die Datei style.css des Childthemes kannst du jetzt deine CSS-Anweisungen eintragen.

Wenn du etwas in einer der Theme-Template-Dateien ändern möchtest, kopierst du dieses Template in das Childtheme-Verzeichnis.
Angenommen, du möchtest das Template header.php verändern. Dazu duplizierst du das Template und legst die Kopie in den Childtheme-Ordner. WordPress erkennt, dass im Childtheme eine header.php liegt, und lädt diese Datei und nicht die aus dem Eltern-Theme.

Ich empfehle allerdings, so wenige Templates wie möglich im Childtheme zu überschreiben. Die allermeisten Änderungen lassen sich über CSS oder Hooks und Filter umsetzen.

Sicherheitslücken im Child-Theme

Das Überschreiben von Templates macht ein Childtheme nicht nur unübersichtlicher, es birgt auch gewisse Risiken.

In meiner Praxis hatte ich den Fall noch nie, aber angenommen, im Theme steckt eine Sicherheitslücke. Sobald der Fehler dem Theme-Autor zu Ohren kommt, macht der sich ans Werk, beseitigt den Fehler und stellt ein Update des Themes zur Verfügung.

Dumm nur, wenn der Fehler in einer der Template-Dateien steckte, die wir in unsere Childtheme kopiert haben, zum Beispiel in der header.php. Dann ist das Eltern-Theme nach dem Update fehlerfrei, aber der Fehler lebt im Childtheme weiter ist. Das ist nicht so gut.

Wenn man mit Child-Themes arbeitet, muss man also das Parent-Theme immer ein bisschen im Auge behalten. Und im Zweifelsfall mit einem Diff Tool die Template-Dateien vergleichen (www.diffchecker.com).

Mit dem Plugin Child Theme Check kann man sich gegen solche Fälle absichern. Das Plugin guckt nach, ob im Childtheme Ordner veraltete Template-Dateien liegen und gibt eine Warnung aus. Dazu muss das Parent-Theme aber eine Versionierung unterstützen. Man findet dann so etwas im Header der PHP-Templates: @version 1.6.5

Das setzen leider immer weniger Autoren um. Hier ein Artikel von David Remer dazu.