Most developers using Child-Themes for overwriting css-styles or to modify a wordpress template. WordPress wants to use the “enqueue-Methode” instead of @import.

In this tutorial you will learn how to create your own child theme. At the end is a download link with a “Master-Child-Theme”.

What is a Child-Theme?

For all who do not have experience in modifying Divi-Layouts beyond the builder possibilities a short introduction:
Divi uses CSS-styles and Java-script to create a special design. Most of the modifications can be done by the divi-builder which also writes css-styles. You can also place your own styles inside the Divi-Options as well as your own Java-script.

A Child-Themes is an own template with own functions and own styles. It refers to the parent template and if necessary you can overwrite parent styles to change the main template.

The advantage is a more clear structure and it is more secure when updating divi. Sooner or later you will modify your design in a way beyond the divi builder and than you will need a child-theme.

Create functions.php

First of all we need a functions.php file. Open textedit, dreamweaver or a similar program to create a code based file. This file will have the important script to load the parent styles and overwrite it if necessary. Later this file can also be used for new and special scripts you creating by your own. Biggest advantage is faster render and loading time.

Copy the following code into your code editor and save the file with the name functions.php:

<?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' );

Create style.css

Next we need a “style.css” file. Later you will write your modified styles inside this file. Again open a code editor like text editor or dreamweaver, copy and paste the following code inside your new created file and save this file with the name style.css. Important! The line template needs to be the same name of the parent theme.

/*
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.*/

Picture

At the end our new child theme needs a picture. Create a JPEG so you can see in wordpress templates your own child theme. Tip: You can user your own or customers logo.

Copy these three files into a folder and call them “Divi-child”. Compress this folder into a zip-file. Your Child theme is now ready to load into WordPress. Upload and activate your new child theme.

Here are my used child-theme. Download it and use it if you want. In style.css you will find also some media queries. Delete them if you don’t need them. I als put all elegantthemes styles I am changing in the section “Global-Modifications” and all styles I am creating by my own in “Custom CSS”. It is up to you to use this or not. If not you can delete these lines.

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.