Divi Child Theme anlegen

Der erste Schritt nach der Installation eines neuen WordPress Themes sollte immer das Anlegen eines dazu passenden Child Theme (dt. Kind Theme) sein. In diesem Fall geht es also um ein Divi Child Theme.

Was ist ein WordPress Child Theme?

Selbst bei so umfangreich anpassbaren Themes wie das Divi Theme gibt es doch viele Änderungen, die sich nur durch den direkten Eingriff in die Dateien eines Themes erreichen lassen. Typischerweise handelt es sich um die Dateien style.css und functions.php. Man kann die Anpassungen natürlich auch direkt in den Dateien des Divi Themes durchführen, hat dann aber das Problem, dass mit dem nächsten Update des Themes alle Dateien überschrieben werden und man dann alle Anpassungen verliert und wieder neu eintragen muss.

Dieses Problem lässt sich durch die Nutzung eines Divi Child Themes vermeiden. Ein Child (Kind) Theme verweist im Grunde auf das Eltern Theme und beinhaltet nur angepassten und ergänzende Dateien zum Eltern Theme. Damit bleiben auch bei einem Update des Eltern Themes alle Änderungen im Child Theme erhalten.

CSS-Sammelstelle für Divi

Ein weiterer Vorteil eines Child Themes liegt in der zentralen Sicherung aller CSS-Anpassungen. Leider kann zusätzlicher CSS-Code an vielen verschiedenen Stellen in WordPress eingefügt werden:

• in der style.css in einem Child Theme (unsere Empfehlung)
• im Designmodifikator im Bereich "Zusätzliches CSS"
• in den Divi Theme-Optionen im Feld "Benutzerdefiniertes CSS"
• im Divi Builder kann auch zusätzlicher CSS-Code in den Einstellungen von Sektionen, Zeilen und Modulen erfolgen
• möglicherweise auch in den Einstellungen von weiteren Plugins

Falls Du den Code später ändern willst und Du eigenen CSS-Code nicht möglichst an einer Stelle gesammelt hast, dann kann die Suche danach schnell sehr mühsam werden! Außerdem wenn du den CSS-Code im Customizer oder den Divi Theme-Optionen speicherst, wird der Code in der Datenbank hinterlegt. Wir haben es schon erlebt, dass diese Einstellungen bei einem Update oder dem Hin- und Her -Wechseln zwischen zwei Themes versehentlich gelöscht wurden. Das kann Dir mit Deiner style.css im Child Theme Ordner nicht passieren!

Wie erstellt man ein Divi Child Theme?

Hier gibt es mehrere Wege zum Ziel:

• Download: Der einfachste Weg ist die Nutzung unseres vorbereiteten Divi-Child-Theme Ordners.
• Plugin: Der ebenfalls relativ einfache Weg ist die Nutzung eines Plugins.
• DIY: Etwas schwieriger aber sehr lehrreich ist das eigene Erstellen der nötigen Ordner und Dateien.

Gleichgültig für welchen Weg Du Dich entscheidest: Wie immer wenn Du etwas Grundsätzliches veränderst, gehört ein WordPress Backup zur guten Vorbereitung. Falls Du Dich für den DIY-Weg entscheidest, sollte auch das Grundlagenwissen wie du WordPress Dateien sicher bearbeiten kannst vorhanden sein.

Vorbereiteter Divi Child Theme Download

Die einfachste Lösung ist der von uns vorbereiteten Divi Child Theme Download.

Dazu gehst du folgendermaßen vor:

Schritt 1: Download der ZIP-Datei

Melde Dich einfach zu unserem Newsletter an und Du bekommst kostenfrei unsere Child-Theme-Vorlage per E-Mail zugeschickt:

Schritt 2: Installation des Divi Child Themes

Nach dem Download gehst du in deinem WordPress Backend auf "Design" > "Themes" und oben neben der Überschrift "Themes" klickst du auf den den Button "Installieren".

Dann gelangst du auf die "Themes installieren" Seite und findest oben dann den Button "Theme hochladen" auf den du klickst.

Du wählst den Button "Datei hochladen" und dann die zuvor heruntergeladene ZIP-Datei aus und lädst diese hoch.

Schritt 3: Aktivieren des Child Themes

Jetzt gehst du im WordPress Backend auf "Design" > "Themes" und wählst das Divi Child Theme aus und klickst dort auf "Aktivieren".

