So einfach kannst du ein WordPress Child Theme erstellen

Wer an seinem WordPress Theme nur kleine, optische Verschönerungen vornehmen möchte, kann dies schnell und unkompliziert zum Beispiel im Stylesheet (Design > Theme Editor > „style.css“) oder über den integrierten CSS-Editor im Theme Customizer durchführen. Wenn allerdings größere Modifikationen geplant sind, empfiehlt WordPress die Erstellung eines Child Themes.

Ein Child Theme ist – nach Wortlaut von WordPress – ein Theme, das die Funktionalität und das Design seines Parent Themes vererbt bekommt. Es spielt vor allem dann eine Rolle, wenn man viele und aufwändige Modifikationen beim Design oder bei verschiedenen Funktionen machen möchte. Der Grund: Während bei einem Parent Theme alle vorgenommenen Änderungen nach einem Update überschrieben werden, bleiben diese im Child Theme erhalten und werden deshalb auf das aktualisierte Parent Theme übertragen. Würdest du also sämtliche Anpassungen in deinem Parent Theme durchführen, wären diese beim nächsten Update wieder weg. Ein Child Theme kann das verhindern und dir somit jede Menge Zeit, Arbeit und Nerven sparen.

Das Erstellen eines Child Themes ist relativ einfach und in wenigen Schritten machbar. Alles, was du dafür brauchst, ist ein FTP-Zugang und unsere Anleitung. Los geht’s!

1. Ordner für das Child Theme erstellen

Zunächst müssen wir das Child Theme auf dem Computer erstellen und mit allen nötigen Informationen ausstatten, um es auf dem FTP-Server hochladen zu können.

Erstelle also im ersten Schritt einen beliebigen Ordner auf deinem Computer. Wenn du dich später nicht mit umständlichen Namensänderungen herumschlagen willst, solltest du von Anfang an einen sinnvollen Namen für den Ordner wählen. Da wir das Parent Theme „twentytwenty“ verwenden, wählen wir den Namen „twentytwenty-child“ für den Child-Theme-Ordner.

2. CSS-Datei (style.css) im Ordner anlegen

Dieser Ordner wird nun mit wichtigen Informationen gefüttert, die dein Child Theme benötigt, um sich später mit dem richtigen Parent Theme zu verknüpfen. Eine dieser Informationen ist die style.css-Datei, also das Stylesheet, wie du es bereits von den normalen Themes kennst. Hierfür gehst du folgendermaßen vor:

1. Erstelle ein Textdokument mit Rechtsklick ins leere Ordner-Verzeichnis (Neu > Textdokument).
2. Gib ihm den Namen „style.css“.
3. Öffne es mit einem beliebigen Editor und füge den folgenden Code ein:

/*
Theme Name: Child-Theme
Description: Mein Child Theme
Author: Dein Name oder der Name deiner WordPress-Seite
Author URI: http://www.deine-webseite.de
Template: Name deines Parent Themes
Version: 1.0
*/
/*Hier kannst du deinen gewünschten Code einfügen, um das Design deines Parent Themes anzupassen.*/

Ein Beispiel anhand unserer Webseite:

Kleiner Tipp für spätere Anpassungen: Mit !important kannst du bereits existierende Designs deines Parent Themes überschreiben.

3. functions.php im Ordner anlegen

Als zweite Information benötigt das Child Theme eine functions.php-Datei. Diese verknüpft die CSS-Datei mit dem Parent Theme und legt fest, dass erst das Stylesheet des Parent Themes und danach das Stylesheet des Child Themes geladen werden. Hierfür musst du Folgendes tun:

1. Erstelle ein Textdokument mit Namen „functions.php“.
2. Kopiere den folgenden Code ins Dokument:

<?php
function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));

}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>

Nun solltest du einen Ordner mit zwei Textdateien auf deinem Computer haben. Dieser wird im folgenden Schritt auf deinen FTP-Server geladen.

4. Child-Theme-Ordner auf dem Server hochladen

Zuerst musst du dich via FTP mit deinem Server verbinden, beispielsweise mit dem Programm Filezilla. Die Zugangsdaten bekommst du von deinem Provider.

Deine aktuell verfügbaren Themes findest du dort unter wp-content > themes. Darin lädst du nun deinen Child-Theme-Ordner hoch. Beachte bitte zwei Dinge:

1. Der Ordner muss auf der gleichen Ebene wie die anderen Themes liegen.
2. Sollten deine Dateien als „style.css.txt“ oder „functions.php.txt“ angezeigt werden, entferne jeweils das „txt“.

In Bild 2 siehst du, wie der Child-Theme-Ordner eingefügt wurde. In seinem Verzeichnis befinden sich die hochgeladenen Textdateien „style.css“ und „functions.php“ (Bild 3).

5. Child Theme in WordPress aktivieren

Zuletzt musst du dein Child Theme nur noch aktivieren. Das geht genauso wie bei allen anderen Themes: Gehe dazu in den Backend-Bereich deiner WordPress-Seite und klicke auf Design > Themes. Wenn alle bisherigen Schritte richtig durchgeführt wurden, solltest du hier das erstellte Child Theme vorfinden und aktivieren können.

Wie du in Bild 4 erkennen kannst, ist das Child Theme mit einem grau-weiß-karierten Hintergrund versehen. Möchtest du lieber ein Vorschaubild wie bei den anderen Themes haben, geht das ganz einfach. Es gibt zwei Möglichkeiten:

• Du machst einen Screenshot (sinnvollerweise von dem Parent Theme, auf das es sich ja bezieht) und lädst die png-Datei im entsprechenden Child-Theme-Ordner auf dem Server hoch.
• Du lädst die Screenshot-Datei („screenshot.png“) aus dem Parent-Theme-Ordner in FTP herunter und im Child-Theme-Ordner wieder hoch.

In jedem Fall sollte das Ergebnis in etwa so aussehen wie in Bild 5:

Fertig ist dein eigenes Child Theme, das du nun individuell nach deinen Wünschen anpassen kannst!