Child-Theme in WordPress erstellen

Ich hab es mal wieder getan. Ich habe meine Blog ein wenig überarbeitet und dafür ein kostenloses Theme benutzt. Leider entsprach das nicht ganz meinen Vorstellungen, aber es gibt an WordPress bekanntlich nichts, was sich nicht anpassen lassen würde. In meinem Fall habe ich dafür ein sogenanntes Child-Theme verwendet.

Was ist ein Child-Theme und was bringt das?

Ein Child-Theme gibt einem die Möglichkeit Änderungen an einem Theme vorzunehmen, ohne die Dateien des Themes anzufassen. Das bringt einem nicht nur den Vorteil, dass man sich um Updates des Themes keine Sorgen mehr machen muss, weil die eigenen Änderungen daran dann verloren gehen, sondern auch den Vorteil, dass es einfach aufgeräumter ist und man seine eigenen Änderungen viel besser wiederfindet. Ein Child-Theme bedient sich nämlich im Großen und Ganzen an den Dateien des Mutter-Themes und man muss lediglich die Dateien im Child Theme hinterlegen, an denen man tatsächlich eine Veränderung vornehmen möchte.

Ein Child-Theme anlegen

Nehmen wir mal an das Theme, an dem man Veränderungen vornehmen will heißt „Hueman“ und befindet sich also im Ordner „wp-content/themes/hueman„. Um den Überblick zu behalten lege ich also mein Child-Theme in den folgenden Ordner „wp-content/themes/hueman-child„. Viele Dateien benötigt man nicht, um ein Theme anzulegen, bei einem Child Theme ist das genau so. Verpflichtend ist lediglich eine „style.css„. In diese Datei kommt die Beschreibung des Themes und nur damit wird das Template von WordPress als ein solches erkannt. Im Folgenden ist der Code, den ich für mein Child Theme verwendet habe:

1
2
3
4
5
6
7
8
9
10
11
12
13

/*
 Theme Name:   Hueman Child
 Theme URI:    http://rene-vorndran.de
 Description:  Hueman Child Theme
 Author:       Rene Springmann
 Author URI:   http://rene-vorndran.de
 Template:     hueman
 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, one-column, two-columns, three-columns, right-sidebar, left-sidebar, fluid-layout, fixed-layout, custom-colors, custom-menu, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  hueman-child
*/

Wichtig ist hierbei vor allem die Zeile „Template:hueman„, da man hiermit angibt in welchem Ordner(!) die Dateien des Eltern-Themes zu finden sind.

Weiterhin muss man dem neuen Theme mitteilen, dass es die Style Datei des Eltern Themes laden soll, dazu legt man die Datei „functions.php“ im Child-Theme an und fügt den folgenden Code ein.

1
2
3
4
5
6
7

<?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }
?>

Jetzt sollte das Theme bereits auswählbar sein und genau so aussehen, wie das Eltern-Theme.

Um nun eine Veränderung zu bewirken sucht man sich die entsprechende Datei heraus, die man bearbeiten möchte und kopiert sie in das Verzeichnis des Child-Themes. Ab jetzt wird diese Datei nicht mehr aus dem Eltern-Theme geladen, sondern es wird immer zuerst im Child Theme gesucht. Ich habe also die Datei „single.php“ kopiert und dort in die Darstellung eines Beitrags das ehh schon erfasste Artikelbild, welches bis jetzt nur auf den Übersichtsseiten angezeigt wurde, mit eingefügt.

1
2
3
4

   if ( has_post_thumbnail() ) {
       $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
       echo '<div class="rs-post-image" style="background-image: url(' . $url . ');"></div>';
   }

Ein bisschen CSS noch in die „style.css„, fertig ist das Child Theme. Fast. Ich habe noch die „screenshot.png“ aus dem Eltern-Theme kopiert, damit es in der Theme-Auswahl nicht so leer aussieht.

Wer noch mehr über Child-Themes wissen möchte, der kann sich im offiziellen WordPress-Codex informieren: Child-Themes im WordPress-Codex

Danke an Phasenkasper, dass er mich darauf gestoßen hat, dass ein @import für die Styles mittlerweile veraltet ist.