Wie du ein Child Theme erstellst – Anleitung

In dieser Anleitung erfährst du, wie du ein Child Theme in WordPress erstellst. Child Themes sind unerlässlich, um dein Theme sicher anzupassen, ohne die Möglichkeit von zukünftigen Updates zu verlieren. Folgen wir den notwendigen Schritten, um dein individuelles Design umzusetzen und dabei Best Practices zu berücksichtigen.

Einführung in Child Themes

Ein Child Theme ist ein spezielles WordPress-Theme, das auf einem bestehenden Theme – dem sogenannten Parent Theme – aufbaut. Es ermöglicht dir, Änderungen und Anpassungen am Design und an der Funktionalität vorzunehmen, ohne die Originaldateien des Parent Themes zu verändern. Diese Methodik ist besonders wichtig, da WordPress-Theme-Updates häufig sicherheitsrelevante sowie funktionale Verbesserungen bringen. Wenn du dein Parent Theme direkt bearbeitest, gehen alle Anpassungen verloren, sobald du das Update durchführst. Ein Child Theme bewahrt deine persönlichen Anpassungen und sichert somit die Integrität deiner Website.

Ein Beispiel, bei dem ein Child Theme nützlich sein kann, ist, wenn du individuelle Farben, Schriften oder Layouts für bestimmte Seiten benötigst, ohne dabei die gesamte Komplexität eines neuen Themes in Kauf zu nehmen. Auch wenn du spezifische Funktionen wie benutzerdefinierte Widgets oder Shortcodes hinzufügen möchtest, bietet ein Child Theme eine saubere und sichere Methode zur Implementierung.

Bevor du ein Child Theme erstellst, gibt es einige Überlegungen, die du anstellen solltest: Überprüfe, ob dein gewähltes Parent Theme tatsächlich gut strukturiert ist und die Funktionalität bietet, die du benötigst. Du solltest auch entscheiden, welche spezifischen Anpassungen du vornehmen möchtest – sei es das Hinzufügen von CSS-Stilen, das Übersteuern von Template-Dateien oder das Implementieren von benutzerdefiniertem PHP-Code.

Für den tatsächlichen Erstellungsprozess eines Child Themes sind folgende Schritte entscheidend: Stelle sicher, dass du über ausreichend Kenntnisse in CSS und ideally PHP verfügst, um Anpassungen effektiv vorzunehmen. Organisiere eine klare Vorstellung deiner Anpassungsziele und erstelle dann das Child Theme, indem du die notwendigen Dateien erstellst und strukturierst. Indem du diese ersten Überlegungen anstellst und planst, legst du den Grundstein für einen reibungslosen und effektiven Anpassungsprozess.

Erstellung der Verzeichnisstruktur

Um die Verzeichnisstruktur für ein Child Theme auf deinem Server zu erstellen, befolge diese Schritte sorgfältig. Zuerst musst du dich mit einem FTP-Client wie FileZilla oder über das Dateiverwaltungstool deines Webhosts verbinden.

1. Navigiere zum Themes-Verzeichnis: Gehe in das Verzeichnis deines WordPress-Installationsordners, dann öffne den Ordner wp-content, gefolgt von themes.
2. Erstelle einen neuen Ordner: Innerhalb des Themes-Ordners musst du einen neuen Ordner für dein Child Theme erstellen. Nenne diesen Ordner beispielsweise mein-child-theme, wobei "mein-child-theme" ein beschreibender Name ist, der auf dein übergeordnetes Theme verweist.
3. Erstelle die notwendigen Dateien: In deinem neuen Child Theme-Ordner solltest du die folgenden Dateien anlegen:

• - style.css: Diese Datei ist essenziell für dein Child Theme. Sie enthält die Informationen über dein Child Theme und die Styles, die du hinzufügen möchtest.
• - functions.php: Diese Datei wird verwendet, um zusätzliche Funktionen zu deinem Child Theme hinzuzufügen, wie das Einfügen der Styles des übergeordneten Themes.

1. Erstelle die grundlegende Struktur: In style.css sollte ein Kommentarblock am Anfang stehen, der das Child Theme identifiziert. Hier ein Beispiel:

   /*
   Theme Name: Mein Child Theme
   Template: name-des-uebergeordneten-themes
   */

In functions.php solltest du die Styles des übergeordneten Themes einbinden:

   <?php
   function mein_child_theme_style() {
       wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
   }
   add_action('wp_enqueue_scripts', 'mein_child_theme_style');

