Divi Child themes – What, why & how.

There still seems to be a lot of questions on the various Divi Facebook groups about Divi Child Themes, like What are Divi child themes? Do i need a child theme for Divi? How do i add a child theme to Divi? so here is a rundown on the what, why and how of Divi child themes.

What is a Divi Child Theme?

A Divi child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. The child theme files will override any files that are also found in parent theme, allowing you to change how your website looks and functions without having to edit any of the parent Divi theme files.

Why would i want to use a Divi Child Theme?

The Divi theme is updated by Elegant Themes fairly regularly to improve functionality, security and/or design. If you edit any of the files in your Divi theme, those edits will be lost if you then update your Divi Theme. A child theme allows you to make any file edits you need to change the functionality and design of your site without touching the master Divi theme. With a child theme, you can update the master Divi file as it is updated by Elegant Themes and keep your child theme as it is with your edits safe.

Do I really need a child theme if I am just adding some CSS into a few modules or the ePanel custom CSS box?

No, you do not need a child theme if you are just making changes to the settings in Divi, or adding some custom CSS into the Divi builder or ePanel custom CSS box, as these will remain even after you update Divi.

How do i make a Child Theme for Divi?

A child theme must have the following 2 files to work;

1. functions.php that links the Divi child theme to the parent theme (Divi) with the following code;

<!--?php 

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' ); 

function my_enqueue_assets() { 

 wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); 

}

2. style.css where you put your custom CSS edits with the following code.

/*
 Theme Name:   Divi Child
 Theme URI:    http://www.divithemeexamples.com
 Description:  Divi Child Theme
 Author:       Divi Theme Examples
 Author URI:   http://www.divithemeexamples.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Divi, is, awesome
*/

These 2 files go in a folder (your child theme) that can be zipped up and uploaded via appearance>themes just like you did when you uploaded the Divi theme. Once you activate the child theme you will notice that nothing happens, because this is a blank child theme.

Start adding custom CSS into your child themes style.css and these will override the styles in the parent theme. So, for example, if the parent theme style.css says the header is blue, but in the child theme style.css you say the header is red, then the header on your site will be red.

If you need to edit other files from the parent Divi theme, just copy the whole file over to your child theme and edit the file in your child theme. As you can see in the image below i have done this to edit the footer.php. The master Divi theme still has the designed by Elegant Themes, in the footer file, but because i have changed it in the child theme footer.php to designed by DiviThemeExamples this is what shows on my website.

OK, is this the same as the Divi child themes is see on Divi Theme Examples?

Yes, The Divi Child Themes you download from Divi Theme Examples or from the various child theme developers are all essential the same as the example above. These child themes already have the custom css added to style.css to change how your Divi site looks and works. They may also have footer.php. header.php and other files added too, but it is the same principle of using a child theme to change the way your Divi website looks and functions.

Is there an easy way to create a child theme?
As you can see above, creating a child theme to store your Divi customisations is just a matter of creating 2 files, but some people are uneasy doing this, so for those there are a few free, quick and easy options for creating a child theme.
1. Download the Bare Bones child theme. Upload it to your theme dashboard and activate. You now have a child theme.

If you are still confused, The Ultimate Guide to Creating a Divi Child Theme post from Elegant Themes offers another clear explanation of child themes and if you should be using one or not.

2. Use this free Child Theme generator on Divi.space. Fill in the fields, hit “create child theme”, upload the file to your theme dashboard and activate. You now have a child theme.

Does divithemeexamples.com use a child theme?

Yes, this site has a child theme running because there are edits to various .php files within the site. All custom CSS is included in the ePanel custom CSS box. Whilst i like the idea of adding custom CSS into the various modules, for me it makes more sense to have all my CSS in 1 file, in 1 location so it is easy to find and edit.