WordPress Child Theme erstellen: Anleitung für Anfänger

Was ist ein Child Theme?

Ein Child Theme ist eine "Erweiterung" deines Haupt-Themes (Parent Theme). Es erbt alle Funktionen und Styles des Parent Themes, lässt dich aber eigene Anpassungen vornehmen – die bei Theme-Updates NICHT überschrieben werden.

Warum du ein Child Theme brauchst:

• Update-sicher – Deine Änderungen bleiben nach Theme-Updates erhalten
• Saubere Trennung – Original-Theme bleibt unverändert
• Einfaches Debugging – Probleme leichter identifizieren
• Best Practice – Professionelle WordPress-Entwicklung

Was du brauchst

• FTP-Zugang oder Dateimanager im Hosting-Panel
• Text-Editor (VS Code, Notepad++)
• Grundkenntnisse in CSS (für Style-Änderungen)

Child Theme erstellen: Schritt für Schritt

/wp-content/themes/astra-child/

/*
 Theme Name:   Astra Child
 Theme URI:    https://deinedomain.de
 Description:  Child Theme für Astra
 Author:       Dein Name
 Author URI:   https://deinedomain.de
 Template:     astra
 Version:      1.0.0
*/

/* Deine eigenen CSS-Styles hier */

<?php
// Parent Theme Styles einbinden
function child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', 
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');
?>

CSS-Anpassungen im Child Theme

Jetzt kannst du in der style.css deines Child Themes eigene Styles hinzufügen:

/* Überschrift-Farbe ändern */
h1, h2, h3 {
    color: #0073aa;
}

/* Button-Style anpassen */
.button, button {
    background: linear-gradient(135deg, #0073aa, #00a0d2);
    border-radius: 8px;
}

/* Header-Hintergrund */
.site-header {
    background-color: #1a1a1a;
}

Template-Dateien überschreiben

Du kannst auch PHP-Templates des Parent Themes überschreiben. Kopiere einfach die Datei aus dem Parent Theme in dein Child Theme und bearbeite sie dort.

Beispiel: header.php anpassen

1. Kopiere /wp-content/themes/astra/header.php
2. Füge sie ein in /wp-content/themes/astra-child/header.php
3. Bearbeite die Kopie nach deinen Wünschen

WordPress nutzt automatisch die Datei aus dem Child Theme statt dem Parent.

Funktionen hinzufügen

In der functions.php kannst du eigene Funktionen hinzufügen:

// Eigene Widget-Area registrieren
function child_theme_widgets_init() {
    register_sidebar(array(
        'name'          => 'Eigene Sidebar',
        'id'            => 'custom-sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
    ));
}
add_action('widgets_init', 'child_theme_widgets_init');

// Excerpt-Länge ändern
function child_theme_excerpt_length($length) {
    return 25; // Wörter
}
add_filter('excerpt_length', 'child_theme_excerpt_length');

// Eigenes JavaScript einbinden
function child_theme_scripts() {
    wp_enqueue_script('custom-js', 
        get_stylesheet_directory_uri() . '/js/custom.js',
        array('jquery'),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'child_theme_scripts');

Best Practices für Child Themes

• Minimale Änderungen – Überschreibe nur was nötig ist
• Kommentiere deinen Code – Du wirst später froh sein
• Versioniere – Nutze Git für größere Änderungen
• Teste nach Parent-Updates – Manchmal ändern sich Klassen oder Funktionen