WordPress-Child-Theme anlegen: Anpassungen, die Updates überstehen

Ein Child-Theme ist ein eigenständiges WordPress-Theme, das auf einem übergeordneten Theme aufbaut. Es kann eigene CSS-Regeln, Funktionen und Vorlagendateien enthalten, während nicht angepasste Bestandteile weiterhin aus dem übergeordneten Theme stammen. Die Dateien des ursprünglichen Themes bleiben dabei unverändert.

Das ist besonders wichtig, wenn Sie Änderungen am Erscheinungsbild oder an der Ausgabe Ihrer Website vornehmen möchten. Werden solche Anpassungen direkt in Dateien des übergeordneten Themes gespeichert, können Aktualisierungen diese Änderungen überschreiben. Bei einem Child-Theme liegen Ihre eigenen Anpassungen dagegen in einem separaten Verzeichnis und bleiben bei einem Update des übergeordneten Themes normalerweise erhalten. Auch wenn ein Theme keine Übersetzungsfunktion mitbringt, führt der Weg über ein Child-Theme, siehe WordPress-Theme übersetzen.

Ein Child-Theme ist allerdings keine automatische Sicherung für sämtliche Einstellungen. Änderungen, die in der Datenbank gespeichert werden, etwa bestimmte Einstellungen im Website-Editor, sind davon unabhängig. Auch Funktionen, die ein Plugin bereitstellt, werden nicht allein dadurch dauerhaft, dass Sie ein Child-Theme einrichten.

Wann ein Child-Theme sinnvoll ist

Ein WordPress-Child-Theme eignet sich, wenn Sie wiederkehrende oder umfangreichere Anpassungen an einem vorhandenen Theme planen. Typische Beispiele sind:

• eigene CSS-Regeln für Abstände, Farben oder Schriftgrößen,
• angepasste PHP-Funktionen, die auf das Theme bezogen sind,
• Änderungen an einer Vorlage, die das übergeordnete Theme bereitstellt,
• eigene Vorlagen oder Template-Teile bei einem Block-Theme.

Für einzelne, geringfügige Änderungen kann ein Child-Theme mehr Aufwand verursachen als nötig. Manche Themes bieten eingebaute Einstellungen oder ein Feld für zusätzliches CSS. Solche Möglichkeiten können für kleine Anpassungen ausreichen. Welche davon verfügbar sind, hängt vom jeweiligen Theme ab.

Ein Child-Theme ist auch nicht der richtige Ort für jede individuelle Funktion einer Website. Funktionen, die unabhängig vom Design dauerhaft gebraucht werden sollen, sind in einem dafür geeigneten Plugin oft besser aufgehoben. So hängt die Funktion nicht an einem Theme-Wechsel. Die Entscheidung sollte davon abhängen, ob eine Anpassung zum Erscheinungsbild gehört oder eine allgemeine Funktion der Website bereitstellt.

Vor dem Anlegen: Ordnernamen und Theme-Dateien prüfen

Sie benötigen Zugriff auf die Dateien Ihrer WordPress-Installation, zum Beispiel über die Dateiverwaltung Ihres Hostings oder eine lokale Entwicklungsumgebung. Legen Sie Änderungen möglichst zunächst in einer nicht öffentlich genutzten Umgebung an. Erstellen Sie vor Dateiänderungen eine Sicherung, damit sich der vorherige Zustand bei einem Fehler wiederherstellen lässt.

Der Ordner des Child-Themes gehört in das Verzeichnis wp-content/themes/. Der Name dieses Ordners sollte eindeutig und einfach zuzuordnen sein, zum Beispiel seitenname-child. Das Verzeichnis des übergeordneten Themes muss ebenfalls dort vorhanden sein. Für den Eintrag im Child-Theme ist dessen technischer Ordnername entscheidend, nicht unbedingt der im Administrationsbereich angezeigte Name.

Ein einfaches Child-Theme enthält mindestens eine Datei namens style.css. Eine Datei functions.php ist nicht zwingend erforderlich, wird aber benötigt, wenn Sie eigene PHP-Funktionen ergänzen oder Stylesheets gezielt einbinden möchten. Bei einem Block-Theme können außerdem Dateien wie theme.json, Vorlagen im Ordner templates oder Template-Teile im Ordner parts dazugehören.

Die style.css korrekt anlegen

Legen Sie im neuen Child-Theme-Ordner eine Datei mit dem Namen style.css an. Sie benötigt am Anfang einen Theme-Kopf. Besonders wichtig sind der Name des Child-Themes und die Angabe Template. Ihr Wert muss exakt dem Ordnernamen des übergeordneten Themes entsprechen:

