[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Create a Divi Child Theme

Mark Hendriksen | February 1, 2023 | 4 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

Do you want to create a custom Divi Child Theme but don’t know where to start?

Divi is one of the most popular WordPress themes in the world, and for good reason. It’s easy to use and lets you create beautiful websites without any coding required. But sometimes you need a little more flexibility than the built-in options allow. That’s where child themes come in.

By following this step-by-step guide you will learn how to create your very own Divi Child Theme!

Free download

Free Blank Divi Child Theme

Skip the intro and let’s get started right away!

What is a Divi child theme and why would you want to create one

A child theme is a WordPress theme that inherits its functions and styling from a parent theme, allowing you to make changes to the child theme without affecting the parent theme.

You can style them with custom CSS sheets, embed shortcodes and JavaScript, and add your own PHP. You can make a child theme for any WordPress theme, including Divi and Extra.

The child theme is installed like a normal theme, but it doesn’t have the core functions within its own files. It takes those functions from the parent theme.

This means the parent theme must be installed in order for the child theme to work. Child themes can even add pages, and menus, and embed or install plugins.

There are two types of Divi child themes:

Blank Divi child theme: looks exactly like the parent theme (they have no edits in their style.css or functions.php files). They provide a starting point where you can make changes or even create a child theme package that can be reused on other websites. You can create them by hand, with a child theme generator, download them, or create them with plugins.

Pre-designed Divi child themes: have already been designed and made into an installable package. They include elements such as pages, menus, styling, embedded code, etc.

They’re basically a turn-key package that can create specific types or general websites. You simply activate it, import the styling according to the installation instructions, and add your content.

You can also use them as a starting point and customize them further to create your own design. They can be updated separately from the parent theme. You can also use them on multiple sites if the license agreement allows for them.

Do you need to use a Divi child theme?

When it comes to customizing your Divi website, you have options. While including a Child theme adds an extra layer of flexibility for experienced users – if all you are making is minor modifications then consider skipping that step; as the in-built editing tools provided by Divi such as its Builder and Theme Customizer offer easy access to custom CSS tweaks

To decide whether or not creating a child theme works best for your situation, weigh up what kind of changes will most likely take place on your site moving forward!

You DON’T Require a Divi Child Theme if:

  • You only plan to make minor CSS customizations within the Divi Builder or Theme Customizer.
  • You don’t have any plans for making large changes.
  • You want to place scripts such as Google Analytics, Facebook Pixels, and tracking codes. You can easily do that in the integration tab in the Divi Theme Options.

You DO Require a Divi Child Theme if:

  • You’re planning on making large changes with CSS/HTML/PHP
  • You want to modify or add code to parent theme files for example the header.php file
  • You want to add custom functions to functions.php to enhance the functionality.

Benefits of using a Divi child theme

The key benefits of using a Divi child theme include:

Preservation of Customizations:

Using a child theme is important to keep your customizations safe. If you don’t use a child theme, any changes you make to the parent theme (Divi) will be removed when the parent theme is updated. With a child theme, your styles, functions, and template changes won’t be deleted when the parent theme updates.

Flexibility in Design:

A child theme gives you lots of freedom to change the design. You can make small changes like adjusting a module’s look, changing the layout of a page, or adding something new. You don’t need to worry about messing up the original Divi theme because it won’t be changed. This way, you can try out different code snippets without any worrying.

Streamlined Troubleshooting

If you have trouble with your website, creating a child theme can help. Put all of your customized codes in the child theme only. This way, it’s easy to tell if the problem is from something you changed or if it was there before. This method will save time when finding and fixing any issues.

Step-by-Step Guide to Creating a Divi Child Theme

There are essentially four different approaches to creating a child theme:

  • Download my free blank child theme (easiest)
  • Manual method
  • With a Divi child theme generator
  • With a Divi child theme plugin

Download my free blank child theme (easiest)

By far the easiest way to get a child theme up and running is to use my free blank Divi Child theme.

Step 1: Download the free blank Divi child theme package

Fill in the form below and the package will be sent to your inbox.

Free download

Free Blank Divi Child Theme

Unlock the download today by subscribing to my newsletter using the form below!

As an extra bonus, you’ll receive exclusive Divi resources that are not available anywhere else.

If you’re already on my list, simply re-enter your email address and click on download. Don’t worry – you won’t be subscribing again or getting additional emails.

I do recommend reading the steps from the manual method so you have a good understanding of how the child theme is built.

Step 2: Install your blank Divi child theme

The installation process is very simple, just follow these steps.

Navigate in your WordPress dashboard to Appearance > Themes and click on Add New.

Now upload your downloaded Divi child theme folder (do not unpack it) and afterward activate it.

Your new Divi child theme is now active.

Create a blank Divi child theme manually

Divi child theme folder structure

To create the child theme manually you’ll need a text or code editor such as Notepad, Notepad++, Sublime, Brackets, etc. You’ll also need an image editor if you want to include a theme image for the theme’s menu to display.

If you’re customizing the child theme files and uploading them as you make changes, you’ll need an FTP client such as FileZilla.

Step 1: Create a folder for your child theme

Create a folder on your computer and give it the name of your child theme. Be sure to use a unique name. If the name is shared by another theme WordPress will try to update your child theme when that theme has an update.

Create a folder for your Divi child theme

Step 2: Create the style.css file

Use a text editor and create a file called style.css (it is critical that you name it precisely this way if you want WordPress to recognize it). Once created, follow the instructions below to enter all of the necessary information.

Create the style.css file for your child theme

Copy the following and paste it into your style.css file. You can then alter the information, but make sure to not change the Template name: Divi.

/*

Theme Name: Divi Child Theme
Theme URI: https://markhendriksen.com
Description: Divi Child Theme
Author: Mark Hendriksen
Author URI: https://markhendriksen.com
Template: Divi
Version: 1.0.0

*/

  
/* ----------- Place your custom CSS below this line ------------------ */ 

Theme Name (required) – make sure to use a unique name that isn’t used in the WordPress depository or any other marketplaces. WordPress doesn’t know the difference. If you use the same name as any other WordPress theme, then WordPress will want to update your child theme when that theme updates.

Theme URI (optional) – this is the webpage that shows the theme. It’s optional.

Description (optional) – this is a short description just to remind you of what this child theme is. If you’re creating the child theme for a client then you’ll want to be as descriptive as possible and use this area to describe the project.

Author (optional) – this is any name you want to go by in the world of Divi. It isn’t required, but it is helpful if you share the theme or if you’re creating it for a client. This way they know who to contact if they need more work done, making this a good marketing strategy.

Author URI (optional) – same as the author name, it isn’t required to add your web address, but it can be handy if someone needs to find you.

Template (required) – this identifies what the parent theme is. It’s important to use the correct parent theme or the child theme files won’t work. For us this will be Divi.

Version (optional) – I always leave this at default, but you use this any way you need to.

Step 3: Create the functions.php file

We need to enqueue the parent theme’s (Divi’s) stylesheet first. Think of enqueuing as “adding to a queue” – we have to add the parent stylesheet and then our child theme stylesheet.

This is important because CSS works in a hierarchical way – what you enter at the bottom always takes precedence over what’s at the top. If you don’t enqueue things in the right order, your new style won’t show up on your site! To do that we will add an enqueue function.

Create a new file in your divi-child-theme folder and name it functions.php.

Create the functions.php file and place it in your child theme folder

 Enqueuing Styles and Scripts

Now we have to add the following enqueve code in order to load our stylesheet after Divi.

Copy the following code and paste it into your just-created functions.php file.

<?php

function my_divi_child_theme_enqueue_styles() { 

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

}

add_action( 'wp_enqueue_scripts', 'my_divi_child_theme_enqueue_styles' );

 
// you can add your custom functions below this line:

Remove this part: //www.markhendriksen.com for some odd reason this is getting added in this code block.

So it should look like this:

Enqueve the styles

Step 4: Create a thumbnail for your child theme

Now that you’ve done the hard work of creating the functions.php and style.css theme files for your Divi child theme, it’s time to turn our attention to a screenshot for it.

It may be optional, but getting a nice screenshot is the best way to ensure potential users find your theme appealing on the WordPress themes page.

Create a screenshot for your Divi child theme

Make sure your screenshot follows these specifications: 880×660 and .jpg or .png file type.

The most important part is to name the image exactly “screenshot” so WordPress recognizes it; anything else won’t work here!

After you’ve safely saved all three of your files – functions.php, style.css, and now the screenshot – into one folder, you should have a beautiful Child Theme folder ready for use!

Step 5: Upload and activate your Divi child theme

First, you need to zip your Divi child theme folder. After that, you can just upload from the WordPress dashboard by navigating to Appearance > Themes.

Install and activate your Divi child theme

Your child theme is now active and ready to be used.

Create a Divi child theme with a child theme generator

A Divi child theme generator does the same work as the manual method, but all you need to do is fill in the information in a form and select an image. The generator creates the blank child theme that you can download.

The child theme generators are web-based. There are several available on the web designed specifically for Divi and Extra. Here’s a look at a few generators and how to use them.

The Divi Cake Child Theme Generator is a simple generator that creates the style, functions, and screenshot files. It works with both Divi and Extra. All of the fields with asterisks are required.

Divi Child Theme Generator by Divi Cake

Child Theme Name – use a unique name so WordPress doesn’t try to update your child theme when a theme with the same name updates.

Version Number – use any version number you want.

Author Name – Add your name here. This is helpful if you’re creating it for a client or want to remember that you created it.

Author URI – this is your web address in case someone wants to contact you.

Parent Theme – this determines if the child theme is made for Divi or Extra.

Theme Screenshot – this is where you upload the image that will display in your themes menu in the WordPress dashboard. Create a JPEG or PNG image up to 2MB.

Child Theme Description – this is a short description just to remind you of what this child theme is. If you’re creating the child theme for a client then you’ll want to be as descriptive as possible and use this area to describe the project.

Your Email – this is the email address that the child theme will be sent to.

Folder structure Divi cake generator

The zipped file will include the functions.php, screenshot, and CSS style sheet. You’ll need to unzip the child theme if you want to modify these theme files before uploading them to your Divi website. If you’re adding code, then I recommend testing the code on a test site before uploading it to your live site.

Functions.php file structure

The functions.php file includes some comments and the basic PHP functions.

Style.css file structure

The CSS stylesheet includes the information you entered in the theme generator.

Create a Divi child theme with a plugin

There are a few plugins that can create a child theme for Divi. One of those is The Divi Children plugin by Divi4u.

After downloading and installing this plugin you can navigate to Appearance > Divi Children and create your Divi child theme by filling in the fields.

Divi child theme plugin by Divi4u

Beginner Customizations

Now that your new child theme is active you can add custom CSS or other code to it. Navigate to Appearance > Theme File Editor.

Place your custom CSS in the theme file editor

You will see here the style.css file you have created, and you can add your custom CSS to this file.

In the top right corner, you can switch to functions.php. Here you can add your own PHP code.

Add code in the functions.php file

CSS code snippets

I will give you some CSS snippets that I regularly use for my child themes. You can place these snippets in Appearance > Theme File Editor > CSS file.

Row width

Give your rows more width for devices between 981px and 1250px:

@media (min-width: 981px) and (max-width: 1250px) {
.et_pb_section .et_pb_row {
width: 90% !important;
}}

Explanation: This snippet will make your rows wider for devices between 981px and 1250px. By default, the width is 80% but for smaller desktops this will in some cases not look that good, so I like to make it wider.

Space for menu items

To give your menu items more space in between you can use this snippet:

.et_pb_menu .et-menu>li {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

Explanation: This code can give your menu items extra space on the left and right sides. Divi does not have a setting to do this, but this code lets you adjust the spacing however you want.

Dropdown menu text

To change the dropdown menu font size and font weight you can use this snippet:

 ul.sub-menu li a {
    font-size: 17px !important;
    font-weight: 400 !important;
}

Explanation: The font size and weight for the dropdown menu will stay the same as the parent menu items. With this code, you can change the fonts in your dropdown menu differently.

Advanced customizations

You can make changes to more than just the style.css and functions.php files.

You can also change any of your parent theme’s files, like template files or PHP files. This is where you can completely change how your theme looks and works (but be very careful!).

When editing template files, you need to replace the old one with a new one instead of editing it directly because the original file will be ignored.

To do this, copy and paste the original file into your child theme folder making sure that it has the same name and location as before.

For example, if we want to edit Divi/header.php, then we would copy it to divi-child-theme/header.php

How to white label your Divi child theme

You can change the name and screenshot of your child theme to reflect your brand or your customer’s brand.

How to white label your Divi child theme

Step 1: Rename your Divi child theme folder

Navigate to the location of your Divi child theme folder, you can do this with FTP or through your hosting.

Change your Divi child theme folder name

When you change this folder name, the theme name will be changed. In case you want to use multiple words then make sure you use dashes between them.

Step 2: Change the child theme info in the style.css file

Navigate to Appearance > Theme File Editor.

You can change the info for:

  • Theme Name
  • Theme URI
  • Description
  • Author
  • Author URI
  • Version

Note: you can not change the Template name, this has to be Divi otherwise your child will not work anymore.

Change thhe name in style.css file

Step 3: Change the screenshot

You can upload a new screenshot in your child theme’s folder to replace the child theme thumbnail.

Change your screenshot for your child theme

The name of this image has to be “screenshot”. I recommend using image dimensions of 880x660px.

Troubleshooting Common Issues

Divi child themes are created to make it easier for you to customize your website, but you may still have problems. This guide will help you fix some of the most common issues that come up with Divi child themes.

Broken theme errror

1. Broken theme:

  • Issue: You get the broken theme error
  • Solution: The parent name of your folder needs to be Divi. Sometimes when you download Divi and you already have a folder named Divi in your downloads folder it will be renamed to Divi-1.

    If you then upload this Divi will work however the child theme will look for a parent theme named Divi. If your parent’s name is different the child theme can not find it.
Check if your folder name is Divi

2. Stylesheet Not Loading:

  • Issue: Your child theme’s styles aren’t reflecting on the website.
  • Solution: Ensure that the child theme’s style.css file is correctly enqueued in the functions.php file. Also, check for any syntax errors in your CSS that might prevent it from loading.

3. Functions Conflict:

  • Issue: After adding a new function to the child theme’s functions.php file, the website breaks or behaves unexpectedly.
  • Solution: Review the newly added function for syntax errors. Ensure that it doesn’t conflict with existing functions in the parent theme. If unsure, temporarily remove the function to see if the issue is resolved.

4. Child Theme Not Recognized:

  • Issue: The child theme doesn’t appear in the WordPress themes dashboard.
  • Solution: Ensure that the child theme’s directory and essential files (style.css and functions.php) are correctly named and located in the wp-content/themes/ directory.

5. Template Overrides Not Working:

  • Issue: Custom template files in the child theme aren’t overriding the parent theme’s templates.
  • Solution: Verify that the custom template files in the child theme have the exact same name and directory path as those in the parent theme you wish to override.

6. Custom CSS Not Applying:

  • Issue: Specific custom styles aren’t reflected on the website.
  • Solution: First try to clear your browser cache if that does not solve it then check for specificity issues in your CSS.

    It’s possible that the parent theme’s styles have higher specificity. You can adjust your selectors or use more specific selectors to ensure your styles apply.

7. Update Issues:

  • Issue: After updating the parent Divi theme, some customizations in the child theme no longer work.
  • Solution: Review the changelog of the updated Divi theme. It’s possible that some functions or hooks have changed. Adjust your child theme’s customizations accordingly.

8. JavaScript Errors:

  • Issue: Custom JavaScript added to the child theme causes errors or conflicts.
  • Solution: Ensure that your custom scripts are correctly enqueued and aren’t conflicting with existing scripts. Use browser developer tools to pinpoint and resolve JavaScript errors.

Maintenance and Best Practices

Creating a child theme is just the first step in web development. To keep your child theme running smoothly, you need to keep it up-to-date with the parent theme and organize your custom codes. It’s also important to test any changes on a staging environment before making them live so your website doesn’t break and visitors still have a good experience.

How to Earn with Divi Child Themes

You can earn extra income with your Divi child themes. Well-designed premium Divi child themes are in demand. They save the buyer both money and time because they don’t have to hire a professional designer and they can get their website started faster. They can also get features that are not available in layout packs.

Selling your child themes helps build your brand. There are two easy ways to sell them: on the Elegant Themes marketplace and from your own website. Let’s look at how they work and the advantages and disadvantages of both options.

Elegant Themes marketplace

Selling from the Elegant Themes marketplace reduces your marketing and hosting costs. Buyers often go to an online shop to search for Divi child themes. Elegant Themes marketplace gets lots of traffic and they put a lot of effort into getting that traffic.

You upload your child theme files, images, descriptions, and keywords, set the prices, and provide support. They provide a dashboard where you can see your sales stats and manage you’re your products. You’ll also have a profile page for information about you and your contact information.

They handle the sale, answer sales questions, include your child themes in their marketing materials, and host the files for download. They market through multiple channels including their websites, email, social media, and more.

The marketplace will get a portion of the sale, which is 30%. Also, your products are placed with many other child theme developers, so it might be difficult to stand out from the crowd. Also, the customers are not your customers so you can’t build relationships with them directly.

Your Own Shop

Selling from your own shop means you don’t have to share revenue with the marketplaces. You have direct access to your customers so you can market to them through email and social media. You can build your social media following and email list.

You can target your customers based on their buying habits, allowing you to run sales and make special offers based on what they’ve purchased before.

This requires an extra level of marketing and you’ll have to build the store into your website. The online store is easy to build with plugins such as WooCommerce or Easy Digital Downloads.

Examples of premium Divi child themes

There are lots of excellent examples in the marketplaces. Here’s a look at a few that are available here on this website.

I have made a list of the best Divi child themes on the market that you can check out.

Avanti

Avanti premium Divi child theme

This is a multi-purpose premium child theme and comes with 9 different home pages and 60+ page designs. It features multiple headers, slide-ins, flip boxes, and much more. You can use Avanti for any business, agency, plumber, renovation, photographer, restaurant, and for eCommerce websites.

Avanti is one of the top-selling child themes on the Elegant Themes Marketplace.

Kali

Kali Divi child theme

Kali is a modern and multipurpose design focused on any type of business and agency website. It comes with 18+ page designs, a custom slide-in, 4 hero sections, and 3 different header and menu designs.

Home Services

home services Divi child theme

This design is for the general contractor niche and a great choice for renovators, painters, plumbers, and roofers.  It’s designed to show your services with conversions in mind. This design comes with 14 custom page designs, a slide-in, and a custom header.

Installing a Premade Child Theme

Installing a Premade Child Theme

Install the child theme in the same way and for a blank child theme, but once the child theme is activated you need to import the data. There are several ways this can work. One popular method is to include a new menu item with the name of the child theme. This can be in the dashboard, within the Divi menu, within Settings, etc. In this example, hovering over the menu item shows a link called Import Demo Data.

Installing a premade Divi child theme with a one-click importer tool

This opens a page with information about the demo. In this case, the child theme requires plugins. The plugins are identified and it includes a link to install them, activate them, or dismiss the notice. To install the demo content click Import Demo Data. Wait for the import to finish and your website will then look like the demo (some include placeholder images). Replace the demo content with your own and your site is ready.

FAQs about creating and using Divi child themes

Do I need a Child Theme for Divi?

If you’re using the Divi theme for your WordPress website, the question of whether or not you should use a child theme may be on your mind.

A child theme acts as an extension of its parent theme and can help with customizing complex changes to its look and feel while ensuring any modifications you make are preserved with version updates. That said, a definitive answer can depend on a few factors such as how much customization you plan on doing and the potential security risks involved.

What is a premium Divi child theme?

A premium Divi child theme is designed to work exclusively with the Divi theme. It’s basically a set of pre-made layouts and styles that you can use to supercharge your site design. For example, a Divi child theme might come with page templates, added customizations, and extra features tailored specifically for the Divi website builder.

By leveraging the power of a custom child theme, you can customize your site without any coding.

How do you update a Divi Child Theme?

Thankfully, Premium Child Themes generally don’t need to get updated. When you purchase a high-quality Divi Child Theme, the probability is very low that any updates will be needed – if at all! This is because the majority of the features are contained in the Divi theme itself, with only styling being placed within the child theme.

Can I make a child theme of a child theme?

No, a child theme cannot possess its own child themes. The only way to create a child theme is for it to be connected with the parent theme.

Is it possible to add a blank child theme to an existing website?

Yes, adding a child theme to your existing website won’t cause any issues and everything will remain the same – from both front-end and back-end.

Though it is safe to add a new child theme, it’s always best to perform a backup just in case something goes wrong later on.

Conclusion

Creating a custom Divi Child Theme is a great way to add extra flexibility to your website. By following this simple guide, you can create your own child theme in no time! With just a few clicks of the mouse.

Divi child themes provide a lot of benefits. A few benefits we’ve covered in this guide include:

  • You won’t lose your customizations when Divi updates.
  • They can include features not found in layout packs.
  • They’re easy to make.
  • You can purchase pre-designed child themes and save time and money on professional designs.
  • You can even reuse and sell your Divi child themes.

You don’t even have to know what goes into creating them or understand how they work in order to use them. Considering how easy they are to make with Divi child theme generators and use, there’s no reason not to use them.

If you’re looking for professionally designed Divi child themes to help you get a head-start on building your website, there are lots of great choices available here in the Divi Marketplace.

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

4 thoughts on “How to Create a Divi Child Theme”

  1. Great tutorial, thank you. A newbie question. If you have already designed your site without a child theme in place can you add a blank child theme afterwards? I would like to add a custom header?

    Reply
  2. Congratulations mark, your child themes are one of my favorites. Really I,ve taste it in google speed and all of them gives the best results.

    Reply
  3. thanks for greater tut , if i have designed my site and published constant and already running can i create child theme without losing any data ?

    Reply

Leave a Comment

45 Shares
Share41
Pin4
Tweet