create a child theme in divi

Child themes are the taken as the best way to implement changes on your website without losing the changes even after updating the parent theme. So this is the intelligent way to apply changes in style sheet and you don’t have to worry losing any changes you made during the parent theme update.

Divi theme is the best theme product for WordPress which is created and designed by the famous theme company Elegant Themes. This theme is currently being used by hundreds of thousands of websites around the globe and still counting for unlimited period.

We know Divi comes with tons of best, premium quality, new, advanced and primary features to build and design any website in WordPress in minutes even without having any coding and developing knowledge at all.

But still a Divi developer needs supports of third party plugins, and child themes to bring the target design as per the requirements of customers and clients.

So there are many third party plugins and child themes are created for attaining this purpose.

Today in this tutorial we will share how to create a child theme in Divi in the simplest way and for your personal and business uses. Let’s get started.

Requirements

A child theme developer does not need to know many more things a parent theme developer does. It only needs to have the minimum basics in CSS/HTML skills, if you have PHP skill that would help a bunch.

To practice on creating and using a child theme we recommend you to start from local development environment. You can move a live WordPress site to local server for testing purposes or use dummy content for theme development.

Creating Your Child Theme

To create your own child theme you need following files and folders.

a custom theme files and folders

  • Style.css
  • Functions.php
  • Screenshot.jpg [image format]

Style.css

This is the regular Cascading Style Sheet file that holds necessary codes to bring design in your child theme. You can add as many snippets as you like but this should be following your design needs.

/*
Theme Name:   Divi Child Theme
Theme URI:    http://www.divithemedemo.com/
Description:  A Custom Divi child theme
Author:       Divi Theme Demo
Author URI:   http://www.divithemedemo.com
Template:     Custom Child Theme
Version:      1.0.0
*/

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

Or you can import the original style sheet from the parent theme with the child theme. The following is an example of a child theme style sheet file

/*
Theme Name:   Divi Child Theme
Theme URI:    http://www.divithemedemo.com/
Description:  A Custom Divi child theme
Author:       Divi Theme Demo
Author URI:   http://www.divithemedemo.com
Template:     Custom Child Theme
Version:      1.0.0
*/

@import url("../divi/style.css");

In the above snippet we defined the Theme name, URL, author name, Theme version etc. parameters. We also defined to derive style sheet from parent theme’s directory.

To add more additional designs you need put snippets below the comment line, see below example

/*
Theme Name:   Divi Child Theme
Theme URI:    http://www.divithemedemo.com/
Description:  A Custom Divi child theme
Author:       Divi Theme Demo
Author URI:   http://www.divithemedemo.com
Template:     Custom Child Theme
Version:      1.0.0
*/

body.custom-background {
background-size: 100%;
background-color: #e0e7e0;
background-repeat: no-repeat;
background-position-y: bottom!important;
}

.et_pb_row {
width: 100%;
}

.et_pb_contact_form_container input[type=text],
.et_pb_contact_form_container textarea

{
background: #ffffff!important;
}

#main-footer {
background-color: rgba(73, 33, 73, 0.89);
}

After adding your snippet in your style.css file simply save it.

Functions.php

Adding functions.php file in your child theme overrides your parent themes functions, so we only need this file to bring changes that we don’t wanna lose after updating the parent theme.

You can use a simple child theme functions.php snippet and copy and paste on your own file or add additional code as per your needs.

The simple example of a functions.php file can be following

<?php

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );

function my_enqueue_assets() {

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

}

If you want to add your own copyright text then you need to use following snippet in your Functions.php file

<?php

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );

function my_enqueue_assets() {

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

}

function emp_customize_register($wp_customize) {
$wp_customize->add_setting( 'et_divi[footer_copr_text]', array(
'default'       => 'Designed by  <a href="http://www.tamalanwar.com/" terget="_blank" rel="nofollow">Tamal Anwar</a>',
'type'            => 'option',
'capability'    => 'edit_theme_options',
'transport'        => 'postMessage',
//'sanitize_callback' => 'wp_validate_boolean',
) );

$wp_customize->add_control( 'et_divi[footer_copr_text]', array(
'label'        => __( 'Enter Copyright Text', 'Divi' ),
'section'    => 'et_divi_footer_elements',
'type'      => 'text',
) );
}
add_action( 'customize_register', 'emp_customize_register', 11 );

?>

You can change the theme’s designer name and URL as follows

  • http://www.tamalanwar.com/ – change your domain URL
  • Tamal Anwar – change the name of Author

Screenshot

Now this part is needed to introduce your work by presenting a cute thumbnail of child theme you have created. After installing your child theme you need to take a screenshot of it and then resize it to give perfect look and save on your child theme file giving a name only “screenshot”

custom child theme divi

screenshot of child theme

This image file can be of any image format you like to use.

So our simple custom Divi child theme is made, now you can check the theme by installing it on your local server or on a demo website but make sure you have Divi Theme already installed on your WordPress site.

Get Our Custom Made Child Themes

We have launched two custom child themes for Divi Theme from our website. These themes are listed below

Small Town Bakery

small town bakery child theme

This is the first child theme we have launched for our customers. This child theme is fit for making any food and drinks website. You can download this theme free from our child theme directory.

Custom Divi Child Theme [Yoast Breadcrumb Enabled]

screenshot

This is the first developed Yoast Breadcrumb enabled Divi Child Theme from our theme directory. This is a blank child theme which incorporates Yoast Breadcrumb so you don’t have to add breadcrumbs code manually by using this child theme.

Divi Theme does not come with inbuilt breadcrumb functionality so we created a child theme implementing Yoast Breadcrumb and you can easily get this feature by enabling Yoast breadcrumb in Yoast SEO > Advanced sections. Learn more at this article.

You can download this theme from our theme directory.

Wrapping Up

We hope you understood the basics of a child theme in WordPress and now able to create your own child theme to use with your Divi Website.

If you still need support regarding Divi Child theme then don’t hesitate to contact us or leave a comment at the below of this article so we can fix your issue by there.

Enjoy 🙂

Pin It on Pinterest

Share This