Divi Child Theme erstellen – Was ist ein Child Theme und wozu brauche ich es?

Seit dem WordPress Update 3.0 ist es auch uns WordPress-Nutzern möglich, unserer Kreativitet im Hinblick auf die Modifizierung von Themes freien Lauf zu lassen ohne zu befürchten, dass alle Änderungen beim nächsten Update unseres Themes wieder verschwunden sind.

Ein Child Theme ist ein Theme, das die Funktionen seines übergeordneten Themes (das sogenannte Parent-Theme, bei uns Divi) erbt. Änderungen, die dann von Dir vorgenommen werden – beispielsweise in der style.css – werden dann bei Updates des Parent-Themes nicht überschrieben, sondern bleiben bestehen.

Zudem läufst Du nicht Gefahr, durch etwaige Änderungen etwas an der Parent-Theme Datei kaputt zu machen. Und das ist gerade wenn du mit WordPress angefangen hast hin und wieder Gold wert.

Divi Child Theme erstellen – Schritt 1: Via FTP auf den Webspace zugreifen

Wie man sich über ein FTP Programm Zugriff auf seinen Webspace verschafft, kannst Du Dir detailliert in unserem Artikel „WordPress installieren: eine umfassende Anleitung“ durchlesen.

Im Grunde brauchst Du Deine FTP-Zugangsdaten und ein FTP Programm wie zum Beispiel WinSCP oder Filezilla.

Wenn Du eingeloggt bist, dann navigierst Du über diesen Pfad wordpress -> wp-content -> themes zu der Stelle Deiner WordPress Installation, in der die Themes liegen. In unserem Fall ist das natürlich Divi*.

 

Divi Child Theme erstellen – Schritt 2: Den Child-Theme Ordner erstellen

Nun kannst Du, wie auch lokal auf Deinem Rechner, auf Deinem Webspace über Rechtsklick -> neuer Ordner einen neuen Ordner im Theme-Verzeichnis anlegen (dort wo auch Divi – oder das Theme Deiner Wahl – liegt).

Für gewöhnlich nimmt man hier den Namen des Parent-Themes und fügt ein „-child“ an. In unserem Fall also divi-child.

 

Divi Child Theme erstellen – Schritt 3: Die CSS Datei erstellen

Falls Du neu auf dem Gebiet bist – bitte hier keine Angst haben! Es geht ganz einfach und wir gehen es Schritt für Schritt gemeinsam an.

Öffne nun einen TextEditor wie zum Beispiel WordPad.

Die CSS Daatei für das Child-Theme sieht unbearbeitet so aus:

 

/* 
Theme Name: Name des Child-Themes
Theme URI: URL zur Homepage
Description: Kurzbeschreibung
Author: Name des Authors
Author URI: Link zum Author
Template: Template Originalname unter /themes/
Version: Aktuelle Versionsnummer
*/

Nun ist das hier noch nicht auf unser Theme angepasst. Für ein Child Theme des Divi Themes nehmen wir folgende Änderungen vor (wenn Du Divi nutzt kannst Du hier einfach Copy und Paste machen und dann Theme Name, Beschribung, Autor und Autor Information in deine Werte ändern):

/* 
Theme Name: Divi Tutfox
Theme URI: https://tutfox.de
Description: A Child-Theme made by tutfox
Author: Mr.Fox 
Author URI: https://tutfox.de/author/mrfox/
Template: Divi
Version: 1.0
*/

Speichere diese Textdatei jetzt einfach als style.css ab.

Divi Child Theme erstellen – Schritt 4: Die functions.php erstellen

Nun erstellst Du eine weitere Datei, die sogenannte functions.php. Hierfür öffnest Du einfach wieder Deinen TextEditor, fügst folgenden Code ein und speicherst ihn unter dem Namen functions.php ab:

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

Divi Child Theme erstellen – Schritt 5: Hochladen der Dateien in den Child Theme Ordner auf Deinem Webspace

Wie schon beim Upload des WordPress Ordners lädst Du nun Deine style.css und Deine functions.php mit dem FTP Programm Deiner Wahl auf Deinen webspace hoch. Und das in folgendes Verzeichnis: wordpress -> wp-content -> themes -> „name des child theme ordners“

Nun kannst Du Anpassungen an Deinem Theme vornehmen, ohne Angst haben zu müssen, dass diese bei der nächsten Aktualisierung Deines Themes wieder verloren gehen.

Divi Child Theme erstellen – Schritt 6: Aktivieren des Child Themes

Wenn Du alles hochgeladen hast, kannst Du Dein FTP Programm wieder schließen. Öffne nun Dein WordPress Dashboard und navigiere zu Design -> Themes.

Du wirst nun sehen, dass ein weiteres Theme in der Anzeige erscheint: Dein Child-Theme.

Alles, was Du jetzt zu tun hast, ist auf Aktivieren zu klicken. Nun kannst du mit Deinem Child Theme arbeiten.

Happy Coding!

Divi Child Theme erstellen – Zusatzschritt: Vorschaubild

Wenn Du in Deinem WordPress Dashboard in den Bereich Design -> Themes navigierst, wirst Du feststellen, dass Dein Theme ein schönes Vorschaubild besitzt.

Wenn Du Deinem Child Theme auch ein solches Vorschaubild verpassen möchtest, gestalte einfach Dein eigenes Bild mit den Abmessungen 1200x900 Pixel und lade es mit dem Namen screenshot.png in Deinen Child Theme Ordner hoch.

Mr.Fox

Web-Entwickler, Designer, Fotograf

Seit 1999 befasse ich mich mit allem was mit Web-Entwicklung zu tun hat, seit 2008 mache ich das Ganze beruflich.
Trotz meines Daseins als Anwendungsentwickler habe ich, zwecks technischen Möglichkeiten und Designvielfalt, bewusst die Web-Entwicklung gewählt.
Dabei haben mir in der Anfangszeit gute Tutorials geholfen. Da sich die technischen Möglichkeiten jedoch stets weiter entwickeln, setzte ich darauf, dass Tutorials zu aktuellen Themen auch dir Helfen werden.

Keep on developing!