/*
 Theme Name: Seitenname Child
 Template: ordnername-des-uebergeordneten-themes
 Version: 1.0.0
*/

Die Versionsangabe ist optional und sollte nicht mit der Versionsnummer des übergeordneten Themes verwechselt werden. Ersetzen Sie ordnername-des-uebergeordneten-themes durch den tatsächlichen Verzeichnisnamen. Stimmen Ordnername und Angabe nicht überein, kann WordPress das übergeordnete Theme nicht zuordnen und das Child-Theme möglicherweise nicht korrekt laden.

Unterhalb des Theme-Kopfs können Sie CSS-Regeln ergänzen. Zum Beispiel lässt sich eine Eigenschaft für eine bestimmte Überschrift anpassen:

.entry-title {
  font-size: 2rem;
}

Der Selektor in diesem Beispiel muss zu den Elementen passen, die das übergeordnete Theme tatsächlich ausgibt. Ist er zu allgemein oder trifft er andere Bereiche als beabsichtigt, kann die Änderung unerwartete Folgen haben. Prüfen Sie deshalb die Darstellung nach jeder Anpassung in den relevanten Ansichten.

Stylesheets über die functions.php einbinden

Wie das übergeordnete Theme seine Stylesheets lädt, ist nicht bei jedem Theme gleich. Ein Child-Theme sollte die Stylesheets daher nicht blind mehrfach einbinden. Prüfen Sie zuerst die Theme-Dateien oder die Dokumentation des Themes, um festzustellen, ob und unter welchem Handle das Stylesheet des übergeordneten Themes geladen wird.

Wenn das übergeordnete Theme sein Stylesheet nicht selbst passend einbindet, kann eine Funktion in der functions.php des Child-Themes dafür genutzt werden. Ein mögliches Grundmuster sieht so aus:

<?php
add_action( 'wp_enqueue_scripts', 'seitenname_child_styles' );
function seitenname_child_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

Die Funktion get_template_directory_uri() bezieht sich auf das übergeordnete Theme, get_stylesheet_uri() verweist auf die style.css des aktiven Themes, in diesem Fall also auf das Child-Theme. Die Abhängigkeit sorgt dafür, dass das Stylesheet des Child-Themes nach dem angegebenen übergeordneten Stylesheet geladen wird.

Dieses Muster passt nicht in jeder Konstellation unverändert. Lädt das übergeordnete Theme sein CSS bereits mit einem eigenen Handle, kann die zusätzliche Einbindung eine doppelte Ausgabe verursachen. Passen Sie den Code dann an die tatsächliche Einbindung des Themes an. Ein schließendes PHP-Tag am Ende der functions.php ist nicht nötig und wird besser weggelassen, denn schon zusätzlicher Text nach einem solchen Tag kann unter Umständen zu unerwünschter Ausgabe führen.

Vorlagen und Funktionen sicher überschreiben

Ein Child-Theme kann bestimmte Vorlagendateien des übergeordneten Themes ersetzen. Dazu wird die betreffende Datei mit demselben relativen Pfad im Child-Theme abgelegt. Liegt eine Vorlage im übergeordneten Theme beispielsweise unter template-parts/content.php, lautet der entsprechende Pfad im Child-Theme ebenfalls template-parts/content.php.

WordPress verwendet dann bei passenden Vorlagen die Datei des Child-Themes. Das macht Änderungen an der Ausgabe möglich, bedeutet aber auch: Die eigene Kopie wird nicht automatisch an Änderungen der ursprünglichen Datei angepasst. Wenn das übergeordnete Theme seine Vorlage später erweitert oder korrigiert, müssen Sie prüfen, ob Ihre Kopie weiterhin kompatibel ist. Je mehr Dateien Sie überschreiben, desto mehr Pflege kann bei Aktualisierungen nötig werden.

Änderungen an PHP-Dateien können außerdem Fehler verursachen, wenn Syntax oder Funktionsnamen nicht stimmen. Arbeiten Sie deshalb schrittweise und kontrollieren Sie nach jeder Änderung, ob sich die Website und der Administrationsbereich weiterhin aufrufen lassen. Bei einem Fehler lässt sich die zuletzt geänderte Datei vorübergehend entfernen oder zurücksetzen, sofern Sie Zugriff auf die Dateien haben.

Child-Themes bei Block-Themes

Auch ein Block-Theme kann als übergeordnetes Theme eines Child-Themes dienen. Je nach gewünschter Anpassung kommen dafür unterschiedliche Dateien infrage. Globale Einstellungen und Gestaltungswerte können in einer theme.json des Child-Themes festgelegt werden. Block-Vorlagen gehören in den Ordner templates, Template-Teile in parts.

