Die meisten verwenden ein Child-Theme, wenn Anpassungen an CSS oder dem Template vorgenommen werden. Der WordPress Codex zeigt, dass es besser ist, ein Child-Theme nicht über @import zu verwenden, sondern über die „enqueue-Methode“.

In diesem Tutorial zeige ich euch auf wie ein Child-Theme erstellt wird und worauf geachtet werden sollte. Am Ende gibt es noch ein Download mit einem blanko-Child-Theme, welches ihr gerne verwenden könnt.

Was ist ein Child Theme?

Für alle, die sich noch nicht mit der Modifizierung von Divi oder einem anderen Template beschäftigt haben, hier eine kurze Erklärung:
Divi besteht aus CSS-Stilen und Scripten, die das Aussehen einer Seite beschreiben. Diese Stile zeigen dem Enduser wie breit ein Bild ist und welche Farbe ein Button hat. Generell bietet Divi, dank dem Divi-Builder, viele Möglichkeiten die Seite ganz ohne CSS und Scripte zu gestalten. Auch bietet Divi in den „Divi Optionen“ die Möglichkeit eigenen CSS-Code und Scripte zu platzieren.

Ein Child Theme ist sozusagen ein Referenztemplate, welches auf diese vordefnierten Stile verweist. Ein Template mit einer leeren CSS-Datei z.B. Werden Stile geändert und in diesem Referenztemplate abgelegt, haben diese Vorrang und überschreiben das Elterntemplate.

Der Vorteil dabei ist, es besteht eine ordentliche und übersichtliche Struktur. Wenn Divi einen besonderen Schliff erhalten soll, kommt der Designer früher oder später nicht um eigene Stile drumherum.

Die functions.php Datei erstellen

Um diese Datei zu erstellen, benötigst du einen Text-Editor oder ein Programm wie Dreamweaver. Diese Datei enthält den Code, um die stlye.css Datei des Eltern-Themes einzubinden. Ein weiterer Vorteil ist, dass wir diese Datei auch nutzen können, um scripte zu laden oder dort abzuspeichern. Der Vorteil, schneleres Laden der Stile.

Der folgende Code verweist nicht nur auf die Eltern-Datei, sondern gibt den neuen eigenen Stilen Vorrang zu den des Eltern-Themes und überschreibt diese.

<?php
/**
 * Load the parent style.css file
 */
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Die styles.css Datei erstellen

Wir benötigen auch noch die „styles.css-Datei“, in welche die eigenen css-Anpassungen geschrieben werden. Auch hierzu benötigen ein Programm wie Textedit oder etwas vergleichbares wie Dreamweaver. Wichtig hierbei ist, dass unter „Template“ der Name des Eltern-Templates angegeben wird. Die css-Datei sollte so beginnen:

/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com
Version: 3.x
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://yourdomain.de/
Template: Divi
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/*You can start adding your own styles here. Use !important to overwrite styles if needed.*/

Noch ein Übersichtsbild

Zum Schluss benötigen wir noch ein Überschichtsbild, ein JPEG. Es kann natürlich auch ein Kundenlogo oder das eigene verwendet werden, um so noch auf sich aufmerksam zu machen.

Alle drei Dateien kommen in einen Ordner, den ich „Divi-Child“ nenne. Diesen Ordner verpacken als ZIP-Datei und fertig ist das Child-Theme, welches über Themes geladen und aktiviert werden kann.

Im Anhang findet ihr ein Child-Theme, welches ich für Divi verwende. Es enthält zusätzlich noch einige Media-Queries, falls einige davon nicht verwendet werden, sollten diese gelöscht werden. Unter „Global-Modifications“ trage ich alle Änderungen ein, die Elegantthemes Stile überschreiben. Unter „Custom-Modifications“ trage ich eigene Stile ein, welche ich als Klasse oder ID angebe über den Reiter „Custom CSS“ eines Moduls.

Abschließende Bemerkungen

Ich empfehle generell die Nutzung eines Child-Themes, da irgendwann im Gesignprozess spezelle Anforderungen aufkommen und dann eigene Stile benötigt werden. Nicht zuletzt hatte ich schon öfter den Fall, dass nach einem missglückten Divi-Update die in den Divi-Optionen abgelegten Stile oder Scripte danach verschwunden waren.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.