WordPress Child Theme erstellen 2026: Anleitung mit Beispielcode

Was ist ein WordPress Child Theme

Das Konzept stammt aus WordPress 3.0 und ist seitdem unverändert. Es funktioniert, weil WordPress beim Laden eines Themes prüft, ob eine Datei im aktiven (Child-)Theme existiert. Wenn ja, wird sie genommen, sonst die aus dem Parent. Diese Fallback-Logik gilt für jede Template-Datei. Nur functions.php ist eine Ausnahme: beide werden geladen, Child-Variante zuerst.

Wann brauchst du ein Child Theme

Immer, sobald du irgendetwas am Theme-Code änderst. Wer nur über den Customizer arbeitet oder Elementor-Designs baut, kommt theoretisch ohne aus — sobald aber eine CSS-Zeile in style.css wandert oder ein PHP-Hook in functions.php kommt, ist das Child Theme Pflicht.

Konkrete Szenarien, in denen ein Child Theme 2026 alternativlos ist:

1. Eigenes CSS, das mehr als drei Zeilen umfasst oder Selektoren mit hoher Spezifität braucht
2. Anpassungen an functions.php: WooCommerce-Hooks, Yoast-Filter, eigene Shortcodes
3. Übernahme eigener Template-Dateien wie single.php, page.php, header.php, footer.php
4. Einbindung eigener JavaScript-Dateien per wp_enqueue_script
5. Übersetzungen oder Sprachdateien, die nicht im Parent vorhanden sind
6. Eigene Page Templates für besondere Layouts

Methode 1: Child Theme per Plugin (ohne FTP)

Für Site-Inhaber ohne Server-Zugang oder ohne PHP-Erfahrung ist ein Plugin der schnellste Weg. Das Plugin „Child Theme Configurator“ generiert in unter zwei Minuten ein vollständiges Child Theme inklusive korrekt formatierter style.css und functions.php.

Ablauf in WordPress 6.x mit Astra als Parent:

1. Plugins → Installieren → „Child Theme Configurator“ suchen, installieren, aktivieren
2. Werkzeuge → Child Themes öffnen
3. Schritt 1: „CREATE a new Child Theme“ wählen
4. Schritt 2: Astra als Parent auswählen
5. Schritt 4: „Use the WordPress style.css stylesheet handling for child themes“ (Standard)
6. Schritt 9: „Create New Child Theme“ klicken
7. Erscheinungsbild → Themes → „Astra Child“ aktivieren

Das Plugin erstellt im Verzeichnis wp-content/themes/astra-child/ alle nötigen Dateien. Nach der Aktivierung ist das Child Theme live. Astra-Customizer-Einstellungen werden automatisch übernommen, weil das Plugin sie kopiert.

Methode 2: Child Theme manuell anlegen

Mit FTP- oder File-Manager-Zugang dauert das manuelle Setup vier Minuten. Zwei Dateien reichen: style.css und functions.php. Diese Variante ist sauberer, weil sie kein Plugin als Dauer-Abhängigkeit braucht.

Schritt für Schritt für Astra:

1. Im FTP-Client zu wp-content/themes/ navigieren
2. Neuen Ordner anlegen: astra-child
3. Datei style.css mit Header (siehe Abschnitt 6) hochladen
4. Datei functions.php mit Enqueue-Code (Abschnitt 5) hochladen
5. Optional: screenshot.png 1200×900 px für die Theme-Übersicht
6. WP-Admin → Erscheinungsbild → Themes → „Astra Child“ aktivieren

Wer keinen FTP nutzt, kann auch über das Hosting-Backend (Plesk, cPanel, ISPConfig) oder ein File-Manager-Plugin wie „WP File Manager“ arbeiten. Die Schritte sind identisch.

functions.php richtig aufbauen

Die functions.php im Child Theme braucht 2026 nur einen Block: das korrekte Laden der Parent- und Child-Stylesheets per wp_enqueue_scripts-Hook. Alles andere kommt nach Bedarf dazu. Wer @import in der CSS nutzt, macht es falsch und verliert Performance.

<?php
/**
 * Astra Child Theme functions
 *
 * @package Astra Child
 */

// Parent + Child Stylesheets laden
add_action('wp_enqueue_scripts', function() {
 $parent = 'astra-theme-css';
 wp_enqueue_style($parent, get_template_directory_uri(). '/style.css');
 wp_enqueue_style(
 'astra-child-css',
 get_stylesheet_directory_uri(). '/style.css',
 [$parent],
 wp_get_theme()->get('Version')
 );
});

// Eigene Hooks ab hier
// Beispiel: WooCommerce-Cart-Icon entfernen
add_filter('astra_woo_header_cart_icon_class', '__return_empty_array');

Wichtig: get_template_directory_uri() zeigt auf das Parent-Verzeichnis, get_stylesheet_directory_uri() auf das Child. Wer beide vertauscht, lädt entweder das falsche CSS oder doppelte Dateien.

style.css Header-Syntax

Der CSS-Datei-Header oben in der style.css ist die einzige Datei, die WordPress beim Laden eines Themes prüft. Fehlt der Template-Eintrag oder ist falsch geschrieben, wird das Child Theme nicht erkannt und gar nicht erst in der Theme-Liste angezeigt.

Templates aus dem Parent überschreiben

Um eine Template-Datei aus dem Parent zu modifizieren, kopiert man sie 1:1 in den Child-Ordner und ändert dort. WordPress lädt automatisch die Child-Version. Diese Technik ersetzt 95 Prozent aller Hacks am Parent-Theme.

Beispiel: Wer den Footer in Astra individualisieren will, kopiert wp-content/themes/astra/footer.php nach wp-content/themes/astra-child/footer.php. Änderungen passieren nur im Child. Beim nächsten Astra-Update bleibt der Footer erhalten.

Vorsicht bei tiefer verschachtelten Pfaden: Astra nutzt für viele Komponenten template-parts/. Wer dort eine Datei überschreibt, muss die Verzeichnisstruktur im Child-Theme spiegeln: astra-child/template-parts/header/site-branding.php. WordPress findet sie nur, wenn der Pfad exakt stimmt.

Astra-spezifische Child-Theme-Tipps

Astra liefert ein offizielles Child Theme als ZIP-Download auf wpastra.com. Es ist sauber konfiguriert, frei verwendbar und spart das manuelle Anlegen.

Vorgehensweise 2026:

1. Auf wpastra.com unter „Child Themes“ das ZIP herunterladen
2. WP-Admin → Erscheinungsbild → Themes → Hinzufügen → Theme hochladen
3. ZIP installieren und aktivieren
4. Alle Astra-Customizer-Einstellungen bleiben erhalten, weil sie in der Datenbank stehen, nicht im Theme-Ordner

Astra-spezifische Hooks für Child-Theme-Anpassungen 2026: astra_header_before, astra_content_before, astra_footer_after. Komplette Liste auf wpastra.com/docs/. Für Elementor-Templates gilt: Theme Builder wird unabhängig vom Child Theme genutzt. Beide Techniken kollidieren nicht.

Häufige Fehler und ihre Fixes

Vergleich: Plugin vs. manuell vs. fertiges Astra-Child

Häufige Anwendungsfälle in der Praxis

Die meisten Child-Theme-Einsätze 2026 betreffen vier Bereiche: WooCommerce-Hooks, Login-Page-Branding, eigene Widget-Areas und Übersetzungs-Overrides. Wer diese vier Muster im Repertoire hat, deckt 90 Prozent der Kundenanfragen ab.

WooCommerce-Anpassungen: Eigene Shop-Sidebar, geänderte Bestellbestätigungs-Mails, individuelle Variant-Anzeige. Alles per functions.php-Hooks im Child Theme. Beispiel: add_filter('woocommerce_email_subject_new_order',.).

Login-Page-Branding: Standard-WP-Login zeigt das WordPress-Logo. Per Hook im Child Theme das eigene Logo, die eigene Brand-Farbe und einen Custom-Link einfügen. Code: add_action('login_enqueue_scripts',.) mit eigener CSS-Datei aus dem Child Theme.

Custom Widget-Areas: Wer eine Sidebar im Footer braucht, registriert sie via register_sidebar() im Child Theme und ruft sie in einer footer.php ab, die aus dem Parent kopiert wurde. So bleiben Footer-Anpassungen update-sicher.

Übersetzungs-Overrides: Wenn Astra einen Text falsch übersetzt oder einen Begriff im Kunden-Wording will, ersetzt das Child Theme per load_child_theme_textdomain() einzelne Strings. Schneller und sauberer als manuelle Suche in Plugin-Dateien.

Child-Theme-Workflow für Entwicklerteams

In Teams mit mehreren WordPress-Entwicklern wird das Child Theme typischerweise via Git versioniert. Der Theme-Ordner liegt unter wp-content/themes/projekt-child/ und wird ausgeschlossen aus dem WP-Auto-Update. Branches pro Feature, Pull-Requests vor Merge in main, Deployment via WP-Pusher oder rsync auf den Live-Server. Lokale Entwicklung passiert in Local by Flywheel, DevKinsta oder DDEV — alle drei bringen WordPress + MySQL + PHP 8.x als Ein-Klick-Setup mit. Beim Deployment werden nur Theme-Dateien gepusht, Datenbank-Inhalte werden separat synchronisiert (WP Migrate DB Pro oder WP-CLI). So bleibt der Live-Content unangetastet, während Code-Änderungen kontrolliert ausgerollt werden.

Häufige Fragen zu Child Themes 2026

Kostenloses Angebot
☎ Jetzt anrufen