Wie erstellt man ein WordPress Child Theme?

Datum: 13. September 2024
Autor: Bastian
Kategorie: Wordpress
Wordpress Child Themes

Ein Child Theme in WordPress zu erstellen ist relativ einfach und erfordert nur wenige Schritte. Hier eine einfache Schritt-für-Schritt-Anleitung, der auch Du ohne Probleme folgen kannst bist du dein erstes Child Theme erstellt hast:

1. Erstelle einVerzeichnis für das WordPress Child Theme

  • Melde dich auf deinem Webserver oder Hosting-Provider per FTP oder über den Dateimanager an.
  • Navigiere zu deinem WordPress-Installationsverzeichnis unter wp-content/themes.
  • Erstelle einen neuen Ordner für das Child Theme. Der Name des Ordners sollte das Eltern-Theme widerspiegeln, z. B. dein-theme-child, wenn das Haupt-Theme dein-theme heißt. Aber grundsätzlich ist der Name völlig dir überlassen.

2. style.css für das WordPress Child Theme

  • Öffne den neuen Ordner deines Child Themes und erstelle darin eine Datei namens style.css.

  • Diese Datei enthält die grundlegenden Informationen über dein Child Theme und verweist auf das übergeordnete Theme.

  • Füge folgenden Code in die style.css-Datei ein und passe ihn an:

/*
Theme Name:     Dein Theme Child
Theme URI:      https://example.com/dein-theme-child
Description:    Child Theme für Dein Theme
Author:         Dein Name
Author URI:     https://example.com
Template:       dein-theme
Version:        1.0.0
*/

/* Hier kannst du deine eigenen Styles einfügen */
  • Theme Name: Der Name des Child Themes.
  • Template: Hier muss der genaue Ordnername des Eltern-Themes eingetragen werden (z. B. dein-theme).
  • Styles: Füge eigene CSS-Anpassungen direkt nach dem Kommentarbereich hinzu.

3. functions.php Datei für das WordPress Child Theme

  • Im gleichen Verzeichnis (dein-theme-child) erstellst du eine weitere Datei mit dem Namen functions.php.

  • Diese Datei dient dazu, die style.css des Eltern-Themes zu laden und zusätzliche PHP-Funktionen hinzuzufügen.

Füge folgenden Code in die functions.php-Datei ein, damit die style.css des Eltern-Themes korrekt eingebunden wird:

<?php
// Stylesheet des Eltern-Themes laden
function dein_theme_child_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', 'dein_theme_child_enqueue_styles' );
?>

Dieser Code sorgt dafür, dass die Styles des Eltern-Themes geladen werden, bevor die des Child Themes angewendet werden.

4. Child Theme in WordPress aktivieren

  • Melde dich im WordPress-Dashboard an und gehe zu Design > Themes.
  • Du solltest nun dein Child Theme sehen, z. B. „Dein Theme Child“.
  • Klicke auf „Aktivieren“, um das Child Theme zu aktivieren.

5. Anpassungen am WordPress Child Theme

Jetzt ist dein Child Theme einsatzbereit! Du kannst:

  • CSS-Styles in der style.css-Datei anpassen.
  • PHP-Dateien wie header.php, footer.php, single.php usw. aus dem Eltern-Theme kopieren und im Child Theme anpassen.
  • Neue Funktionen zur functions.php hinzufügen.

Wichtige Hinweise zu WordPress Child-Themes

  • Dateien kopieren: Wenn du bestimmte Template-Dateien aus dem Eltern-Theme ändern möchtest, kopiere sie in den Child-Theme-Ordner und bearbeite sie dort. WordPress lädt die Datei aus dem Child Theme, falls vorhanden.
  • Backup und Tests: Teste alle Änderungen gründlich, bevor du live gehst, und behalte regelmäßig Backups deiner Dateien bei.

So hast du volle Kontrolle über Anpassungen in WordPress und kannst jederzeit problemlos auf das Haupt-Theme aktualisieren, ohne deine Änderungen zu verlieren! Wir empfehlen, wenn ihr nicht genau wisst was ihr tut, diese Änderungen zur Erstellung eines Child-Themes nicht am Live-Server vorzunehmen. Gerade am Anfang können sich schnell Fehler einschleichen, welche man dann nicht mehr wiederfindet und die Seite nicht erreichbar ist. Probiert Dinge immer erst auf einem Test-Server aus.

PS: Viele Kauf Themes von WordPress auf Plattformen wie Envato bieten schon eine fertige Child Theme Vorlage an.