Divi Child Theme anlegen: Eine ausführliche Anleitung

Ein Divi Child Theme ist eine leistungsstarke Möglichkeit, das beliebte Divi Theme von Elegant Themes anzupassen, ohne das Haupttheme zu verändern. Diese Methode ermöglicht es, individuelle Änderungen vorzunehmen und gleichzeitig von Updates des Eltern-Themes zu profitieren. Hier folgt eine detaillierte Anleitung zur Erstellung eines Divi Child Themes.

Divi Child Theme anlegen

Vor Beginn der Child Theme-Erstellung sollten folgende Voraussetzungen erfüllt sein:

  1. Ein installiertes und aktiviertes Divi Theme
  2. Zugriff auf den Webserver via FTP oder über das WordPress-Dashboard
  3. Ein einfacher Texteditor (z.B. Visual Studio Code oder Notepad++)
  4. Optional: Ein Bildbearbeitungsprogramm für das Erstellen eines Theme-Screenshots

Methoden zur Erstellung eines Divi Child Themes

Es gibt mehrere Möglichkeiten, ein Divi Child Theme zu erstellen:

  1. Manuelles Erstellen (DIY-Methode)
  2. Verwendung eines Plugins
  3. Download eines vorgefertigten Child Themes

Diese Anleitung konzentriert sich auf die manuelle Erstellung, da sie am lehrreichsten ist und für andere Themes angewendet werden kann.

Was ist ein WordPress Child Theme?

Ein WordPress Child Theme ist ein Theme, das die Funktionalität und das Styling eines anderen Themes (Parent Theme) erbt. Es wird verwendet, um Änderungen vorzunehmen, ohne das Original-Theme direkt zu bearbeiten. Dadurch bleiben Anpassungen auch nach Updates des Parent Themes erhalten. Mit einem Child Theme können CSS- und PHP-Dateien geändert, Funktionen hinzugefügt oder Templates überschrieben werden, während das Parent Theme unangetastet bleibt

1. Schritt Ordner erstellen

Schritt-für-Schritt-Anleitung

Zunächst muss ein neuer Ordner für das Child Theme angelegt werden:

  • Verbinde per FTP mit deinem Webserver
  • Navigiere zum Verzeichnis /wp-content/themes/
  • Erstelle einen neuen Ordner mit dem Namen „divi-child“

Bei Verwendung von FTP: Navigiere zum Verzeichnis /wp-content/themes/ und einen neuen Ordner erstellen, z.B. „divi-child“
Lokal: Einen neuen Ordner auf dem Desktop anlegen, z.B. „DiviChild“

2. Schritt Style.css erstellen

Die style.css ist eine essentielle Datei für das Child Theme. Sie enthält wichtige Informationen und kann für benutzerdefinierte CSS-Anpassungen verwendet werden.

  1. Eine neue Textdatei erstellen und „style.css“ benennen.
  2. Folgenden Code in die Datei einfügen:
/*
Theme Name: Divi Child Theme
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Ein Child Theme für Divi
Author: [Name des Autors]
Author URI: [Website des Autors]
Template: Divi
Version: 1.0.0
*/

/* =Hier können benutzerdefinierte CSS-Anpassungen vorgenommen werden
——————————————————- */

3. Erstellen der functions.php

Die functions.php ist die zweite wichtige Datei für das Child Theme. Sie ermöglicht es, zusätzliche Funktionen hinzuzufügen und das Eltern-Theme-Stylesheet einzubinden.

  1. Eine neue Textdatei erstellen und „functions.php“ benennen.
  2. Folgenden Code in die Datei einfügen

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

4. Child Theme hochladen

 Optionales Screenshot erstellen

Ein Screenshot verleiht dem Child Theme im WordPress-Dashboard ein visuelles Erscheinungsbild:

  1. Erstelle ein Bild mit den Maßen 1200 x 900 Pixel
  2. Speichere das Bild als "screenshot.png" im Child Theme-Ordner

Child Theme hochladen

Wenn das Child Theme lokal erstellt wurde, muss es auf den Webserver hochgeladen werden:

  1. Komprimiere den Child Theme-Ordner zu einer ZIP-Datei
  2. Navigiere im WordPress-Dashboard zu "Design" > "Themes" und klicke auf "Hinzufügen"
  3. Wähle dann "Theme hochladen" und selektiere die ZIP-Datei
  4. Klicke danach auf "Jetzt installieren"

5. Child Theme aktivieren

