Was ist ein Child-Theme?

Ein Child-Theme ist eine abgeschwächte Kopie des original bzw. des Mutter-Themes. Es wird dann verwendet, wenn man Anpassungen im CSS-File vornehmen will oder Funktionen einfügt, die nicht bei jedem Update des original Themes überschrieben werden sollen. Gute Theme Hersteller liefern das Child-Theme auch oft schon mit.

Ein Child-Theme erstellen in WordPress

Ein Child-Theme erstellen ist relativ einfach. Man kann es entweder über das Hosting-Kontroll-Panel und deren File Manager machen oder man macht es über ein File Manager Plug-in in WordPress. Ich verwende gerne folgendes Plug-in:

File Manager – WordPress-Plugin | WordPress.org Deutsch

Wir erstellen im Verzeichnis wp-content/themes und erstellen einen neuen Ordner. Den schreiben wir am besten mit dem Namen des elterlichen Themes und mit dem Zusatz «-child» an. So weiss WordPress, was angezeigt werden muss. Darauf achten, dass wir keine Leerschläge im Namen haben. Um die Struktur anzupassen, verwenden wir den File Manager oder einen FTP-Client.

Mit den folgenden Schritten erstellt man ein Child-Theme in WordPress:

1. Logge dich bei WordPress ein und installiere ein File Management-Plug-in bzw. logge dich beim Hoster ein und verwende dessen File Manager.

2. Navigiere zu deiner WordPress-Installation (meistens public_html genannt) und öffne den wp-content/themes Ordner.

3. Erstelle einen neuen Ordner mit dem Namen des Mutter-Themes und dem Zusatz -child. In unserem Beispiel oceanwp-child.

   

4. Öffne den Ordner und erstelle ein neues CSS-File mit dem Namen style.css

   

5. Öffne das CSS-File und füge denselben Code ein wie beim Mutter-CSS-File:

   /*
   Theme Name: OceanWP Child
   Theme URI: <https://oceanwp.org/>
   Description: OceanWP WordPress theme example child theme.
   Author: Nick
   Author URI: <https://oceanwp.org/>
   Template: oceanwp
   Version: 1.0
   */
   
   /* Parent stylesheet should be loaded from functions.php not using @import */
   

   Unterhalb dieses Headers wird dann der abgeänderte CSS-Code eingefügt. Wir sehen oben auch schon, dass gute Theme-Hersteller meistens schon ein Child-Theme mitliefern. Wichtig: Der Theme-Name muss mit Child ergänzt werden.

6. Sichere das File.

7. Erstelle ein functions.php File und kopiere den Header mit den Informationen und die Funktion zum Laden der CSS-Files ein.

   <?php
   /**
    * Child theme functions
    *
    * When using a child theme (see <http://codex.wordpress.org/Theme_Development>
    * and <http://codex.wordpress.org/Child_Themes>), you can override certain
    * functions (those wrapped in a function_exists() call) by defining them first
    * in your child theme's functions.php file. The child theme's functions.php
    * file is included before the parent theme's file, so the child theme
    * functions would be used.
    *
    * Text Domain: oceanwp
    * @link <http://codex.wordpress.org/Plugin_API>
    *
    */
   
   /**
    * Load the parent style.css file
    *
    * @link <http://codex.wordpress.org/Child_Themes>
    */
   function oceanwp_child_enqueue_parent_style() {
   	// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
   	$theme   = wp_get_theme( 'OceanWP' );
   	$version = $theme->get( 'Version' );
   	// Load the stylesheet
   	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );
   	
   }
   add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );
   

   Die Funktion sagt dem Child, dass es die style.css Datei laden soll.

   Optional kann man ein PNG-File in denselben Ordner legen, damit das Theme in WordPress ein Cover Foto hat. Das Ganze sieht im File Manager dann so aus:

   

   Und in WordPress unter Themes so: