Home » Webdesign lernen » WordPress Child Theme erstellen

WordPress Child Theme erstellen – Schritt für Schritt

In diesem Tutorial lernst du, wie du ein WordPress Child Theme erstellst, aktivierst und sicher für eigene Anpassungen nutzt. Ein Child Theme ist ideal, wenn du das Design oder Funktionen eines bestehenden Themes verändern möchtest, ohne das Parent Theme direkt zu bearbeiten. So bleiben deine Änderungen auch nach Updates erhalten.

1. Was ist ein Child Theme?

Ein Child Theme ist ein untergeordnetes Theme, das auf einem bestehenden Haupttheme, dem sogenannten Parent Theme, aufbaut. Das Child Theme übernimmt die Funktionen und das Design des Parent Themes und kann bei Bedarf gezielt überschrieben oder erweitert werden.

Das ist besonders praktisch, wenn du:

• CSS-Anpassungen vornehmen möchtest
• Template-Dateien ändern willst
• eigene PHP-Funktionen hinzufügen möchtest
• Updates des Parent Themes nicht verlieren willst

2. Wann solltest du ein Child Theme verwenden?

Ein Child Theme ist sinnvoll, wenn du ein bestehendes WordPress Theme individuell anpassen möchtest. Typische Anwendungsfälle sind:

• Farben, Abstände oder Schriftarten anpassen
• das Header- oder Footer-Layout ändern
• eigene Funktionen in functions.php ergänzen
• eine Template-Datei wie single.php oder page.php überschreiben

Wenn du nur kleine CSS-Änderungen machst, kann ein Child Theme trotzdem sinnvoll sein, weil du deine Anpassungen sauber getrennt hältst.

3. Ordnerstruktur für das Child Theme anlegen

Erstelle im WordPress-Theme-Verzeichnis wp-content/themes/ einen neuen Ordner für dein Child Theme. Der Ordnername kann frei gewählt werden, zum Beispiel mein-theme-child.

Mindestens diese Dateien brauchst du:

• style.css
• functions.php

Optional kannst du zusätzlich eine screenshot.png hinzufügen, damit das Theme im WordPress Backend ein Vorschaubild hat.

4. style.css anlegen

Die Datei style.css ist sehr wichtig, weil WordPress hier die Informationen über dein Child Theme liest. Der Header muss den Namen des Themes und den Verweis auf das Parent Theme enthalten.

/*
Theme Name: Mein Theme Child
Template: mein-theme
Author: Dein Name
Description: Child Theme für Mein Theme
Version: 1.0
Text Domain: mein-theme-child
*/

/* Eigene Anpassungen */
body {
  font-family: Arial, sans-serif;
}

Wichtig: Bei Template: musst du den exakten Ordnernamen des Parent Themes eintragen. Wenn dein Haupttheme zum Beispiel im Ordner mein-theme liegt, dann muss genau dieser Name dort stehen.

5. Parent-Theme-Styles korrekt einbinden

Damit das Child Theme das Design des Parent Themes übernimmt, müssen die Styles des Hauptthemes geladen werden. Das erledigst du in der functions.php deines Child Themes.

<?php
function mein_theme_child_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array('parent-style'),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'mein_theme_child_styles');

So werden zuerst die Styles des Parent Themes geladen und danach die Styles des Child Themes. Dadurch kannst du mit deinem eigenen CSS die vorhandenen Regeln überschreiben.

6. functions.php im Child Theme anlegen

Die Datei functions.php des Child Themes wird genutzt, um eigene Funktionen zu ergänzen. Du musst hier nicht die komplette functions.php des Parent Themes kopieren. Es reicht, wenn du nur deine zusätzlichen Funktionen einfügst.

<?php
// Eigene Funktionen für das Child Theme

Wenn du später eigene Funktionen brauchst, kannst du sie hier ergänzen. Zum Beispiel eigene Shortcodes, zusätzliche Menüs oder kleine Anpassungen an WordPress-Funktionen.

7. Eigene CSS-Anpassungen im Child Theme

Jetzt kannst du dein Child Theme mit eigenem CSS anpassen. Alles, was du in style.css unterhalb des Theme-Headers schreibst, überschreibt bei Bedarf die bisherigen Styles des Parent Themes.

/* Beispiel für eigene Anpassungen */
.site-header {
  background-color: #111;
  color: #fff;
}

.site-header a {
  color: #fff;
}

.site-footer {
  padding: 30px 0;
  text-align: center;
}

Wenn ein Stil nicht greift, kann das an der Reihenfolge der eingebundenen CSS-Dateien oder an spezifischeren Selektoren liegen.

8. Template-Dateien überschreiben

Ein großer Vorteil eines Child Themes ist, dass du einzelne Template-Dateien des Parent Themes überschreiben kannst. Kopiere dazu die gewünschte Datei aus dem Parent Theme in dein Child Theme und passe sie dort an.

Typische Dateien sind:

• header.php
• footer.php
• single.php
• page.php
• archive.php

WordPress verwendet dann automatisch die Datei aus dem Child Theme, wenn sie dort vorhanden ist.

9. Child Theme aktivieren

Sobald du die Dateien erstellt hast, kannst du das Child Theme aktivieren:

1. Ordner mit style.css und functions.php in wp-content/themes/ hochladen
2. Im WordPress Backend zu Design > Themes wechseln
3. Dein Child Theme auswählen und aktivieren
4. Website testen und prüfen, ob Design und Funktionen korrekt geladen werden

10. Häufige Fehler beim Child Theme

Wenn etwas nicht funktioniert, liegt es oft an einem dieser Punkte:

• Der Wert bei Template: ist falsch
• Die Datei style.css enthält keinen gültigen Theme-Header
• Das Parent Theme wird nicht korrekt eingebunden
• Cache oder Browser-Cache wurde nicht geleert
• Es wurde die falsche Template-Datei bearbeitet

Prüfe bei Problemen immer zuerst den exakten Ordnernamen des Parent Themes und ob die Dateien korrekt hochgeladen wurden.

11. Child Theme weiter anpassen

Wenn dein Child Theme aktiv ist, kannst du es nach und nach erweitern. Du kannst zum Beispiel:

• zusätzliche CSS-Dateien einbinden
• eigene Funktionen in functions.php schreiben
• Vorlagen für Beiträge und Seiten anpassen
• eigene Bereiche wie Widgets oder CTA-Boxen ergänzen

Kurze Zusammenfassung

• style.css: Enthält Theme-Header und eigene CSS-Regeln
• functions.php: Lädt Parent- und Child-Theme-Styles und ergänzt eigene Funktionen
• Template-Dateien: Können bei Bedarf aus dem Parent Theme übernommen und angepasst werden

Fazit

Mit einem WordPress Child Theme kannst du ein bestehendes Theme sicher und sauber anpassen, ohne Änderungen direkt im Haupttheme vorzunehmen. Das ist vor allem dann wichtig, wenn du Updates installieren möchtest und deine Anpassungen behalten willst.

Für kleine und große Projekte ist ein Child Theme deshalb oft die beste Lösung, wenn du auf ein vorhandenes Theme aufbauen möchtest.

So testest du dein Child Theme

1. Prüfe, ob der Ordnername des Parent Themes im Template:-Eintrag korrekt ist
2. Aktiviere das Child Theme im WordPress Backend
3. Kontrolliere, ob dein eigenes CSS geladen wird
4. Teste Änderungen an einer Template-Datei, zum Beispiel header.php