How to Make a Divi Child Theme

Creating a Divi Child Theme is pretty easy. You will be up in running in like 5 minutes. All you need to do is set up a few files and enqueue the parent style.

We’re not going to go too far in the weeds in this article. Elegant Themes actually has a great post on their blog about creating a Divi Child Theme if you wish to go into more detail.

Without further ado, join us as we go through general child theme setup advice in today’s highlight of Divi.

Divi Child Theme Setup

1. Create a child theme folder. Name it with the theme name and end it with -child. The new folder should read Divi-child.
2. Copy the original theme screenshot or save the screenshot below that we made as screenshot.jpg.
3. Create a style.css file. This is required. See below for quick copy and paste action.
4. Create a functions.php file. This is required. See below for quick copy and paste action.

Divi Resources

• Divi Theme Demo
• Child theme folder name: Divi-child

Divi Functions

Save to functions.php. The first line is a security feature and the next action enqueues the parent theme.

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// Call Divi Parent Theme
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 code below this line

?>

Divi CSS

Save to style.css.

/*
Theme Name: Divi Child
Theme URI: https://davistechmedia.com
Description: Divi Child Theme
Author: Website Jolt
Author URI: https://davistechmedia.com
Template: Divi
Version: 1.0.0
Tags: responsive-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
Text Domain: divi-child-theme
*/

/* Theme customization starts here
------------------------------------------------------- */

Bonus: Extra Child Theme

The Extra theme isn’t as popular as the Divi theme, but it’s no slouch. You should follow the same 4-step process above for setting up the Extra Child Theme.

• Extra Theme Demo
• Child theme folder name: Extra-child

Extra Functions

Save to functions.php. The first line is a security feature and the next action enqueues the parent theme.

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// Call Extra Parent Theme
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 code below this line

?>

Extra CSS

Save to style.css.

/*
Theme Name: Extra Child
Theme URI: https://davistechmedia.com
Description: Extra Child Theme
Author: Website Jolt
Author URI: https://davistechmedia.com
Template: Extra
Version: 1.0.0
Tags: responsive-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
Text Domain: extra-child-theme
*/

/* Theme customization starts here
------------------------------------------------------- */

Conclusion

You can do all kinds of cool stuff in child themes. We mostly stick to tweaking themes and adding custom functions. Just make sure the parent theme is installed before you try to activate the child theme.

That’s it, nothing to it. Make sure you have the parent theme installed before you try to activate the child theme.