Nicht jede Änderung im Website-Editor wird jedoch in einer Theme-Datei gespeichert. Bestimmte Anpassungen können in der Datenbank liegen und dort Vorrang vor den Dateien des Themes haben. Wenn eine Änderung an der theme.json oder einer Vorlage scheinbar keine Wirkung zeigt, prüfen Sie deshalb auch, ob im Editor bereits eine entsprechende Anpassung gespeichert wurde.

Die Struktur und die Möglichkeiten hängen davon ab, ob das übergeordnete Theme klassisch aufgebaut ist oder auf dem Block-Editor basiert. Übernehmen Sie nicht einfach eine Dateistruktur aus einer anderen Theme-Art. Orientieren Sie sich an den vorhandenen Dateien und daran, welche Vorlage WordPress für den betreffenden Bereich verwendet.

Aktivieren und Änderungen prüfen

Sobald der Theme-Kopf korrekt ist und die benötigten Dateien bereitliegen, sollte das Child-Theme im Administrationsbereich unter den Themes erscheinen. Aktivieren Sie es zunächst in einer geeigneten Entwicklungs- oder Testumgebung und prüfen Sie anschließend die Website. Achten Sie insbesondere auf Seiten, Beiträge, Navigation, Kopf- und Fußbereich sowie Ansichten auf kleinen Bildschirmen.

Kontrollieren Sie auch, ob die Stylesheets geladen werden und ob Ihre Änderungen nur die vorgesehenen Elemente betreffen. Bei Änderungen an Vorlagen sollten Sie verschiedene Inhaltstypen ansehen, da eine Vorlage an mehreren Stellen verwendet werden kann. Bei PHP-Anpassungen ist zusätzlich wichtig, dass weder Fehlermeldungen noch leere Bereiche entstehen.

Dokumentieren Sie knapp, welche Dateien Sie geändert haben und welchem Zweck die Anpassungen dienen. Das erleichtert spätere Wartung und hilft dabei, Konflikte nach einem Update des übergeordneten Themes einzugrenzen. Prüfen Sie nach solchen Updates besonders die Dateien, die Sie im Child-Theme überschrieben haben.

Häufige Fragen zum WordPress-Child-Theme

Bleiben die Einstellungen des übergeordneten Themes nach der Aktivierung erhalten?

Beiträge, Seiten und Medien bleiben unverändert. Einstellungen, die WordPress je Theme speichert, etwa aus dem Customizer, gelten dagegen zunächst nur für das bisher aktive Theme und müssen nach dem Wechsel unter Umständen neu gesetzt werden, zum Beispiel die Zuordnung der Menüs. Prüfen Sie nach dem Wechsel die Website und die Einstellungen im Administrationsbereich.

Kann ein Child-Theme ohne functions.php funktionieren?

Ja. Für ein Child-Theme, das nur eigene CSS-Regeln oder Vorlagendateien enthält, ist eine functions.php nicht grundsätzlich erforderlich. Sie benötigen sie erst, wenn Sie eigene PHP-Funktionen hinzufügen oder bestimmte Dateien gezielt einbinden möchten.

Was passiert mit dem Child-Theme, wenn das übergeordnete Theme entfernt wird?

Das Child-Theme ist auf sein übergeordnetes Theme angewiesen und kann ohne dessen Dateien nicht vollständig arbeiten. Wird das übergeordnete Theme gelöscht, fehlen ihm die nicht im Child-Theme enthaltenen Vorlagen und Ressourcen. Entfernen Sie es daher nicht, solange das Child-Theme davon abhängt.

Kann ein Child-Theme für mehrere übergeordnete Themes verwendet werden?

Nein. Der Eintrag Template in der style.css verweist auf genau ein übergeordnetes Theme. Für ein anderes Theme muss ein eigenes Child-Theme mit passender Zuordnung angelegt werden.

Fazit

Ein Child-Theme trennt eigene Anpassungen von den Dateien des übergeordneten Themes und erleichtert so deren Erhalt bei Aktualisierungen. Entscheidend sind die korrekte Angabe des übergeordneten Ordners, eine passende Einbindung der Stylesheets und sorgfältig gepflegte Vorlagen. Prüfen Sie jede Änderung schrittweise und behalten Sie im Blick, welche Anpassungen in Dateien und welche unabhängig davon in der Datenbank gespeichert werden. Welches Theme sich als Grundlage eignet, behandelt der Beitrag WordPress-Theme auswählen, die Arbeit mit Vorlagen und Mustern der Beitrag zum Block-Editor. Alle Beiträge der Rubrik finden Sie unter WordPress.