Ein „child theme“ erstellen

Wozu brauche ich ein child Theme?

Kurz und Knapp: Child Themes sind dafür da, dass Änderungen, die durch Updates des jeweiligen Parent Theme gemacht werden, nicht überschrieben werden.

Ich denke jeder kennt es, man hat ein tolles Theme und möchte nur eine Kleinigkeit ändern, die Verführung ist groß die eine Zeile CSS-Code kurz in das Theme rein zu packen. Aber wir müssen wiederstehen denn sonst kann man die Arbeit beim nächsten Update direkt wieder angehen.

Die Regel ist also so einfach wie genial: Egal wie klein die Änderung ist, Child Theme anlegen bzw. benutzen.

Wie Lege ich ein Child Theme an?

Wenn man das passende Theme gefunden hat, dass man nur erweitern will, kann es eigentlich schon los gehen.

Wir loggen uns per FTP / SFTP oder SSH auf dem Server bzw. Webspace ein und rufen nachdem „wp-content“ Ordner den „themes“ Ordner auf:

../wp-content/themes/*

Mein Parent Theme ist „blask“ daher erstelle ich nun einen Ordner mit dem Namen „blask-child“

In meinem Ordner lege ich nun die zwei elementaren Dateien an:

1) functions.php

<?php
/*
 Theme Name: Blask Child Theme
 Description: Blask Child Theme für mike-menke.de
 Author: Mike Menke
 Author URI: https://mikemenke.de
 Template: blask
 Version: 1.0
 Tags:
 */
    
 function blask_child_styles() {
        wp_register_style('blask-style', get_template_directory_uri(). '/style.css');
        wp_enqueue_style('blask-style', get_template_directory_uri(). '/style.css');
        wp_enqueue_style( 'blask-childtheme-style', get_stylesheet_directory_uri().'/style.css', 
           array('blask-style')
        );
 }
 add_action( 'wp_enqueue_scripts', 'blask_child_styles' );

In dieser Datei binden wir das Stylesheet der Childthemes ein und zwar so, dass es nach der style.css des Parent-Themes geladen wird. 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.

 Wichtig: In der Zeile „Template:“ muss der Name des Parent Theme stehen (Ordnername)

2) style.css

In diese Datei können nun alle CSS Änderungen eingefügt werden.

/*
 Theme Name: Blask Child-theme
 Description: CSS erweiterung für Blask.
 Author: Mike Menke
 Author URI: https://mikemenke.de
 Template: blask
 Version: 1.0
 Tags:
 */

body {
   background: red;
}

3) Theme aktivieren

Im wp-admin Bereich können wir nun unter „Design“ > „Themes“ unser Child Theme aktivieren.

4) Zusatz

Öfter tauchen auch derartige Fragen auf:

„Hallo. Folgendes Problem: Damit bei Hueman Beitragsbilder angezeigt werden, muss man eine Änderung an der single.php vornehmen. Nach einem Update geht das immer verloren. Ich hab bereits ein Child Theme erstellt und angewendet, aber das hat ja keine single.php. Und wenn ich die Änderung beim normalen theme vornehme, ändert sich es wieder beim Update. Wie stelle ich das am Besten im Child Theme ein?“

Dafür muss lediglich die „single.php“ in den Child-Theme Ordner kopiert werden. WordPress Arbeit hier nach dem Fallback Prinzip: Wenn eine Datei im Child-Theme nicht vorhanden ist, wird Sie aus dem Parent-Theme geladen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.