Aktives Divi Child Theme und deaktiviertes Divi Theme

Wir wollen das nochmal ganz deutlich machen, weil das bei manchen etwas Verwirrung auslöst. Wenn du alles richtig umgesetzt hast, ist am Ende das Divi Child Theme aktiv (1) und das eigentliche Divi Theme nicht aktiviert (2):

Wichtig: Auch wenn das Divi Theme (2) nicht aktiviert ist, darfst du es trotzdem nicht löschen. Denn das Child Theme (1) greift auf die Daten des eigentlichen Divi Themes zu und ist ohne das Divi Theme auch nicht funktionsfähig. Deshalb sollte das Divi Theme auch regelmäßig aktualisiert werden, auch wenn es nicht aktiv ist.

Wir empfehlen auch zumindest ein aktuelles WordPress Standardtheme wie z.B. das Twenty Twenty-Three Theme installiert zu lassen und regelmäßig zu aktualisieren. So kannst du im Notfall oder auch testweise auf das Standardtheme wechseln, um zu überprüfen, ob auftretende Probleme ggf. mit dem bisher aktiven Theme zu tun haben.

Jetzt sollte erstmal alles auf deiner Homepage wie vorher aussehen, nur dass du nun Anpassungen durchführen kannst, die bei einem Update nicht verloren gehen. Wir empfehlen, dass du dir anschließend auch die kurze Anleitung zum eigenhändigen Erstellen von Child Themes ansiehst, damit du weißt, wozu das gemacht wird und wo welche Datei für spätere Anpassungen liegt.

Divi Child Theme mit einem Plugin erstellen

Es gibt mehrere Plugins, die einem dabei helfen ein Child Theme zu erstellen. Unser derzeitiger Favorit ist das Child Theme Configurator Plugin, da dieses Plugin zusätzliche praktische Funktionen zur Bearbeitung eines Child Themes bietet. Alternative lässt sich auch der Child Theme Creator von Orbisius nutzen.

WordPress Child Theme selbst erstellen

Du kannst dir auch eigenständig ein Divi Child Theme erstellen. Damit lernst du das Verfahren grundsätzlich kennen und kannst das auch für andere Themes anwenden. Außerdem musst du für einige Anpassungen des Divi Themes sowieso per FTP auf deine Dateien im Child Theme Ordner zugreifen und dann hast du schon ein wenig Erfahrungen gesammelt. Es ist im Grunde relativ leicht ein Child Theme zu erstellen. Du musst nur einen Ordner und zwei Dateien erstellen und schon ist dein Child Theme fertig.

Schritt 1: Ordner erstellen

Du musst per FTP auf deinen Webspace zugreifen und in den WordPress Themes Ordner navigieren, den du unter ...

../wp-content/themes

findest.

Dort liegen alle bisher vorhandenen Themes in Ordnern, so dass auch ein "divi" Ordner für dein Divi Theme vorhanden sein sollte.

Dort erstellst du einen neuen Ordner für dein Child Theme, den du zwar nennen kannst wie du magst, aber wir empfehlen dir den Ordner nach dem eigentlichen Theme mit dem Zusatz "-child" zu benennen. Daher erstellst du nun den Ordner ...

"divi-child"

Schritt 2: style.css anlegen

In dem Ordner "divi-child" sind zwei Dateien anzulegen. Zunächst die Datei style.css in die Du folgenden Code einfügst:

/*
 Theme Name:     Divi Child-Theme
 Theme URI:      http://www.elegantthemes.com
 Description:    Divi Child-Theme
 Author:         Divi.world
 Author URI:     https://divi.world
 Template:       Divi
 Version:        1.0.0
*/
 
/* =Ab hier kannst du deine CSS-Anpassungen eintragen
------------------------------------------------------- */

In dieser style.css kannst du später spezielle CSS Anpassungen für dein Divi Theme hinzufügen, wie Schriftgrößen, Farben, Abstände etc.

Schritt 3: functions.php anlegen

Dann benötigen wir noch die functions.php Datei, die folgenden Code enthalten soll:

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

Diese functions.php sorgt einerseits dafür, dass alle nötigen CSS-Dateien des Divi Themes geladen werden und am Ende kannst du später weiteren PHP-Code einfügen, um bestimmte Funktionen des Divi Themes zu beeinflussen.

