Child-Theme in WordPress anlegen

In diesem Beitrag soll es darum gehen, wie du in WordPress ein sogenanntes Child-Theme anlegst und welche Vorteile diese Vorgehensweise für die weitere Arbeit an deiner Website hat.

Was ist ein Child-Theme?

Ein Child-Theme ist eine Kopie von einer Vorlage, die du in WordPress nutzt. Dabei unterscheidet man zwichen Eltern-Theme und Child-Theme. Alle Themes, die es für WordPress gibt, haben eines gemeinsam – sie alle haben eine Basisvorlage als Ausgang, das Eltern-Theme. Diese Basis dient dazu, um eine Kopie anzulegen, damit an dieser Kopie weitergearbeitet werden kann.

Warum du ein Child-Theme anlegen solltest

Der Vorteil liegt darin, dass du an der Kopie Veränderungen vornehmen kannst, die auch nach einer Aktualisierung erhalten bleiben.

Beispiel
Du hast dir eine Vorlage aus dem Internet heruntergeladen und darin Anpassungen für Farben, Schriften und vieles mehr vorgenommen. Diese Veränderungen sind in deiner Vorlage gespeichert. Der Entwickler, der deine Vorlage einst programmiert hat, hat an dieser Vorlage Veränderungen vorgenommen, um z.B. neue Funktionen einzubauen oder um Sicherheitslücken zu schließen. Diese Veränderungen nennt man Updates. Das Update wird dir nun angezeigt. Du lädst dieses Update herunter. Damit veränderst du auch die Datei, in der du die Anpassungen für deine Farben, Schriften, etc. vorgenommen hast. Du musst also wieder von vorne anfangen und all deine Einstellungen wieder anpassen, wie sie vorher waren.

Damit das nicht passiert, wird ein Child-Theme angelegt. Bei einem Update wird nur das Eltern-Theme mit einem Update versehen, nicht aber das Child-Theme.

Child-Theme anlegen in nur 3 Schritten

Ein Child-Theme anzulegen ist gar nicht so schwer. Es erspart dir im Nachgang viel Arbeit bei den individuellen Anpassungen, wie ich bereits geschrieben habe.

1. Schritt: Anlegen eines neuen Ordners unter „Themes“

Mit Hilfe deines FTP-Programms legst du einen neuen Ordner unter dem Root-Verzeichnis bei WordPress an. Navigiere per FTP zu wp-content >>themes. Achte auf die Schreibrechte, damit du auch einen neuen Ordner anlegen kannst. Bei manchen Hostern sind die Schreibrechte stark eingeschränkt, sodass das Anlegen von Ordnern erst nach Anpassung der Rechte möglich ist. Benenne den Ordner nach deinem Theme z.B. Twenty-Rocks_Child

2. Schritt: Erstellen einer CSS-Datei

Nutze einen Textedidor wie Notepad oder PSPad, um eine neue Datei anzulegen. In die Datei schreibst du folgenden Code:

/*
 Theme Name:    My Child Theme
 Theme URI:     https://stachowitz-medien.de/webdesign
 Description:   Dein Partner für professionelle Websites mit WordPress
 Author:        Frank Stachowitz
 Author URI:    https://stachowitz-medien.de/cms
 Template:      Twenty_Rocks
 Version:       1.0.0
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
*/

Speichere diese Datei als style.css ab.

3. Schritt – Anlegen der function.php

Als letzten Schritt legen wir eine Datei an, die ebenfalls mit in den Ordner des Child-Themes gehört, die function.php. Speichere die Datei unter dem namen function.php ab.
In dieser Datei muss folgender Inhalt enthalten sein:

<?php
// Action Hook, um die eigenen Styles zu integrieren
add_action( 'wp_enqueue_scripts', 'childtheme_styles' );

function childtheme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ));
}

Zur Erklärung:

Mit dem Verweis parent-style…..’style.css‘ ist das Eltern-Theme und die darin befindliche CSS-Datei gemeint.
Mit dem Verweis child-style…..’style.css‘ ist das Child-Theme und die darin befindliche CSS-Datei gemeint.

Zum Schluss kannst du auch noch ein Bild für das Theme anlegen, sofern mehrere Personen an deinem Projekt arbeiten. Speichere das Bild unter screenshot.png ab. Lade nun alle 3 angelegten Dateien in dein zuvor angelegtes Verzeichnis Twenty-Rocks_Child, wie in meinem Beispiel. Aktiviere dein neues Child-Theme. Fertig!

Alternative wäre die temporäre Plugin-Lösung

Wenn du dir nicht zutraust, die hier beschriebene Variante zu nutzen, um ein Child-Theme anzulegen, dann kannst du es mit Hilfe eines Plugins lösen. Dieses Plugin wird aber nach dem Anlegen gleich wieder gelöscht.

Plugin installieren

Installiere das Plugin Child-Theme-Configurator. Nach der Installation erhältst du unter Werkzeuge einen neuen Reiter namens Kindthemen.

Wähle nun dein aktives Theme, welches als Child-Theme angelegt werden soll, aus. Klicke auf Untersuchen. Sofern die Prüfung ergab, dass dein Theme geeignet ist, kann es losgehen.

Belasse alle Einstellungen wie sie sind und klicke abschließend auf

Automatisch werden die function.php und die style.css in das Child-Theme übernommen. Solltest du weitere Dateien wie footer.php oder header.php mit in das Child-Theme übernehmen wollen, um weiteren Code darin zu platzieren, ist das ebenfalls möglich. Unter dem Reiter Dateien kannst du diese ebenfalls hinzufügen.