WordPress Child Themes: Der sichere Weg, dein Theme anzupassen

Du hast ein WordPress-Theme gefunden, das dir richtig gut gefällt, aber es fehlen noch ein paar kleine Details? Oder du möchtest Änderungen vornehmen, hast aber Angst, dass diese bei einem Theme-Update verloren gehen?

Dann ist ein Child Theme genau das Richtige für dich!

Ein Child Theme ist im Grunde eine "Kopie" deines Haupt-Themes (auch Parent Theme genannt), in der du alle Anpassungen vornehmen kannst, ohne das Original zu verändern.

Das Beste daran: Bei einem Update des Parent Themes bleiben alle deine Änderungen erhalten.

In diesem Artikel lernst du alles, was du über WordPress Child Themes wissen musst. Wir schauen uns an, was genau ein Child Theme ist, warum du es unbedingt nutzen solltest und wie du ganz einfach dein eigenes erstellst.

Egal ob du einfach nur die Schriftart ändern oder komplexere Anpassungen am Layout vornehmen möchtest – mit einem Child Theme bist du auf der sicheren Seite. Und keine Sorge, du musst kein:e Programmierer:in sein, um ein Child Theme zu erstellen und zu nutzen.

In den nächsten Abschnitten zeige ich dir Schritt für Schritt, wie du vorgehen musst. Außerdem gibt's konkrete Praxisbeispiele, damit du direkt loslegen kannst!

Warum solltest du ein Child Theme verwenden?

Du fragst dich vielleicht, warum du dir überhaupt die Mühe machen solltest, ein Child Theme zu erstellen, wenn du doch einfach das Haupt-Theme direkt anpassen könntest.

Hier sind die wichtigsten Gründe auf einen Blick:

1. Sicherheit bei Updates: Das ist der Hauptgrund für die Verwendung von Child Themes. Wenn du Änderungen direkt am Parent Theme vornimmst, gehen diese bei einem Update verloren. Stell dir vor, du hast stundenlang daran gearbeitet, die perfekte Farbkombination für deinen Header zu finden – und nach dem nächsten Update ist alles wieder weg. Mit einem Child Theme bleiben solche Anpassungen erhalten, egal wie oft das Parent Theme aktualisiert wird!
2. Einfachere Fehlersuche: Wenn etwas nicht funktioniert, weißt du sofort, dass es an deinen Änderungen im Child Theme liegt. Hast du zum Beispiel versucht, einen benutzerdefinierten Footer hinzuzufügen und plötzlich wird dein Menü nicht mehr richtig angezeigt? Du musst nicht im gesamten Parent Theme nach dem Problem suchen, sondern kannst dich direkt auf deine Änderungen im Child Theme konzentrieren.
3. Schnelles Zurücksetzen: Läuft etwas schief, kannst du einfach das Child Theme deaktivieren und deine Website sieht wieder aus wie vorher. Ein Klick und alles ist wieder beim Alten.
4. Flexibilität und Experimentierfreudigkeit: Du kannst nach Herzenslust experimentieren, ohne Angst haben zu müssen, dass du dein Parent Theme beschädigst. Möchtest du ausprobieren, wie deine Website mit einer anderen Schriftart aussieht oder wie ein transparenter Header wirkt? Mit einem Child Theme kannst du das alles gefahrlos testen.
5. Bessere Organisation: Alle deine Anpassungen sind an einem Ort. Ob du die Breite deines Inhaltsbereichs änderst, eigene Widgets hinzufügst oder das Design deiner Blogbeiträge anpasst – alles ist übersichtlich in deinem Child Theme zu finden.
6. Lerneffekt: Durch die Arbeit mit Child Themes lernst du viel über die Struktur von WordPress-Themes. Du verstehst besser, wie Template-Hierarchien funktionieren oder wie du Hooks und Filter einsetzt, um das Verhalten deines Themes zu ändern.

Mit einem Child Theme bist du also auf der sicheren Seite und kannst dein WordPress-Theme ganz nach deinen Vorstellungen anpassen – sei es eine kleine Farbänderung oder ein komplett neues Seitenlayout.