Nach dem erfolgreichen Upload kann das Child Theme aktiviert werden:

  • Gehe im WordPress-Dashboard zu "Design" > "Themes"
  • Finde das neu erstellte Child Theme und klicke auf "Aktivieren"
  • 6. Anpassungen vornehmen

    Nach der Aktivierung des Child Themes können individuelle Anpassungen vorgenommen werden:

  • CSS-Änderungen in der style.css vornehmen
  • Zusätzliche Funktionen in der functions.php hinzufügen
  • Bei Bedarf Template-Dateien aus dem Eltern-Theme in das Child Theme kopieren und anpassen
  • Vorteile eines Divi Child Themes

  • Sicherheit bei Theme Updates: Änderungen bleiben erhalten
  • Einfache Verwaltung von Anpassungen
  • Möglichkeit, Funktionen des Eltern Themes zu überschreiben
  • Bessere Organisation des Codes
  • Divi Child Theme nachträglich erstellen - geht das ?

    Ja, du kannst ein Divi Child Theme nachträglich erstellen, auch wenn du bereits mit dem Haupttheme gearbeitet hast. Dabei bleiben deine bisherigen Inhalte erhalten. Hier sind zwei Methoden, um das Child-Theme nachträglich zu erstellen:

    Methode 1: Manuell ein Child Theme erstellen

    1. Verbinde dich mit deinem Hosting-Server (per FTP oder Dateimanager im Hosting-Backend).
    2. Erstelle einen neuen Ordner unter wp-content/themes/ – z. B. divi-child.
    3. Erstelle eine style.css-Datei in diesem Ordner und füge diesen Code ein:
    /*
    Theme Name: Divi Child
    Template: Divi
    Version: 1.0
    */

    4. Erstelle eine functions.php-Datei und füge folgenden Code ein, damit dein Child-Theme die Styles vom Parent-Theme übernimmt:

    <?php
    function enqueue_child_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    }
    add_action('wp_enqueue_scripts', 'enqueue_child_styles');
    ?>n: 1.0
    */

    5. Aktiviere das Child Theme in WordPress > Design > Themes.

    Methode 2: Mit einem Plugin ein Child Theme erstellen

    Falls du kein FTP nutzen möchtest, geht es auch mit dem Plugin Child Theme Configurator:

    1. Gehe zu Plugins > Installieren und suche nach Child Theme Configurator.
    2. Installiere und aktiviere das Plugin.
    3. Gehe zu Werkzeuge > Child Themes.
    4. Wähle Divi als Parent-Theme und klicke auf Child Theme erstellen.
    5. Nach der Erstellung aktiviere das Child-Theme unter Designs > Themes.

    Was passiert mit bisherigen Anpassungen?

    • Falls du eigene CSS-Anpassungen in Design > Customizer > Zusätzliches CSS gemacht hast, bleiben diese erhalten.
    • Falls du Änderungen in den Theme-Dateien vorgenommen hast, solltest du diese in das neue Child-Theme übertragen.

    Divi Child Theme mit einem Plugin erstellen

    Ein Plugin kann den Prozess der Erstellung eines Child Themes vereinfachen. Hier sind die Schritte:

    1. Plugin installieren:

    Gehe zu "Plugins > Installieren" und suche nach einem Plugin wie "Child Theme Configurator" oder "WP Child Theme Generator"
    Installiere und aktiviere das Plugin.

    2. Child Theme erstellen:

    Öffne das Plugin unter "Werkzeuge > Kindthemen" oder "Design > Child Theme Generator".

    Wähle das Parent Theme (Divi) aus.
    Gib dem Child Theme einen Namen und passe optionale Einstellungen wie Autorname oder Screenshot an.

    3. CSS-Anpassungen übertragen:

    Das Plugin bietet oft Optionen, um bestehende CSS-Anpassungen automatisch ins Child Theme zu integrieren.

    4. Aktivieren:

    Nach der Erstellung findest du das Child Theme unter "Design > Themes". Klicke auf "Aktivieren", um es zu verwenden

    CSS-Anpassungen ins Child Theme übertragen

    Um bestehende CSS-Anpassungen in ein neues Divi Child Theme zu übernehmen:

    1. Anpassungen exportieren:
      • Öffne den WordPress-Customizer und kopiere alle benutzerdefinierten CSS-Regeln.

    2. In die style.css einfügen:
      • Füge die kopierten Regeln in den Bereich für benutzerdefinierte Anpassungen in der style.css des Child Themes ein:
    css
    /* Benutzerdefinierte Anpassungen */
    body {
    background-color: #f0f0f0;
    }
    3. Prüfen:

    • Nach der Aktivierung des Child Themes sicherstellen, dass alle Anpassungen korrekt übernommen wurden.

    Kann man Divi ohne ein Child Theme nutzen?

    Ja, es ist möglich, Divi ohne ein Child Theme zu verwenden – es kommt darauf an, welche Anpassungen du vornehmen möchtest. Divi bietet mehrere Möglichkeiten, um benutzerdefinierten Code hinzuzufügen, z. B.:

    • Divi Builder
    • Theme Customizer
    • Theme Einstellungen

    Diese Änderungen bleiben auch nach einem Theme-Update erhalten. Außerdem optimiert Divi automatisch den Code durch Minifizierung und Caching, sodass sich die Ladegeschwindigkeit nicht verschlechtert.

    Hier sind die Fälle, in denen du ein Divi Child Theme nutzen solltest oder nicht:

    ✅ Du solltest ein Child Theme verwenden, wenn...

    • Du Änderungen an Theme-Dateien wie functions.php oder an Templates vornehmen möchtest.
    • Du umfangreichen Code (mehrere hundert Zeilen CSS, JavaScript etc.) einfügst.
    • Du mit einem Team arbeitest und eine organisierte Struktur für Änderungen benötigst.

    ❌ Du brauchst kein Child Theme, wenn...

    • Du nur kleine Anpassungen machst (z. B. weniger als 100 Zeilen CSS oder ein paar Skripte).
    • Du alleine arbeitest und keinen Entwickler beauftragst. Falls doch, wird dieser möglicherweise selbst ein Child Theme erstellen.

    Ein Child Theme ist nicht zwingend nötig, wenn du nur kleinere Änderungen machst. Planst du jedoch größere Anpassungen, ist es die beste Wahl.

    Fazit

    Ein Divi Child Theme lässt sich sowohl manuell als auch mit Plugins erstellen – auch nachträglich. Die manuelle Methode bietet mehr Kontrolle, während Plugins den Prozess vereinfachen. Wichtig ist, vor der Umstellung ein Backup zu erstellen und bestehende Anpassungen sorgfältig ins neue Child Theme zu übertragen

    FAQs - Divi Child Theme

    Was ist ein Divi Child Theme?
    Ein Divi Child Theme ist ein untergeordnetes Theme, das auf dem Theme Divi basiert. Es ermöglicht dir, Anpassungen am Design und Code vorzunehmen, ohne das ursprüngliche Divi Theme zu verändern. Dadurch bleiben deine Änderungen auch nach einem Divi Update erhalten.
    Warum ein Child Theme in WordPress nutzen?
    Ein Child Theme hat mehrere Vorteile:

    ✅ Updatesicher – Änderungen bleiben auch nach einem Theme-Update erhalten.
    ✅ Flexibilität – Du kannst eigene CSS- und PHP-Code-Anpassungen vornehmen.
    ✅ Fehlersicherheit – Falls ein Fehler passiert, kannst du einfach zum Parent-Theme zurückkehren.

    Kann man Divi ohne ein Child Theme nutzen?
    Ja, Divi kann ohne ein Child Theme verwendet werden, wenn nur kleine Anpassungen (z. B. weniger als 100 Zeilen CSS) über den Customizer oder die Theme-Einstellungen vorgenommen werden. Diese bleiben auch nach Updates erhalten.

    Ein Child Theme ist sinnvoll, wenn du Theme-Dateien wie functions.php bearbeiten, umfangreichen Code hinzufügen oder mit einem Team arbeiten möchtest.

    Wie installiere ich Divi in WordPress?
    1. Divi herunterladen: Melde dich bei Elegant Themes* an und lade das Divi Theme als ZIP-Datei herunter.
    2. In WordPress hochladen:
    • Gehe zu Designs > Themes in deinem WordPress-Dashboard.
    • Klicke auf Neu hinzufügen > Theme hochladen und wähle die ZIP-Datei aus.
    • Installiere und aktiviere das Theme.
    Wie installiere ich ein Divi-Child-Theme?
    1. Erstelle ein Child Theme manuell oder nutze einen Child-Theme-Generator. Elegant Themes* 
    2. Falls du eine fertige ZIP-Datei hast:
    • Gehe zu Designs > Themes > Hochladen
    • Lade das ZIP-File hoch und aktiviere das Child Theme.
    • Falls nötig, bearbeite die style.css und functions.php, um eigene Anpassungen vorzunehmen.
    Wie verwende ich den Child-Theme-Generator in WordPress?
    1. Installiere ein Plugin wie Child Theme Configurator (über Plugins > Installieren).
    2. Öffne es unter Werkzeuge > Child Theme.
    3. Wähle Divi als übergeordnetes Theme und klicke auf Child Theme erstellen.
    4. Aktiviere das erstellte Child-Theme unter Designs > Themes.
    Alle Angaben ohne Gewähr!

    Affiliatelinks/Werbelinks
    Werbehinweis für Links mit Sternchen (*) und (____)

    Die mit Sternchen (*) gekennzeichneten Links sowie die Shopsysteme Anbieter auf dieser Website sind sogenannte Affiliate-Links. Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekommen wir ggf. von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht. Damit unterstützt Du unseren Blog.

    Cookie Consent mit Real Cookie Banner