Aktualisiert am

Ein Child-Theme in WordPress anlegen

SEO und WordPress Freelancer Hans-Jürgen Herbst

Hi, ich bin Hans-Jürgen – WordPress Freelancer und SEO-Experte. Ich baue jeden Tag Webseiten und arbeite grundsätzliche mit Child-Themes.

Ein Child-Theme ermöglicht es dir, Anpassungen an deinem Theme vorzunehmen und Funktionen durch eigenes JavaScript zu erweitern ohne das Original-Theme (auch Parent-Theme genannt) zu verändern. Ohne Child-Theme würden Änderungen bei Updates verloren gehen. Das Child-Theme erbt alle Funktionen, Stile und Vorlagen des Parent-Themes. Die Anleitung ist für Block-Themes geschrieben – ausdrücklich nicht für Pagebuilder wie Elementor.

Child-Theme in zwei Schritten

1. Plugin installieren

Eigentlich habe ich immer das Plugin Create Block Theme von wordpress.org dafür genutzt. Es ist aber bereits seit März buggy. Es versucht das Child-Theme im Verzeichnis des Eltern-Themes zu installieren, was zu einer Fehlermeldung führt. Darum empfehle ich diese Alternative: WP Child Theme Generator.

2. Theme erzeugen

Navigiere im Menü zu Design > Child Theme Gen

Wähle aus der Liste „Select a Theme“ dein Basis-Theme, an dem du Änderungen vornehmen möchtest. Trage einen beliebigen Namen für dein Theme ein. Die weiteren Felder sind optional.

Child in WordPress generieren

Sobald du auf „Erstellen“ klickst, wird dein Child-Theme erzeugt und aktiviert. Fertig.

Nutzung der functions.php

Die functions.php-Datei in einem Child-Theme ist ein mächtiges Werkzeug, das dir erlaubt, das Verhalten deines WordPress-Themes zu ändern oder zu erweitern. Hier sind einige Dinge, die du tun kannst:

  1. Eigene Skripte und Stylesheets hinzufügen (z.B. für visuelle Effekte)
  2. Gesperrte Funktionen freischalten (z.B. den Upload von SVG-Daten erlauben)
  3. Bestehende Funktionen anpassen (z.B. Das verhalten der Suchfunktion ändern)

Nicht jedes Block-Theme enthält per default eine functions.php. Du kannst dafür einfach eine leere Datei in das root-Verzeichnis deines Child-Themes ablegen.

Verbinde dich dafür via SFTP (zum Beispiel mit Filezilla) mit deinem Webspace, um die Datei hinzuzufügen.

Custom JavaScript und CSS

Umfangreiche Erweiterungen mit JavaScript und CSS sollten gekapselt in eigenen Dateien abgelegt werden. Achte auf die Verzeichnisrechte (664 für Dateien und 775 für Verzeichnisse)

  • themename/assets/js/custom-function.php
  • themename/assets/css/custom-styles.css

Gekapseltes JavaScript und CSS kann dann über die functions.php eingebunden werden:

function mein_child_theme_skripte() {
    // Eigene Styles hinzufügen
    wp_enqueue_style('mein-child-theme-css', get_stylesheet_directory_uri() . '/assets/css/mein-stil.css');
    // Eigene JavaScript-Dateien hinzufügen
    wp_enqueue_script('mein-child-theme-js', get_stylesheet_directory_uri() . '/assets/js/mein-skript.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'mein_child_theme_skripte');

Darum ist ein Child-Theme in WordPress hilfreich

  1. Anpassungen sicher vornehmen: Ein Child-Theme ermöglicht es dir, Anpassungen an deinem Theme vorzunehmen, ohne das Original-Theme (auch Parent-Theme genannt) zu verändern. Dies bedeutet, dass du Updates für das Parent-Theme installieren kannst, ohne dass deine Änderungen überschrieben werden. Ohne ein Child-Theme könnten benutzerdefinierte Anpassungen verloren gehen, wenn das Parent-Theme aktualisiert wird.
  2. Einfache Updates: Da das Parent-Theme unverändert bleibt, kannst du sicher sein, dass du von den neuesten Sicherheitsupdates und Funktionen profitierst, die vom Theme-Entwickler bereitgestellt werden, ohne deine Anpassungen zu verlieren.
  3. Lernen und Experimentieren: Für Anfänger oder Entwickler, die neue Techniken ausprobieren möchten, bietet ein Child-Theme eine großartige Umgebung, um mit WordPress zu experimentieren, ohne sich Sorgen machen zu müssen, das Haupttheme zu beschädigen oder ungewollte Änderungen vorzunehmen.
  4. Vererbung der Theme Funktionen: Ein Child-Theme erbt alle Funktionen, Stile und Vorlagen des Parent-Themes. Das bedeutet, dass du nicht von Grund auf neu beginnen musst, wenn du ein Design oder eine Funktionalität ändern möchtest. Stattdessen kannst du auf der Arbeit aufbauen, die bereits im Parent-Theme geleistet wurde.
  5. Benutzerdefinierte Anpassungen trennen: Durch die Verwendung eines Child-Themes kannst du benutzerdefinierte Anpassungen von den Kernfunktionen des Parent-Themes trennen. Das macht es einfacher, den Überblick über Änderungen zu behalten und sicherzustellen, dass benutzerdefinierte Funktionen klar von denen des Parent-Themes getrennt sind.

Insgesamt verbessert die Verwendung eines Child-Themes die Wartbarkeit, Sicherheit und Flexibilität deiner WordPress-Website und ist eine bewährte Praxis für die WordPress-Entwicklung.