Divi Child Themes

A Divi Child Theme is a WordPress Theme that inherits the functionality and styling of its parent theme, which in our case is Divi. We can use a Divi child theme to customize the design, layout or functionality of our websites without editing the parent (Divi) theme files.

By using a child theme you can keep customizations to Divi theme files separate from the parent theme files. This means that we can safely update Divi as new versions are released without losing any of your customizations.

If you want to use a Divi child theme then you must set it to be your active theme under Appearance > Themes. The parent Theme (Divi) is not active but must be uploaded to your Appearance > Themes in order for the child theme to access and use its files. WordPress will then use any files it finds within the child theme on your website and default to the parent theme files for everything else. So, for example, if you copied the footer.php file from the parent theme into your child theme, WordPress would use the footer.php from your child theme and not the parent theme.

What is the difference between a parent theme and a child theme?

In our case, the parent WordPress theme is Divi and includes all of the theme files that go into making the Divi theme work. A parent Theme will work on its own and does not need a child theme to work.

A child theme is a separate WordPress Theme that is made up of, at a minimum, a style.css, and functions.php file. The code in the functions.php file tells WordPress that your child theme should work together with the files found in the parent (Divi) theme. A child theme can only function when a parent theme is installed and connected to the child theme.  A child theme is an addition to the parent theme and allows you to add extra styles, functions and features to your site without having to modify parent theme files.

Does Divi need a child theme? No, you do not always need to use a child theme with Divi, but if you are going to edit any of the theme or plug-in files of your WordPress installation then you do need a child theme, or those edits will be lost when you then update Divi. Many people prefer to add a blank child theme as default just in case they may need it in the future. Doing this is very quick and will not harm your site in any way, so for many, it is something to do on every site.

You do need to use a child theme if;

• You will be making changes to any of your Divi theme files. (wp-content > Themes > Divi)
• You will be making changes to any of your plug-in files (wp-content > plugins)
• You will be adding a large amount of custom code (CSS, JavaScript, etc.) which would be easier to manage within a child theme.

You do not need to use a child theme if;

• You will only use the customization options available within the Divi builder, Divi theme options, module customizer, and theme customizer.
• You will add any CSS into the custom CSS areas within the Divi builder, theme options, page settings or in modules advanced settings tab.
• You will add any javascript code into a Divi code module or in “Divi” > “Theme options” > “integration” > “Add code to the…”

You will update your child theme when you need to make customizations that would otherwise involve editing the parent (Divi) theme files. There is no need to make any other updates. When Elegant Themes release a new update, you should also update your parent (Divi) theme so you can get access to any bug fixes, security patches or new features. With your customizations safely in your child theme, updating Divi will therefore not affect your customizations.

All Divi Child Themes are essentially the same but  will fall into 1 of 2 categories:

1. A blank or starter child theme which allows you to make updates to your Divi files without losing them when you update Divi. You can download a free Bare Bones Divi child theme on Divi Theme Examples. A blank child theme will not affect your site in any way but lays down the platform for you to add in your own customizations if needed.
2. A pre-designed premium child theme is essentially a blank child theme that has had various customized files and website page layouts added already. These make up a full pre-made website and can be used if you don’t have the time or skills to set up a website yourself using the Divi theme. You can view all of the premium Divi themes available in the directory below.

You can download Bare Bones Divi child theme here on Divi Theme Examples. Bare Bones is a blank child theme ready for you to add your own customizations to. To use Bare Bones, just download the zip file and upload it under Appearance > Themes > Add new and activate. You must already have Divi installed for the Bare Bones child theme to work.

The Bare Bones child theme zip contains 3 files.

1. A style.css file which is where you can add your own custom CSS
2. A screenshot.png which shows up in your Appearance > Themes area in the WordPress dashboard
3. A functions.php file that is used to link your child theme to your parent Divi theme

Download Bare Bones child theme here

Another option would be to use one of the many child theme generators that allow you to create your own on the fly. The original child theme generator was available over at Divi Space, but there are also a number of other free downloads available and plugins to create a child theme and all will essentially give you the same end result, so take your pick.

A blank child theme for Divi consists of a functions.php file and a style.css file. These 2 files go into a folder (your child theme) that can be zipped up and uploaded via Appearance > Themes > Add new in the same way you uploaded the parent (Divi) theme. After you activate your child theme there will be no visible changes to your site as there are no customizations within the child theme. You can follow the tutorial with the code below with further info in the WordPress codex for child theme creation.

functions.php

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

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}

style.css

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

/*
Theme Name: Bare bones for Divi
Author: Divi theme examples
Author URI: http://www.divithemeexamples.com
Template: Divi
Version: 1.0
*/

/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */

If you add any custom CSS into your child themes style.css they will over-ride those styles in the parent theme. For example, if your parent theme style.css says the footer text is red, but your child theme style.css says it is green, then your footer text on your site will be green.

To edit any Theme files from the parent (Divi) theme, you will need to copy the file  into your child theme and edit it within your child theme.

The file structure below shows a blank child theme that has had the footer.php copied over ready to be customized.