Divi Child theme

How to set up a child theme in Divi 4.x?

A child theme in WordPress is pretty much always useful if you plan to make changes to the code of a theme. Without a child theme changes to your theme files will be overwritten at the next theme update. If you break something by extending your theme troubleshooting will be easier with a child theme as well as the code is separated from the original parent theme. This article explains what a child theme is and why you need it and shows you how to create a child theme in only a few minutes.

What is a child theme and why do you need it?

A child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. There are several reasons why it is recommended to create a child theme and why it is best to set it up from the very beginning of a WordPress project.

  1. You will have theme customizations and extensions separated of the original parent Divi theme, i.e., your customizations do not get overridden on every theme update, e.g., functions.php, style.css
  2. You will conveniently find all your customizations and extensions aggregated on one single place
  3. If you plan to add hundreds of lines of code, e.g., CSS or JavaScript, to customize or extend your theme its recommended to do this in a child theme (even though if it is possible to do this within your theme settings)
  4. If you collaborate with someone on the WordPress site a child theme helps to split up your styles to different files

I personally always recommend to use a child theme even if you not initially plan to do a lot of customizations or extensions. It will come eventually and you will be happy to have your child theme ready.

How to set up a Divi child theme in a few minutes

The most basic version of a child theme consists of the following four elements and is saved in your themes folder /wp-content/themes in WordPress. You can either create those files on your computer and upload or directly create them on your web server. I just use Filezilla to access my web server and directly create the following files. For your convenience, you can also just download the files for the Divi child theme as a package and upload it to your server.

  1. A separate folder for the child theme on your web server → divi-child
  2. A separate style.css file → style.css
  3. A separate functions.php file that at least loads the wp_enqueue_scripts action that will enqueue the parent theme stylesheet → functions.php
  4. Optional: child theme thumbnail image that will be shown in your WordPress backend (must be named screenshot.png) → screenshot.png
Most basic version of a Divi child theme

style.css

/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
/* Theme customization starts here
------------------------------------------------------- */

functions.php

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

//add new code here

screenshot.png

You do not have to create a thumbnail image but it just looks nice on your backend. The image size should have a width of 1200px and a height of 900px. The image must be also in the child-theme folder and must be named screenshot.png. You can also just download my thumbnail image and use it on your child theme.

Activate and test child theme in WordPress

Go to Appearance → Themes to activate the child theme. If you want to test it you can go again to the style.css and add some simple CSS statement, e.g. h2 {font-size: 48px;}. Always consider that some changes do not take effect immediately because of browser and server caching. To reduce the caching problems it’s best to turn off any caching plugin (e.g. WP Super Cache) in the WordPress backend while developing and use the browser in incognito mode.

Activate the Divi Child theme

Divi child theme maintenance

When Divi provides major updates on its theme it could be that this comes with restructuring how the Divi theme is built. This could have an impact on your child theme, as your child theme is basically mirroring the original parent theme’s structure. As a result, the child theme would simply not work properly anymore and customizations or extensions would not be applied on your website. So if you have been using a child theme for a while, and things are starting to break, you may need to update your code.

Final thoughts on the Divi child theme

A child theme is not mandatory at all. It can bring some disadvantages with it, especially after many many updates of the original Divi theme as the child theme might break at some points and needs attention to get it fixed. However, the benefits outweigh the disadvantages it brings, as you simply do not have to manually add all your customizations and extensions to your Divi theme after running a theme update. For more information on the Divi child theme visit the original Divi Documentation.