Kapitel 15: Child-Themes

15.1 Was sind Child-Themes?

Ein Child-Theme erbt alle Funktionen, Designs und Code eines Parent-Themes (Eltern-Theme).

Vorteile von Child-Themes

• ✅ Sicher Updates: Änderungen gehen nicht verloren
• ✅ Schnellerer Einstieg: Basierend auf existierendem Theme
• ✅ Sicherheit: Weniger Code selbst schreiben
• ✅ Einfach: Einfacher als ein komplett neues Theme

Nachteile

• ✅ Abhängig: Funktioniert nur mit Parent-Theme
• ✅ Eingeschränkt: Kann Parent-Theme nicht vollständig ändern

15.2 Child-Theme erstellen (Kern-Dateien)

Dateistruktur

wp-content/themes/
├── parent-theme/       # Original-Theme (nicht bearbeiten!)
│   ├── style.css
│   ├── index.php
│   └── functions.php
└── child-theme/        # Unser Child-Theme
    ├── style.css        # (Pflicht) Theme-Informationen + CSS
    ├── functions.php    # (Pflicht) Funktionen
    └── screenshot.png   # (Optional) Vorschaubild

15.3 style.css für Child-Theme

Child-Theme style.css

/*
 Theme Name:   Mein Child-Theme
 Theme URI:    https://example.com/mein-child-theme/
 Description:  Child-Theme für Parent-Theme
 Author:       Ihr Name
 Author URI:   https://example.com
 Template:     parent-theme       /* ⚠️ WICHTIG: Ordnername des Parent-Themes */
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  mein-child-theme
*/

⚠️ Wichtig: Template: muss exakt den Ordnernamen des Parent-Themes entsprechen!

15.4 functions.php für Child-Theme

Parent-Themes CSS laden

<?php
function mein_child_theme_enqueue_styles() {
    // Parent-Theme CSS laden
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    
    // Child-Theme CSS laden (abhängig von Parent-CSS)
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'mein_child_theme_enqueue_styles');
?>

Erklärung:

• get_template_directory_uri(): URL zum Parent-Theme
• get_stylesheet_directory_uri(): URL zum Child-Theme

15.5 Template-Dateien überschreiben

Template-Hierarchie

WordPress sucht zuerst im Child-Theme nach Template-Dateien.

Beispiel:

Wenn Sie single.php im Child-Theme erstellen:

Parent-Theme: single.php      (wird ignoriert)
Child-Theme:  single.php      (wird verwendet) ✅

single.php im Child-Theme überschreiben

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while (have_posts()) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <h1 class="entry-title"><?php the_title(); ?></h1>
            </header>

            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
        <?php
    endwhile;
    ?>
</main>

<?php get_footer(); ?>

15.6 Funktionen überschreiben

functions.php erweitern (nicht überschreiben!)

Parent-Theme functions.php:

function parent_theme_setup() {
    // Funktionen
}
add_action('after_setup_theme', 'parent_theme_setup');

Child-Theme functions.php:

// Parent-Funktion deregistrieren
function mein_child_theme_remove_parent_functions() {
    remove_action('after_setup_theme', 'parent_theme_setup');
}
add_action('after_setup_theme', 'mein_child_theme_remove_parent_functions', 0);

// Eigene Funktion hinzufügen
function mein_child_theme_setup() {
    // Eigene Funktionen
}
add_action('after_setup_theme', 'mein_child_theme_setup');

15.7 Child-Theme aktivieren

Schritt 1: Ordner erstellen

Erstellen Sie wp-content/themes/mein-child-theme/.

Schritt 2: style.css erstellen

Fügen Sie den Header-Block (siehe 15.3) hinzu.

Schritt 3: functions.php erstellen

Fügen Sie den Code zum Laden des Parent-CSS hinzu (siehe 15.4).

Schritt 4: Theme aktivieren

1. Gehen Sie zu Design → Themes
2. Sie sollten "Mein Child-Theme" sehen
3. Klicken Sie auf "Aktivieren"

15.8 Änderungen vornehmen

CSS ändern

Fügen Sie in Child-Theme style.css hinzu:

/* Parent-Theme CSS überschreiben */
.site-header {
    background-color: #ff0000;  /* Rot statt Blau */
}

Template ändern

Erstellen Sie eine Datei im Child-Theme mit demselben Namen wie im Parent-Theme.

Beispiel:

Parent: page.php
Child:  page.php  (überschreibt Parent)

15.9 Häufige Fehler

Fehler: "Theme Broken" (Template fehlt)

Ursache: Template: in style.css ist falsch.

Lösung:

Überprüfen Sie, ob der Ordnername des Parent-Themes exakt übereinstimmt.

Fehler: Styles werden nicht geladen

Ursache: functions.php lädt Parent-CSS nicht.

Lösung:

Fügen Sie den wp_enqueue_style()-Code in functions.php hinzu.

📝 Übung 15: Child-Theme erstellen

Ziel: Erstellen Sie ein Child-Theme für ein existierendes Theme.

Schritte:

1. Wählen Sie ein Parent-Theme (z.B. "Twenty Twenty-Four")
2. Erstellen Sie einen Child-Theme-Ordner
3. Erstellen Sie style.css mit Template: twentytwentyfour
4. Erstellen Sie functions.php zum Laden des CSS
5. Ändern Sie eine CSS-Eigenschaft
6. Aktivieren Sie das Child-Theme

---

✅ Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Was Child-Themes sind und warum man sie verwendet
• ✅ Child-Theme-Dateien zu erstellen (style.css, functions.php)
• ✅ Parent-Themes CSS korrekt zu laden
• ✅ Template-Dateien sicher zu überschreiben
• ✅ Funktionen zu erweitern

Nächstes Kapitel: Wir lernen Fehlerbehebung kennen.

➡️ Zu Kapitel 16: Fehlerbehebung →