Bemerkungen

Falls du noch andere Anleitungen zum Erstellen von Child Themes gefunden hast, wundere dich bitte nicht, dass dort die style.css und die functions.php etwas anders aussehen. Bis vor einiger Zeit stand fast kein Code in der functions.php und dafür gab es in der style.css immer die Zeile ...

@import url("../Divi/style.css");

Mittlerweile empfiehlt WordPress statt des CSS-Imports die WordPress style queue Funktion in der functions.php zu nutzen. Das ist der Code, den du in unserer Anleitung oben sehen kannst.

Als letzten Schritt aktivierst du dein neues Child Theme.

Weitere Informationen:

Weitere Informationen zu Child Themes findest du im

• WordPress Codex (engl.).
• im Elegant Themes Blog "Ultimate Guide to Creating a Child Theme for Divi" (engl.)

Divi Child Theme nachträglich erstellen

Manchmal ist es leider so, dass die Info zu dem Anlegen eines Child Themes einen zu spät erreicht oder Du es ggf. einfach vergessen hast. Die Website ist mit aktiviertem "normalen" Divi Theme schon fertig gestaltet ... was nun?

Wir empfehlen auch nachträglich noch auf ein Divi Child Theme zu wechseln und CSS-Änderungen am besten zentral in der style.css  Datei des Child Themes zu sammeln. Wurden Änderungen an den original CSS-Dateien des Divi Themes vorgenommen, werden diese sowieso mit dem nächsten Theme Update überschrieben.

Hast Du stattdessen CSS-Einträge im Customizer, den Divi Builder Modulen oder den Divi Theme-Optionen vorgenommen, kann es zum einen später schwierig werden herauszufinden an welcher Stelle diese CSS-Änderungen gespeichert sind. Außerdem werden alle diese Eintragungen in der Datenbank gesichert. Wir haben es schon erlebt, dass bei einem unglücklichen Update oder einem testweisen Wechsel des Themes diese CSS-Änderungen in der Datenbank überschrieben wurden. Das kann im Child Theme Ordner nicht passieren.

Die Frage ist nun wie bekommst Du Deine bereits vorgenommenen CSS-Änderungen in Dein Child Theme übertragen? Das ist im Grunde gar nicht so schwer. Zunächst legst Du nach unserer Anleitung ein Divi Child Theme an. Anschließend geht es darum die CSS-Anpassungen in das Child Theme zu übertragen.

So bekommst Du Deine CSS-Anpassungen in Dein Child Theme übertragen

Bevor wir die folgenden Punkte betrachten, würde ich Dir wie bereits oben gesagt empfehlen auch wenn die Eintragungen an einigen Stellen offenbar in das Child Theme übernommen werden, trotzdem zu versuchen diese Anpassungen möglichst alle in der style.css des Child Themes zu sammeln.

1. Hast Du die Anpassungen vorher in einer CSS-Datei im Theme Ordner gespeichert oder in einer der vorhandenen CSS-Dateien des Themes angepasst, musst Du diese nur in die style.css in dem Child Theme Ordner übertragen (Achtung: ggf. muss Du dann noch bei einigen Anweisungen !important ergänzen, siehe hier).
2. Hast Du Eintragungen im Designmodifikator unter "Zusätzliches CSS" hinterlegt, wurden diese bei unserem Test beim Wechsel auf ein Divi Child Theme übernommen. Trotzdem: wir empfehlen diese lieber in der style.css zu sammeln.
3. Hast Du Einträge in den Divi Modulen unter "Erweitert" > "Benutzerdefiniertes CSS" getätigt, blieben diese bei unserem Test bei dem Wechsel auf ein Divi Child Theme auch erhalten.
4. Bei unserem Test wurden nur Eintragungen beim Wechsel zu dem Divi Child Theme NICHT übernommen, die Du zusätzlich im Admin unter "Divi" > "Theme Optionen" unter "Eigene CSS" (letztes Einstellungsfeld auf der Seite) getätigt hast. Diese musst Du also kopieren und dann sowieso besser in der style.css im Child Theme Ordner hinterlegen. Wenn du es unbedingt willst, kannst Du die Eintragung auch im Child Theme wieder an dieser Stelle vornehmen.

Du siehst, es sollte normalerweise nicht sonderlich schlimm sein auch später auf ein Child Theme zu wechseln.