Was ist ein WordPress Child-Theme? – Einfachere Custom Anpassungen deines Themes!

Wenn du eine WordPress-Website betreibst und dich tiefer mit dem Thema Design und Anpassungen auseinandersetzt, wirst du früher oder später auf den Begriff „Child-Theme“ stoßen. Doch was genau ist ein Child-Theme und wie unterscheidet es sich von einem normalen Theme? In diesem Beitrag erkläre ich dir, was ein WordPress Child-Theme ist und wie es funktioniert.

Was ist ein WordPress Child-Theme?

Ein Child-Theme in WordPress ist ein spezielles Theme, das von einem bereits bestehenden Theme, dem sogenannten Parent-Theme (Eltern-Theme), „erbt“. Ein Child-Theme übernimmt alle Funktionen, Designelemente und Vorlagen des Parent-Themes, kann jedoch eigenständig angepasst werden, ohne das Parent-Theme selbst zu verändern.

Im Wesentlichen besteht ein Child-Theme aus einer Reihe von Dateien, die sich auf das Parent-Theme beziehen und dessen Inhalte überschreiben oder erweitern können.

Aufbau eines Child-Themes

Ein Child-Theme besteht normalerweise aus nur wenigen Dateien. Zwei der wichtigsten Dateien, die jedes Child-Theme benötigt, sind:

style.css
Dies ist die Haupt-CSS-Datei, in der alle Designanpassungen für das Child-Theme gespeichert werden. Im Kopf dieser Datei verweist das Child-Theme auf das Parent-Theme, sodass klar ist, welches Design und welche Funktionen das Child-Theme erben soll.

/* Theme Name: Mein Child-Theme Template: parent-theme */

functions.php
Die Datei functions.php des Child-Themes kann genutzt werden, um Funktionen hinzuzufügen oder zu überschreiben. Auch hier werden die Funktionen des Parent-Themes geerbt, sodass du nur die Funktionen einfügen musst, die du zusätzlich verwenden oder ändern möchtest.

Wie funktioniert ein Child-Theme?

Ein Child-Theme funktioniert, indem es das Parent-Theme „überlagert“. Das bedeutet, dass WordPress zuerst auf das Parent-Theme zugreift, um alle notwendigen Dateien und Einstellungen zu laden. Wenn es jedoch eine Datei oder Einstellung im Child-Theme findet, wird diese bevorzugt verwendet. So kannst du beispielsweise das Design oder einzelne Funktionen ändern, ohne die ursprünglichen Dateien des Parent-Themes zu verändern.

Beispiel: CSS-Anpassungen mit einem Child-Theme

Angenommen, du möchtest die Hintergrundfarbe deiner Website ändern. Anstatt das Parent-Theme direkt zu bearbeiten, fügst du die gewünschten CSS-Anpassungen in die style.css-Datei des Child-Themes ein.

Zum Beispiel:

body { background-color: #f0f0f0; }

Diese Änderung wird angewendet, während alle anderen Designelemente des Parent-Themes erhalten bleiben.

Vorteile der Verwendung eines Child-Themes

• Anpassungen ohne Verlust des Originaldesigns: Da das Parent-Theme unangetastet bleibt, kannst du es jederzeit aktualisieren, ohne dass deine Anpassungen verloren gehen.
• Volle Kontrolle über Design und Funktionen: Ein Child-Theme ermöglicht es dir, einzelne Dateien oder Funktionen des Parent-Themes zu modifizieren oder zu erweitern.
• Flexibilität: Du kannst dein Child-Theme jederzeit weiterentwickeln, indem du zusätzliche CSS-Regeln oder PHP-Funktionen hinzufügst.

Wie erstelle ich ein Child-Theme?

Ein Child-Theme zu erstellen ist recht einfach. Hier sind die grundlegenden Schritte:

Neuen Ordner erstellen: Erstelle einen neuen Ordner im Verzeichnis /wp-content/themes/ deiner WordPress-Installation. Gib dem Ordner einen Namen, der dein Child-Theme beschreibt, z. B. mein-child-theme.

style.css erstellen: Erstelle im neuen Ordner eine Datei namens style.css und füge den oben erwähnten Header sowie deine CSS-Anpassungen hinzu.

functions.php erstellen: Erstelle eine Datei namens functions.php und füge, falls nötig, PHP-Funktionen oder Anpassungen hinzu. Hier ist ein Beispiel, wie du das Parent-Theme-Stylesheet in deinem Child-Theme einbinden kannst:

<?php function mein_child_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } add_action( 'wp_enqueue_scripts', 'mein_child_theme_enqueue_styles' ); ?>

Child-Theme aktivieren: Gehe in dein WordPress-Dashboard, navigiere zu Design > Themes, und aktiviere dein neues Child-Theme.