Nachdem du diese Dateien erstellt hast, aktiviere dein Child Theme über das WordPress-Dashboard unter „Design“ > „Themes“. Achte darauf, dass der Name des übergeordneten Themes korrekt im Kommentarblock der style.css steht; Fehler können dazu führen, dass das Child Theme nicht erkannt wird. Solltest du auf Probleme stoßen, überprüfe die Dateinamen und deren Schreibweise sorgfältig.

Die style.css Datei anpassen

Die file style.css ist eine der wichtigsten Dateien in Deinem Child Theme, da sie die Gestaltung und das Layout Deiner WordPress-Website steuert. In dieser Datei definiert Du die CSS-Regeln, die das Aussehen Deiner Website anpassen. Neben den Styles, die direkt definiert sind, enthält die style.css auch wichtige Metainformationen über das Child Theme.

Die grundlegenden Informationen, die in Deiner style.css enthalten sein müssen, sind:

• Theme-Name: Der Name Deines Child Themes.
• Template: Der Name des Parent-Themes, von dem Dein Child Theme ableitet.
• Version: Eine Versionsnummer für Dein Child Theme.
• Author: Dein Name oder der Name des Entwicklers.

Hier ist ein einfaches Beispiel für den Inhalt der style.css:

/*
Theme Name: Mein Child Theme
Template: parent-theme-name
Version: 1.0
Author: Dein Name
*/

body {
    background-color: #f5f5f5;
}

h1 {
    color: #333;
}

Um die style.css anzupassen, gehe wie folgt vor:

1. Öffne die Datei style.css in Deinem Child Theme-Ordner mit einem Texteditor oder einer IDE.
2. Füge die obigen Metainformationen ganz oben in die Datei ein. Achte darauf, dass der Name des Parent-Themes im Template korrekt ist.
3. Beginne, Deine CSS-Regeln unterhalb der Metainformationen hinzuzufügen. Hier kannst Du Änderungen am Layout vornehmen, wie z.B. Farben, Schriftarten und Abstände.
4. Speicher die Datei und lade sie zurück auf den Server, falls Du das lokal bearbeitet hast.
5. Überprüfe Deine Website im Browser und teste Deine Änderungen.

Durch das Anpassen der style.css kannst Du das Design Deiner Website effektiv steuern, ohne die Originaldateien des Parent-Themes zu verändern.

Die functions.php Datei erstellen

Die functions.php Datei spielt eine zentrale Rolle in deinem WordPress Child Theme, da sie es dir ermöglicht, verschiedene Funktionen hinzuzufügen oder bestehende Funktionen des Parent-Themes zu ändern. Diese Datei ist ähnlich wie die style.css Datei, jedoch liegt der Fokus hier auf der Programmierung und Funktionalität, anstatt auf dem Design. Wenn du ein Child Theme erstellst, kannst du die functions.php nutzen, um zum Beispiel Hooks und Filter hinzuzufügen, zusätzliche Funktionen zu implementieren oder Skripte und Stylesheets einzubinden.

Um die functions.php korrekt anzulegen, musst du zunächst eine neue Datei mit dem Namen „functions.php“ in deinem Child Theme-Verzeichnis erstellen. Der grundlegende Inhalt sollte sicherstellen, dass die Parent-Styles korrekt geladen werden. Ein einfaches Beispiel könnte wie folgt aussehen:

<?php
// Parent Theme StyleSheet laden
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; // Dieser Name sollte dem handle des Parent Styles entsprechen.

    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri(), array($parent_style));
}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

// Beispiel für eine neue Funktion
function my_custom_function() {
    // Hier kannst du beliebige PHP-Funktionen hinzufügen
    echo "Willkommen auf meiner Website!";
}

// Diese Funktion kannst du in deinem Template verwenden

In diesem Beispiel wird zunächst das Stylesheet des Parent-Themes geladen, gefolgt von deinem eigenen Child Theme-Stylesheet. Darüber hinaus demonstriert das Beispiel, wie du mit der Funktion „my_custom_function“ deine eigene Funktion definieren kannst, die du in anderen Templates verwenden kannst. Dies ist eine der einfachsten Methoden, deine WordPress-Seite zu erweitern, während du die Flexibilität eines Child Themes nutzt. In den folgenden Abschnitten werden wir uns darauf konzentrieren, wie du Template-Dateien aus dem Parent Theme in dein Child Theme kopierst und anpasst.

