Divi Child Theme erstellen: Anleitung und Download

von | Sep 14, 2021

Für die Leute wo es schnell gehen soll biete ich zunächst ein generisches Child Theme zum Download an. In folgendem Tutorial gehen wir im Detail drauf ein, wie genau dieses erstellt wurde.

Was ist ein Divi Child Theme?

Ein Child Theme in WordPress ist eine der vielen Möglichkeiten, wie wir Anpassungen an dem PHP und CSS Code von dem Divi Theme vornehmen können, ohne dass diese bei einem Update verloren gehen. Abgesehen davon hilft es uns auch, unsere Änderungen am Code des Divi Themes an einem zentralen Ort zu speichern.

Dies macht es für uns viel einfacher zu wissen, an welcher Stelle unsere Anpassungen einen Fehler auslösen, als wenn wir Anpassungen direkt im Theme selbst vornehmen. Wenn Sie planen, viele oder sehr spezielle PHP Änderungen an Ihrem Divi Theme vorzunehmen, ist es sinnvoll ein Child Theme einzurichten, sodass diese bei einem Update nicht verloren gehen. Fangen wir nun an! Lassen Sie uns Ihr allererstes Divi Child Theme erstellen. 

Was sollte in Ihrem Divi Child Theme Ordner sein?

Ihr Divi Child Theme Ordner sollte diese drei grundlegenden Dateien haben.

  1. Eine style.css Datei, in dem Sie Ihr gesamtes CSS für Ihr Divi Child Theme speichern können.
  2. Eine functions.php Datei, die durch wp_enqueue_scripts Ihre style.css Datei einbindet
  3. Eine screenshot.png, die als Vorschaubild des Themes im WordPress Backend angezeigt wird.

Der Divi Child Theme Ordner

Sie haben zwei Möglichkeiten, Ihre Child Theme Dateien zu WordPress hinzuzufügen

Erste Option: Erstellen Sie Ihren Child Theme Ordner mit FTP:

  1. Navigieren Sie mit FTP zu den Ordner wp-content -> themes. Sie finden dort auch Ihr Divi Theme mit dem Namen „Divi“.
  2. Erstellen Sie in dem themes Ordner einen neuen Ordner und nennen Sie ihn „divi-child“.
  3. In dem neu angelegten „divi-child“-Ordner erstellen Sie nun die drei vorhin angegebenen Dateien, die style.css, die functions.php und das Vorschaubild.

Zweite Option: Erstellen Sie einen Ordner auf Ihrem Desktop, ebenfalls mit dem Namen „divi-child“ und den drei vorhin beschriebenen Dateien und laden Sie ihn als Zip-Datei in WordPress als neues Theme hoch.

Wie Sie die style.css Datei erstellen

Erstellen Sie mit einem Texteditor eine Datei mit dem Titel „style.css“ in Ihrem Child Theme Ordner. Als Texteditor empfehle ich Ihnen Visual Studio Code. Kopieren Sie die folgenden Zeilen und fügen Sie sie in Ihren Editor ein. 

/*
Theme Name: Divi Child
Theme URI:
Description: Studenten Webdesign
Author: Pascal Cabart
Author URI: https://studentenwebdesign.de
Template: Divi
Version: 1.0.0
*/

Es sollte so aussehen: 

Wie Sie die functions.php Datei erstellen

Jetzt müssen wir unser Divi Child Theme in die Ladekette unseres Divi Themes setzen. Dadurch soll sichergestellt werden, dass alles, was wir in unserem Divi Child Theme einfügen, nach dem übergeordneten Divi Theme geladen wird. Dazu kopieren Sie den folgenden Code in Ihren Editor und speichern Sie ihn als  functions.php ab.
<?php
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Es sollte so aussehen:

Wie Sie das Vorschaubild Ihres Child Themes erstellen

Wie wir alle wissen, ist das Aussehen wichtig, also lassen Sie uns die zusätzliche Anstrengung unternehmen, um unserem Divi Child Theme einen einzigartigen Look zu verleihen. 

Generieren Sie ein Bild mit einem empfohlenen Maß von 1200px Breite und 900px Höhe, speichern Sie es dann als screenshot.png, und fügen Sie es anschließend zusammen mit den ersten beiden Dateien zum Child Theme hinzu. Sie haben die Freiheit zu wählen, welches Bild Sie für Ihr Child Theme wählen möchten. Das Theme unten zeigt zum Beispiel mein Logo als Vorschaubild.

Aktivieren Sie Ihr Divi Child Theme

Wenn Sie die Erste Option verwendet haben, um Ihr Child Theme zu erstellen, müssen Sie im WordPress Backend nur zu Appearance gehen und dann auf Activate klicken. Auf dem unteren Screenshot ist mein Child Theme bereits aktiviert.

Wenn Sie die zweite Option zum Erstellen Ihres Child Themes verwendet haben, müssen Sie weitere Schritte ausführen. Gehen Sie zuerst zu Appearance, klicken Sie auf Add new, wählen Sie Upload Theme, klicken Sie auf Choose File und wählen Sie dann die ZIP-Datei aus Ihres lokal gespeicherten Divi Child Themes. Klicken Sie abschließend auf Install Now. Wenn die Installation der Datei abgeschlossen ist, suchen Sie nach der Schaltfläche Activate, dann sind Sie fertig.

Kurzer Hinweis

Stellen Sie sicher, dass die Namen Ihres Ordners und die Namen Ihrer Dateien genau die gleichen sind wie die, die wir gegeben haben. Die Groß- und Kleinschreibung müssen Sie genauestens beachten. Es kann sein, dass Ihr Child Theme nicht aktiviert werden kann, wenn Sie die Groß- und Kleinschreibung nicht richtig machen.