WordPress Child-Theme erstellen

Und noch ein WordPress-Artikel. Aber ich denke das ist nicht so schlimm. Ich nutze in letzter Zeit grundsätzlich Child-Themes. Child-Themes übernehmen alle Features und das Aussehen des Eltern-Themes und sind für Bastler einfach ideal. Änderungen im Child-Theme zerstören nicht das Eltern-Theme und Updates des Eltern-Themes überschreiben nicht die Änderungen im Child-Theme. So ein Child-Theme zu erzeugen ist kein Hexenwerk

Ein Child-Theme besteht aus mindestens zwei Dateien. Der style.css und einer functions.php. Während in die style.css neben den geänderten Styles unbedingt auch Angaben zum Child-Theme reingehört, bindet die functions.php das Eltern-Stylesheet ein. Beide Dateien liegen, wie jedes andere WordPress-Theme, im Pfad wp-content/themes der WordPress Installation. Als Name des Ordners bietet sich der Name es Eltern-Themes erweitert um ein -child an. Für das Theme TwentyTwenty wäre das twentytwenty-child.

style.css

Neben der Datei functions.php ist die Datei style.css die wichtigste Datei so eines Child-Themes. Sie enthält zumindest die Angaben damit WordPress erkennt, dass es sich hier um eine Child-Theme handelt. Auch ist darin die Bezeichnung des Parent-Themes zu finden. Das alles wird als Kommentar an den Anfang der Datei gestellt.

/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    http://example.com/twentytwenty-child/
 Description:  Twenty Twenty Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout
 Text Domain:  twentytwentychild
*/

Die wichtigsten Infos, die unbedingt rein müssen sind der „Theme Name“ und „Template“. Während der „Theme Name“ eine eindeutige Bezeichnung braucht nimmt „Template“ den Namen des Parent-Themes Verzeichnisses, in unserem Fall „twentytwenty“ auf. Alle anderen Angaben sind optional. Viele von Ihnen werden aber im WordPress-Backend unter Themes angezeigt.

functions.php

Die functions.php enthält in einem Child-Theme eigentlich jede Menge Code-Schnipsel, die das Eltern-Theme in einigen Punkten abändern. Der wichtigste Teil, der unbedingt rein muss, ist die Einbindung des Eltern-Stylesheets. Das Problem, das dabei auftritt, ist die Tatsache, dass das Eltern-Stylesheet unbedingt vor dem Stylesheet des Child-Themes geladen werden muss. Nur so überschreiben die Änderungen des Child-Themes das Eltern-Theme. Im Web findet man dazu jede Menge Snippets. Ich selbst habe mit der „Einfach-Variante“ sehr gute Erfahrungen gemacht.

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

Ob das Funktioniert muss man ausprobieren. Kontrollieren kann man das zum Beispiel mit Hilfe der Entwicklerwerkzeuge in Firefox. Wenn man sich dort den Head der Webseite im Quelltext anschaut muss das Parent- vor dem Child-Stylesheet zu finden sein. Klappt das nicht gibt’s noch einen zweiten, etwas umfangreicheren Schnipsel auf der Seite von WordPress.

Um beide Dateien zu bearbeiten braucht man natürlich einen ordentlichen Texteditor. Der Microsoft Editor oder auch Word ist das nicht. Ich nutze PSPad und NotepadX. Letzteres ist eine Windows 10 App und im Store zu finden.

Eigentlich funktioniert jetzt das neue Child-Theme. Fehlt noch etwas Kosmetik damit das alles im Backend auch gut aussieht. Unter Desgin => Themes zeigt WordPress für jedes installierte Theme ein Bild an. Auch dieses Bild ist im Theme-Ordner gespeichert. Es trägt den Namen screenshot.png und hat eine Größe von 1200×900 Pixel.

Wem das jetzt alles zuviel ist kann natürlich auch auf ein fertiges Child-Theme zurückgreifen. So ein Theme hat vor ein paar Jahren Rich Tabor (der Macher von CoBlocks) erstellt. Man kann das bei GitHub herunterladen.