Ein Child-Theme für WordPress erstellen

Wer ein WordPress-Theme anpassen möchte, sollte das nie direkt im Original-Theme tun. Die saubere Lösung heißt Child-Theme. Dieser Artikel erklärt, was ein Child-Theme ist, welche Vorteile es hat und wie man eines erstellt – sowohl für klassische PHP-Themes als auch für moderne Block-Themes.

Was ist ein Child-Theme?

Ein Child-Theme ist ein Ableger eines übergeordneten Themes. Es erbt dessen Eigenschaften, kann aber gezielt überschrieben werden – ohne dass das Original-Theme selbst verändert wird. WordPress empfiehlt den Einsatz von Child-Themes ausdrücklich.

Vorteile eines Child-Themes

• Die Dateien des Original-Themes bleiben unverändert.
• Änderungen gehen bei einem Update des Original-Themes nicht verloren.
• Man behält den Überblick, welche Dateien tatsächlich geändert wurden.
• Einsteiger können Theme-Entwicklung ausprobieren, ohne das Original zu gefährden.
• Funktionale Erweiterungen lassen sich einfach über eine eigene functions.php ergänzen.

Ein Child-Theme erstellen – klassisches PHP-Theme

Unter /wp-content/themes/ ein neues Verzeichnis anlegen – z. B. rowling-child für ein Child des Themes rowling. In diesem Verzeichnis werden mindestens zwei Dateien benötigt:

style.css

/*
Theme Name: Rowling Child
Description: Ein Rowling Child-Theme
Author: Max Mustermann
Author URI: https://www.example.com
Template: rowling
Version: 1.0
*/

Der Wert unter Template muss exakt dem Verzeichnisnamen des übergeordneten Themes entsprechen.

functions.php

<?php
function child_theme_enqueue_styles() {
	wp_enqueue_style(
		'parent-style',
		get_parent_theme_file_uri( 'style.css' )
	);
	wp_enqueue_style(
		'child-style',
		get_stylesheet_directory_uri() . '/style.css',
		array( 'parent-style' ),
		wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Diese Variante mit get_parent_theme_file_uri() ist der aktuelle Weg und wird seit WordPress 4.7 empfohlen. In älteren Tutorials findet man noch get_template_directory_uri() – das funktioniert ebenfalls, ist aber nicht mehr zeitgemäß.

Optional: screenshot.png
Liegt eine Datei namens screenshot.png im Child-Verzeichnis, zeigt WordPress diese im Design-Bereich als Vorschaubild an. Die empfohlene Größe ist 1200 × 900 px.

Anschließend: Das Theme aktivieren

Nach dem Anlegen der Dateien erscheint das Child-Theme unter Design → Themes und kann dort aktiviert werden.

Style-Anpassungen vornehmen

Eigene CSS-Anpassungen gehören in die style.css des Child-Verzeichnisses. Am saubersten ist es, die relevante Regel aus dem Original zu kopieren und gezielt zu überschreiben:

.header {
	padding: 0 0 25px 0;
	background-color: #fff;
}

Funktioniert das Überschreiben nicht, weil eine Original-Regel spezifischer ist, kann !important helfen:

.header {
	padding: 0 0 25px 0 !important;
}

Wer eine Template-Datei wie z. B. footer.php anpassen möchte, kopiert diese aus dem Original-Theme-Verzeichnis, bearbeitet sie und legt sie im Child-Verzeichnis ab. WordPress verwendet dann automatisch die Child-Version.

Child-Themes bei Block-Themes (Full Site Editing)

Seit WordPress 5.9 gibt es neben klassischen PHP-Themes auch Block-Themes, die auf Full Site Editing (FSE) basieren. Child-Themes funktionieren dort grundsätzlich genauso – allerdings entfällt die functions.php für das Stylesheet-Einbinden, da Block-Themes kein klassisches CSS-Enqueueing benötigen. Anpassungen erfolgen stattdessen über eine theme.json im Child-Verzeichnis, die die Einstellungen des Parent überschreibt. Template-Dateien werden als HTML-Blöcke im Ordner /templates/ abgelegt.

Dieser Artikel konzentriert sich auf klassische PHP-Themes. Für Block-Themes gelten eigene Konventionen.