Anpassen von Templates

Um Template-Dateien aus dem Parent Theme in dein Child Theme zu kopieren und anzupassen, gehst du wie folgt vor. Zunächst musst du die zu bearbeitende Template-Datei im Parent Theme finden. Diese Dateien befinden sich in der Regel im Verzeichnis wp-content/themes/dein-parent-theme/. Ein häufiges Beispiel ist die header.php-Datei, die für die Kopfzeile deiner Website zuständig ist.

1. Vorbereitung: Erstelle ein Backup deiner Seite, bevor du Änderungen vornimmst. So kannst du im Fall eines Fehlers die ursprünglichen Dateien wiederherstellen.
2. Kopieren der Datei: Kopiere die gewünschte Template-Datei in dein Child Theme Verzeichnis (wp-content/themes/dein-child-theme/). Starte zum Beispiel mit der header.php.
3. Anpassung der Datei: Öffne die kopierte header.php in einem Texteditor. Du kannst nun Änderungen vornehmen. Ändere beispielsweise das Logo oder füge eine neue Navigationslink hinzu. Hier ein Beispiel, um die Site-Title-URL zu ändern:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

1. Testen: Speichere die Änderungen und lade die Datei auf den Server. Rufe deine Webseite auf und prüfe, ob die Anpassungen wie gewünscht angezeigt werden.

Ein häufiges Problem tritt auf, wenn du die Datei nicht richtig kopierst. Stelle sicher, dass die Dateinamen übereinstimmen und dass du im richtigen Verzeichnis arbeitest. Sollte die Änderung nicht sichtbar sein, kann es an Caching liegen. Lösche den Cache oder teste im Inkognito-Modus.

Diese Methodik gilt für jede Template-Datei. Wenn du z. B. die Seitenstruktur anpassen möchtest, kannst du die page.php ebenfalls kopieren. Der Prozess bleibt derselbe. Mit viel Übung wirst du schnell individuelle Templates erstellen können, die deinem Design entsprechen.

Best Practices und häufige Fehler

Beim Arbeiten mit Child Themes in WordPress gibt es einige bewährte Praktiken, die du befolgen solltest, um sicherzustellen, dass deine Anpassungen nicht nur effizient, sondern auch nachhaltig sind. Eine der wichtigsten Best Practices ist es, immer ein Backup deiner Website zu erstellen, bevor du Änderungen vornimmst. Das schützt dich davor, Datenverlust zu erleiden, falls etwas schiefgeht.

Ein weiterer entscheidender Punkt ist die Verwendung spezifischer CSS-Klassen. Du solltest sicherstellen, dass du deine eigenen CSS-Regeln so formulierst, dass sie spezifischer sind als die des Eltern-Themes, um ungewollte Überschreibungen zu vermeiden. Das Verwenden von Child Themes bedeutet, dass du die Möglichkeit hast, das Eltern-Theme zu aktualisieren, ohne deine Anpassungen zu verlieren. Wenn du Customizer-Änderungen vornimmst, notiere die spezifischen Einstellungen, die du geändert hast.

Häufige Fehler beim Erstellen von Child Themes sind das Vergessen, die „style.css“ korrekt zu enqueuen oder das Fehlen von wichtigen DateiReferenzen. Um diese Fehler zu vermeiden, solltest du immer sicherstellen, dass die „functions.php“ deines Child Themes die richtigen Handlungsanweisungen zum Laden der Styles und Skripte enthält. Ein einfaches Beispiel wäre:

function mein_child_theme_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'mein_child_theme_styles');

Um Änderungen zu testen und abzusichern, kannst du lokale Testumgebungen nutzen oder WordPress-Plugins wie „WP Staging“ verwenden. Um sicherzustellen, dass alles korrekt funktioniert, solltest du die Seite nach jeder signifikanten Änderung im Frontend und Backend prüfen. Schaffe dir eine Checkliste für die Überprüfung, um sicherzustellen, dass alle Links, Bilder und Funktionalitäten nach den Anpassungen einwandfrei laufen.

Fazit

Zusammenfassend hast du nun alle notwendigen Informationen, um ein Child Theme erfolgreich zu erstellen und anzupassen. Diese Methode ermöglicht es dir, Änderungen vorzunehmen, ohne die Integrität des Hauptthemes zu gefährden. Nutze die vorgestellten Best Practices, um deine WordPress-Seite optimal zu gestalten.