Wie funktionieren Child Themes?

Child Themes basieren auf einem cleveren Vererbungsprinzip in WordPress, ähnlich einer Familienhierarchie. Stell dir vor, das Parent Theme ist der Elternteil und das Child Theme das Kind, das bestimmte Eigenschaften erbt, aber auch eigene entwickeln kann.

Ein Child Theme erbt automatisch alle Funktionen, Templates und Styles des Parent Themes.

Das bedeutet, du musst nicht alles von Grund auf neu erstellen. Wenn du beispielsweise das beliebte Astra Theme als Parent nutzt, hast du sofort Zugriff auf all seine Layout-Optionen und Anpassungsmöglichkeiten.

Gleichzeitig kannst du jede Datei des Parent Themes in deinem Child Theme überschreiben, indem du eine Datei mit dem gleichen Namen erstellst.

Wichtig: Ein Child Theme funktioniert nur, wenn du das Parent Theme auch noch installiert hast! Das darfst du also auf keinen Fall löschen, nachdem du das Child Theme aktiviert hast – sonst funktioniert das mit der Vererbung natürlich nicht.

Möchtest du zum Beispiel das Standard-Seitenlayout ändern? Kopiere einfach die page.php aus dem Parent Theme in dein Child Theme und passe sie nach Belieben an.

Über die functions.php deines Child Themes hast du die Möglichkeit, neue Funktionen hinzuzufügen, ohne das Parent Theme zu berühren. Du könntest hier zum Beispiel einen benutzerdefinierten Post Type für dein Portfolio registrieren.

Was die Styles betrifft, so wird die style.css deines Child Themes nach der des Parent Themes geladen. Das bedeutet, deine CSS-Regeln haben Vorrang. Willst du die Schriftgröße der Überschriften ändern? Kein Problem, definiere sie einfach in deiner Child Theme style.css neu.

WordPress folgt einer bestimmten Hierarchie bei der Suche nach Template-Dateien. Es schaut zuerst im Child Theme nach einer Datei. Findet es keine, greift es auf das Parent Theme zurück. Das gibt dir die Flexibilität, nur die Teile zu ändern, die du wirklich anpassen möchtest.

Ein großer Vorteil von Child Themes zeigt sich, wie vorhin schon erwähnt: bei Aktualisierungen: Wenn das Parent Theme aktualisiert wird, bleiben alle Änderungen in deinem Child Theme erhalten.

Du profitierst also von Verbesserungen und Sicherheitsupdates des Parent Themes, ohne deine eigenen Anpassungen zu verlieren.

Schritt-für-Schritt-Anleitung: Ein Child Theme erstellen

Jetzt wird es praktisch! Lass uns gemeinsam ein Child Theme erstellen. Du wirst sehen, das ist einfacher, als du vielleicht denkst.

Folge einfach diesen Schritten:

Vorbereitung

Bevor du loslegst, stelle sicher, dass du alles hast, was du zur Erstellung deines Child Themes brauchst:

1. Zugriff auf dein WordPress-Verzeichnis: Du kannst entweder einen FTP-Client wie FileZilla verwenden oder, wenn dein Hosting-Anbieter das anbietet, einen Datei-Manager im Control Panel nutzen.
2. Ein Texteditor: Du brauchst einen einfachen Texteditor wie Notepad (Windows) oder TextEdit (Mac), um die notwendigen Dateien zu erstellen. Fortgeschrittene Nutzer:innen können auch Code-Editoren wie Visual Studio Code oder Sublime Text verwenden, die zusätzliche hilfreiche Funktionen bieten.
3. Grundlegende Kenntnisse in HTML und CSS: Während du für den Anfang nicht programmieren können musst, sind grundlegende Kenntnisse in diesen Sprachen hilfreich, um dein Child Theme anzupassen. KI-Chatbots wie ChatGPT oder Claude können dir an der Stelle aber auch super weiterhelfen!

Damit bist du bereit, dein erstes Child Theme zu erstellen.

Ordner und Dateien anlegen

