Der flexible Aufbau von WordPress ermöglicht es einem neben vielen Plugins auch verschiedene Themes zu installieren. So kann man seinen Blog / CMS flexibel im Aussehen ändern. Manchmal möchte man aber an den Themes einige Dinge im Design ändern, die sich nicht direkt einstellen lassen. Die meisten Dinge werden dabei über das CSS angepasst. Dafür kann man sowohl selber das Theme über den Customizer im wp-admin anpassen oder auch direkt in den Theme-Dateien auf dem Webspace. Letzteres hat aber den Nachteil, dass bei einem Theme-Update die Änderungen überschrieben werden.

Das Child-Theme für eigene CSS-Einstellungen im fremden Theme

Die Lösung für dieses Problem ist das Erstellen eines Child-Themes in WordPress zum Haupttheme. Das Prinzip dahinter ist einfach. Es wird ein fertiges Theme als Vorlage benutzt und die Änderungen in einem separaten CSS hinterlegt.

Wer sollte ein Child-Theme erstellen?

Ihr solltet grundsätzlich wissen, wie man CSS schreibt. Außerdem solltet Ihr wissen, wie man Dateien in Webinstallationen anlegt und grob eine Vorstellung davon haben, wie WordPress funktioniert (das es einen Themes-Ordner gibt, ein wenig PHP-Kenntnisse etc). Und ihr müsst natürlich die Herausforderung haben, dass in einem bestehenden Theme eine Änderung dauerhaft umgesetzt werden soll.

Was sind die Vorteile?

Sicher ist die Frage, warum man das machen sollte. Denn ein eigenes Theme zu schreiben kann ja auch eine gute Alternative sein. Der Vorteil eines Child-Themes ist, dass man einen fertigen Theme nehmen und anpassen kann. Wenn das Theme aktualisiert wird (Fehler werden ausgebessert, Anpassungen an aktuelle WordPress-Versionen etc) profitiert man von der Aktualisierung. Die eigenen Anpassungen bleiben aber durch den Child-Theme in der Regel erhalten. So reudziert sich der eigene Aufwand.

Eigenes Child-Theme erstellen

Für einen eigenen Child-Theme erstellst Du zuerst einen Ordner. Der Name des Ordners kann beliebig festgelet werden. Angelegt wird der neue Ordner dort, wo sich auch die anderen Themes befinden. Meistens ist das im Ordner “wp-content/themes/”. Ich habe meinen Childtheme immer ähnlich zu Original benannt, um die Zugehörigkeit besser zu erkennen. Also zum Beispiel “twentytwenty_medienman”. In dem neuen Unterordner muss eine style.css angelegt werden. In dieser stehen die wichtigsten Informationen zum Child-Theme.

style.css im Child-Theme

Die stlye.css sollte folgende, ersten Zeilen enthalten:

/*
 Theme Name:     Twentytwenty vom Medienman
 Theme URI:      https://d3qdyo8qbj7vyy.cloudfront.net
 Description:    Einige Layoutanpassungen für Medienmans Blog
 Author:         Medienman
 Author URI:     https://d3qdyo8qbj7vyy.cloudfront.net
 Template:       twentytwenty
 Version:        1.0.0
*/

Eine kurze Erklärung zu den Werten:

  • Theme Name -> hier sollte der Name des Themes stehen, wie er später in WordPress zu finden sein soll.
  • Theme URI -> hier kann bei einer Veröffentlichung die URL zu Deiner Theme-Seite stehen.
  • Description -> umschreibt kurz den Child-Theme.
  • Author -> Dein Name.
  • Author URI -> URL zu Dir als Autor; kann also eine andere sein, als zum Theme.
  • Template -> der Ordnername zum Orignaltheme; er sollte genau so geschrieben werden, wie er im Order “themes” vorhanden ist.
  • Version -> wenn sich das Child-Theme öfter ändert, kann man es mit einer Versionsnummer versehen. Auch um bei Veröffentlichungen anderen Blogs anzuzeigen, dass es ein Update gibt.

Nach diesem Bereich können dann die Style-Anpassungen vorgenommen werden, wie sie für den Theme gelten sollen. Damit aber alles funktioniert, benötigt es außerdem die functions.php.

functions.php im Child-Theme erstellen

Im konkreten Fall für reine Style-Anpassungen benötigt es nur folgende, wenige Zeilen:

<?php

function childtheme_parent_styles() {
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

?>

Damit wird die Datei style.css eingeladen und das CSS des Original-Themes zugunsten Eurer Änderungen überschrieben. Damit der Theme auch mit einem schönen Screenshot im WordPress-Admin angezeigt wird, benötigt es noch die screenshot.jpg.

screenshot.jpg erstellen

Das angezeigte Bild im WordPress-Admin ist immer die screenshot.jpg im Theme-Ordner. Für einen eigenen Screenshotz erstellt also eine Grafik oder einen Screenshot vom angepassten Theme. Das gespeicherte jpg kann dann als screenshot.jpg im Theme-Ordner gespeichert werden. Es wird jetzt immer im Admin beim Child-Theme angezeigt.

Beispiel für ein Child-Theme im WordPress-Admin. Links ist das Child-Theme in der Auswahl, rechts der Original-Theme.
Beispiel für ein Child-Theme im WordPress-Admin. Links ist das Child-Theme in der Auswahl, rechts der Original-Theme.

Child-Theme aktivieren

Wenn der Theme in einem Multisite-Network ist, dann muss im Netzwerk der Theme noch aktiviert werden. Erst danach kann er in den einzelnen Seiten genutzt werden. Bei einer einzelnen Seite kann man unter “Design” nun den eigenen Child-Theme auswählen und aktivieren. Wenn ein Cache-Plugin verwendet wird, sollte der Cache jetzt geleeert werden, damit die Änderungen sichtbar sind. Wichtig ist, dass der Cache wirklich komplett geleert wird.

Was sind Eure Erfahrungen mit der Erstellung von Child-Themes? Ist das sinnvoll oder nutzt man lieber den Theme so, wie er erstellt wurde? Schreibt es gerne in die Kommentare.