1. Navigiere in deinem WordPress-Verzeichnis in FileZilla zu /wp-content/themes/.
2. Erstelle hier einen neuen Ordner für dein Child Theme. Benenne ihn am besten nach dem Schema dein-theme-child, also zum Beispiel astra-child, wenn Astra dein Parent Theme ist.
3. Erstelle mit dem Texteditor zwei Dateien: style.css und functions.php. Den benötigten Inhalt für diese Dateien findest du in den nächsten Abschnitten. Es ist wichtig, dass du die Dateien exakt so benennst.
4. Lade style.css und functions.php in den Ordner hoch, den du für dein Child Theme erstellt hast.
5. Optional kannst du eine Bilddatei screenshot.png hinzufügen, diese wird dann als Vorschaubild in WordPress verwendet.

style.css konfigurieren

Öffne die style.css und füge folgenden Code am Anfang ein:

/*
Theme Name: Dein Theme Child
Theme URI: http://example.com/dein-theme-child/
Description: Ein Child Theme von Dein Theme
Author: Dein Name
Author URI: http://example.com
Template: dein-theme
Version: 1.0.0
*/

/* Hier kommen deine CSS-Anpassungen */

Schauen wir uns diesen Code mal genauer an:

• Theme Name: Der Name deines Child Themes, wie er im WordPress-Backend angezeigt wird.
• Theme URI: Die Website deines Themes (optional).
• Description: Eine kurze Beschreibung deines Themes.
• Author: Dein Name oder der Name deines Unternehmens.
• Author URI: Deine Website (optional).
• Template: Das ist der wichtigste Teil! Hier musst du den genauen Ordnernamen des Parent Themes angeben. WordPress nutzt diese Information, um die Verbindung zwischen Parent und Child Theme herzustellen.
• Version: Die Version deines Child Themes.

Nach diesem Header-Bereich kannst du deine eigenen CSS-Regeln hinzufügen, um das Aussehen deines Themes anzupassen.

functions.php einrichten

In der functions.php fügst du folgenden Code ein:

<?php
function my_child_theme_enqueue_styles() {
    $parent_style = 'parent-style';
    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 ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );

// Hier kannst du weitere Funktionen hinzufügen

Dieser Code sorgt dafür, dass sowohl die Styles des Parent Themes als auch die deines Child Themes korrekt geladen werden.

Auch das schauen wir uns im Detail an:

1. function my_child_theme_enqueue_styles(): Dies definiert eine neue Funktion, die wir verwenden, um die Stylesheets zu laden.
2. $parent_style = 'parent-style';: Wir definieren einen Namen für das Parent-Stylesheet.
3. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );: Diese Zeile lädt das Stylesheet des Parent Themes. get_template_directory_uri() gibt den Pfad zum Parent Theme zurück.
4. Die nächsten Zeilen laden das Stylesheet des Child Themes:

• get_stylesheet_directory_uri() . '/style.css': Dies gibt den Pfad zur style.css des Child Themes an.
• array( $parent_style ): Dies stellt sicher, dass das Child-Stylesheet nach dem Parent-Stylesheet geladen wird.
• wp_get_theme()->get('Version'): Dies fügt die Versionsnummer deines Themes als Parameter zur URL hinzu, was beim Caching hilft.

5. add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );: Dies fügt unsere Funktion zum 'wp_enqueue_scripts' Hook hinzu, sodass WordPress weiß, wann es die Stylesheets laden soll.

Glückwunsch! Du hast gerade dein erstes Child Theme erstellt. Im nächsten Abschnitt zeigen wir dir, wie du es aktivierst und mit den ersten Anpassungen beginnst.

Tipp: Die meisten guten Themes bieten fertige Child Themes zum Download an. Schau mal auf der Website deines Theme-Entwicklers nach, ob es diese Option gibt. Das kann dir einige Schritte ersparen! Gleich noch mehr dazu.

Child Theme aktivieren und anpassen

Nachdem du dein Child Theme erstellt hast, ist es Zeit, es zu aktivieren und erste Anpassungen vorzunehmen. Hier erfährst du, wie das geht:

Child Theme aktivieren

1. Melde dich in deinem WordPress-Dashboard an.
2. Gehe zu "Design" > "Themes".
3. Du solltest nun dein neu erstelltes Child Theme in der Liste der verfügbaren Themes sehen.
4. Klicke auf "Aktivieren", um dein Child Theme zu aktivieren.

Keine Panik, wenn deine Website nach der Aktivierung des Child Themes zunächst genauso aussieht wie vorher. Das ist normal! Dein Child Theme erbt ja erstmal alle Eigenschaften des Parent Themes.

Als nächstes kannst du mit den Anpassungen beginnen.

Erste Anpassungen vornehmen

Hier sind drei praktische Beispiele, wie du dein Child Theme anpassen kannst. Diese gehen über die üblichen Anpassungen hinaus, für die du auch einfach den Customizer nehmen könntest.

1. Praxisbeispiel: Benutzerdefinierte Shortcodes erstellen

Shortcodes sind eine großartige Möglichkeit, komplexe Funktionen einfach in deine Beiträge und Seiten einzufügen. Hier ist ein Beispiel für einen benutzerdefinierten Shortcode, der ein responsives Video einbettet. Füge diesen Code in deine functions.php ein:

function responsive_video_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'url' => '',
            'width' => '640',
            'height' => '360'
        ),
        $atts,
        'responsive_video'
    );

    return '<div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
                    src="' . esc_url($atts['url']) . '" 
                    width="' . esc_attr($atts['width']) . '" 
                    height="' . esc_attr($atts['height']) . '" 
                    frameborder="0" 
                    allowfullscreen>
                </iframe>
            </div>';
}
add_shortcode('responsive_video', 'responsive_video_shortcode');

Jetzt kannst du in deinen Beiträgen oder Seiten den Shortcode [responsive_video url="https://www.youtube.com/embed/dQw4w9WgXcQ"] verwenden, um ein responsives Video einzubetten.

2. Praxisbeispiel: Benutzerdefinierter Post Type für Projekte

Wenn du regelmäßig über Projekte berichtest, weil du bspw. dein Freelancing-Portfolio auf der Website zeigst, kann ein benutzerdefinierter Post Type sehr nützlich sein.

Füge dazu diesen Code in deine functions.php ein:

function create_project_post_type() {
    register_post_type('project',
        array(
            'labels' => array(
                'name' => __('Projekte'),
                'singular_name' => __('Projekt')
            ),
            'public' => true,
            'has_archive' => true,
            'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
            'menu_icon' => 'dashicons-portfolio',
            'rewrite' => array('slug' => 'projekte'),
        )
    );
}
add_action('init', 'create_project_post_type');

Dieser Code erstellt einen neuen Post Type "Projekte" mit eigenem Icon im Dashboard. Du kannst nun Projekte separat von deinen regulären Beiträgen und Seiten verwalten.

3. Praxisbeispiel: Benutzerdefinierter Login-Bildschirm

Um deinen WordPress-Login-Bildschirm anzupassen, füge diesen Code in deine functions.php ein:

function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-logo.png);
            background-size: 300px;
            width: 300px;
            height: 100px;
        }
        body.login {
            background-color: #f1f1f1;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

Dieser Code ersetzt das WordPress-Logo auf dem Login-Bildschirm durch dein eigenes Logo (stelle sicher, dass du 'custom-logo.png' durch den tatsächlichen Namen deiner Logodatei ersetzt) und ändert die Hintergrundfarbe.

Tipps für erfolgreiche Anpassungen

• Teste deine Änderungen gründlich, besonders wenn du neue Funktionen wie Shortcodes oder benutzerdefinierte Post Types hinzufügst.
• Beachte bei der Erstellung von benutzerdefinierten Post Types, dass du möglicherweise auch benutzerdefinierte Templates in deinem Child Theme erstellen musst, um sie optimal darzustellen. Alternativ kannst du dafür auch einen Page Builder wie Elementor nutzen.
• Denke bei der Erstellung von Shortcodes daran, dass sie einfach zu verwenden sein sollten. Dokumentiere sie gut für andere Benutzer deiner Website (oder auch für dich selbst!).
• Sei vorsichtig mit Änderungen an Core-Funktionalitäten wie dem Login-Bildschirm. Stelle sicher, dass du keine wichtigen Funktionen beeinträchtigst.

Mit diesen Beispielen und Tipps hast du nun einige fortgeschrittene Möglichkeiten, dein Child Theme anzupassen und zu erweitern.

Diese Anpassungen gehen weit über das hinaus, was du normalerweise im Customizer erreichen könntest, und geben dir mehr Kontrolle über das Verhalten und die Funktionalität deiner WordPress-Website.

Noch ein weiteres Praxisbeispiel: Du kannst über die functions.php auch die Kommentarfunktion auf deinem Blog deaktivieren.

Vorgefertigte Child Themes: Eine zeitsparende Alternative

Es kann tatsächlich sehr lehrreich sein, ein Child Theme von Grund auf selbst zu erstellen – aber mir ist schon klar, dass nicht jede:r Lust darauf hat. 🙂

Glücklicherweise gibt es auch eine zeitsparende Alternative: vorgefertigte Child Themes. Viele moderne WordPress-Themes bieten mittlerweile fertige Child Themes zum Download an.

Das kann dir einige Schritte ersparen und ist besonders nützlich, wenn du schnell loslegen möchtest.

Vorteile vorgefertigter Child Themes

1. Zeitersparnis: Du musst nicht selbst die grundlegende Struktur erstellen.
2. Optimierte Kompatibilität: Diese Child Themes sind speziell für das Parent Theme optimiert.
3. Zusätzliche Funktionen: Teilweise enthalten sie bereits nützliche Anpassungen oder Erweiterungen.
4. Einfache Installation: Meistens kannst du sie wie ein normales Theme hochladen und aktivieren.

Wo findest du vorgefertigte Child Themes?

• Website des Theme-Entwicklers: Schau als erstes auf der offiziellen Website des Entwicklers deines Parent Themes nach.
• WordPress.org: Einige beliebte Themes haben Community-erstellte Child Themes im offiziellen WordPress-Verzeichnis.
• ThemeForest und andere Marktplätze: Hier findest du oft Premium Child Themes mit zusätzlichen Funktionen.

Beispiel: Astra Child Theme

Das beliebte Astra Theme bietet ein vorgefertigtes Child Theme an. Du kannst es direkt von ihrer Website herunterladen und installieren.

1. Gehe zur Astra-Website und lade das Child Theme herunter.
2. Gehe in deinem WordPress-Dashboard zu "Design" > "Themes" > "Theme hinzufügen".
3. Lade die heruntergeladene ZIP-Datei hoch und aktiviere das Child Theme.

Jetzt kannst du genauso Änderungen vornehmen wie bei einem selbst erstellten Child Theme.

Fazit: Vorteile von Child Themes auf einen Blick

Child Themes sind ein mächtiges Werkzeug in der WordPress-Entwicklung. Sie bieten dir die Möglichkeit, deine Website individuell anzupassen, ohne die Vorteile regelmäßiger Theme-Updates zu verlieren.

Hier die wichtigsten Vorteile nochmal kompakt zusammengefasst:

1. Sicherheit bei Updates: Deine Anpassungen bleiben bei Parent-Theme-Updates erhalten.
2. Flexibilität: Passe deine Website an, ohne das Haupttheme zu verändern.
3. Einfache Fehlerbehebung: Probleme lassen sich leichter isolieren und beheben.
4. Lernmöglichkeit: Erweiter dein Wissen über WordPress-Entwicklung.
5. Professionelle Arbeitsweise: Child Themes sind eine Best Practice in der Branche.

Die Arbeit mit Child Themes mag anfangs herausfordernd sein, aber mit etwas Übung wirst du schnell die Vorteile zu schätzen wissen.

Sie geben dir die volle Kontrolle über das Design und die Funktionalität deiner WordPress-Website, ohne dass du Kompromisse bei Sicherheit oder Aktualität eingehen musst.