How to Create Divi Child Theme: Everything You Need to Know

Team DiviFlash

Updated: December 21, 2023
Table of Contents

When it comes to building and customizing your WordPress website with the popular Divi theme, the Divi Builder and pre-designed layout packs offer quick and easy options. 

However, if you desire extensive customization with custom CSS and PHP functions to achieve a truly unique look and feel, creating a Divi child theme is the way to go. 

A child theme inherits the appearance and functionality of its parent theme while keeping any modifications separate. 

In this article, we will discuss how to create a Divi Child theme, providing valuable insights for both beginners starting out with Divi and developers looking to offer complete Divi Child Themes to their clients. 

Let’s explore the benefits and steps involved in creating a Divi child theme, ensuring your website remains intact even when updating the parent theme.

Why Do You Need to Create a Divi Child Theme?

Creating a child theme for Divi offers several benefits and is essential for certain customization needs. Here’s why you should consider creating a Divi child theme:

  • Preserve Customizations During Updates: Updating the parent theme without a child theme can overwrite your customizations. By creating a child theme, you can update Divi without losing your modifications. This is particularly crucial for themes like Divi that receive frequent updates.
  • Efficient Development Across Multiple Sites: A Divi child theme can be easily replicated or transferred between sites. This simplifies the development process when working on multiple projects, making it ideal for freelancers or agencies managing WordPress sites for numerous clients.
  • Simplify Collaboration with Designers and Developers: With a child theme, customizations are organized in one dedicated folder. Collaborating with other designers or developers becomes more seamless. Customizations are easily accessible, avoiding the need to navigate multiple settings pages which eventually speeds up development time and prevents unwanted modifications by non-technical users.
  • Low-Risk Theme Development: Creating a child theme provides a safe environment for theme customization. If any issues arise or changes are unsatisfactory, disabling the child theme restores the parent theme. No need to worry about breaking the site or reverting extensive changes.

When Do I Need to Use Child Theme?

Making the decision to use a Divi Child theme depends on the extent of your customizations. If you only plan on making minor modifications, you can utilize Divi’s built-in editing tools like the Builder and Theme Customizer. 

However, if you anticipate more significant changes, a Child theme offers greater flexibility. Consider the future changes you expect to make on your site before deciding whether to create a Child theme or not.

You should use a Divi Child Theme,

  • If you plan to modify specific theme files such as page templates or functions.php, creating a child theme is recommended. It allows you to customize the code without affecting the parent theme.
  • When adding a significant amount of code (CSS, JavaScript, etc.), a child theme provides a more organized and manageable space. Managing large amounts of code within the theme settings can become challenging.
  • If you want to collaborate with others or work efficiently across multiple sites, a child theme offers benefits. Keeping all customizations in one organized space simplifies teamwork and speeds up development time.

You should not Use a Divi Child Theme,

  • If your customization requirements involve minor CSS changes (less than 100 lines) or a few scripts in the Theme Settings/Customizer, a child theme may not be necessary. 
  • If you don’t have significant alterations planned for the theme’s design or functionality, a child theme might not be required. 
  • Integrating scripts like Google Analytics, Facebook Pixels, or tracking codes can be done directly through the integration tab in Divi Theme Options. Creating a child theme is not necessary for these purposes.

How to Make a Divi Child Theme: 4 Proven Ways

You can adopt one of the four main approaches when it comes to creating a child theme:

  • Using free blank child theme
  • Manually with code
  • Child theme generator
  • Using a plugin

Create a Divi Child Theme by Using Free Blank Child Theme

To simplify the process of setting up a Divi Child theme, we offer a convenient solution: our pre-made blank Divi Child theme. This child theme comes with pre-scripted files such as style.css, functions.php, and footer.php, which will be automatically installed upon activation on your WordPress website. 

After downloading the child theme, you have the option to use it as-is or customize it by modifying details like the name, author, and links. Additionally, you can incorporate your own custom styling and functions.

Here is a step-by-step process to get started:

  • Download the free blank Divi child theme package.
  • In your WordPress dashboard, go to Appearance > Themes and click on Add New.
  • Upload the downloaded Divi child theme folder (do not extract it) and proceed to activate it.

Create a Divi Child Theme Manually with Code

If you’re up for a WordPress development challenge or enjoy the flexibility of manual customization, creating a Divi child theme is an excellent option for you.

To create a child theme manually, you’ll need a reliable text or code editor like Notepad, Notepad++, Sublime, Brackets, or similar tools. Additionally, if you wish to include a theme image for the theme’s menu display, an image editor will come in handy.

If you prefer a hands-on approach, where you can customize the child theme files and upload them as you make changes, utilizing an FTP client such as FileZilla is recommended.

Step 1: Create a folder for your Divi child theme

Similar to the parent theme (Divi), your child theme requires a dedicated folder to house all its files. To begin with, create a folder on your computer and give it a unique name, specific to your child theme. It’s essential to choose a distinct name to avoid any conflicts or unintentional updates triggered by other themes with similar names.

Step 2: Create the style.CSS file

To create a style.CSS file for your Divi child theme in WordPress, follow these steps:

  • Open a text editor of your choice.
  • Create a new file and name it “style.css”. The exact name is crucial for WordPress to recognize it as the CSS file for your child theme.
  • Organize your files by creating a dedicated folder on your computer. Choose a name for the folder that indicates it is intended for your Divi child theme.
  • Place the “style.css” file inside the folder you created.
  • Now you can start adding your custom CSS code to the “style.css” file to customize your Divi child theme.

Copy the following code snippet and paste it into your style.css file. Remember not to modify the Template name, which should remain “Divi.”

/*
Theme Name: Your Child Theme Name
Theme URI: Your Child Theme URI
Description: Your Child Theme Description
Author: Your Name
Author URI: Your Website
Version: 1.0
Template: Divi
*/

You can customize the theme name, theme URI, description, author, author URI, and version according to your preferences. To add additional custom CSS and ensure your Divi child theme is functioning correctly. You can include your custom CSS within the designated section.

Step 3: Create the functions.php file

To ensure proper styling hierarchy and make your custom styles take precedence, it’s important to enqueue the parent theme’s (Divi’s) stylesheet first, followed by your child theme stylesheet. Enqueuing is like adding items to a queue, and the order matters.

Now, create a new file in your Divi-child-theme folder and name it functions.php. This file will handle the necessary enqueuing process and allow you to add any custom functions you desire.

Add the code snippet below to your functions.php file. You can place any additional custom functions below the last line of code:

<?php
function enqueue_child_theme_styles() {
    // Enqueue the parent theme's stylesheet
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
  
    // Enqueue the child theme's stylesheet
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_styles');

Step 4: Create a screenshot

Now that you have successfully created the functions.php and style.css, for your Divi child theme, it’s time to focus on creating a screenshot for it. Although it is optional, having an appealing screenshot is highly recommended to attract potential users when they come across your theme on the WordPress themes page.

To ensure compatibility, please ensure that your screenshot meets the following specifications: its dimensions should be 880×660 pixels and the file format should be either .jpg or .png. The crucial part is naming the image file exactly as a “screenshot” so that WordPress can recognize it. Any other name will not work in this case.

Once you have securely saved all three files—functions.php, style.css, and the screenshot—into a single folder, your Child Theme folder will be ready for use and visually complete.

Step 5: Upload and activate your Divi child theme

First, compress the folder containing your child theme files into a zip file. Once you have done that, go to the WordPress dashboard and navigate to Appearance > Themes. From there, click on the “Upload” button and select the zip file you just created. After the upload is complete, you can activate the theme by clicking on the “Activate” button.

And that’s it! Congratulations, you’ve successfully created your own blank Divi Theme child theme! 

Create a Divi Child Theme by Using Child Theme Generator

If you prefer a more convenient approach, you can make a Divi Child theme using a Divi Child Theme generator or creator. With a Divi child theme generator, you can accomplish the same tasks as the manual method, but with a simplified process.

These tools allow you to input the custom details of your child theme, and they will automatically generate the necessary files for you, even packaging them into a zip file for easy upload. 

There are several options available on the Internet. Here we will use the Divi child theme builder by WPZone. It is a free tool and incredibly user-friendly. All you need to do is enter your details in the text boxes provided, and the tool will generate all the necessary files for your child theme. 

Once it’s done, you’ll receive your customized child theme via email. To complete the process, just download the child theme and upload the .zip file to your WordPress dashboard’s theme console. Make sure you have the parent theme (Divi) installed and activated beforehand.

Create a Divi Child Theme by Using a Plugin

The last and final approach to creating a child theme involves using a plugin. There are various free plugins available that enable you to effortlessly and rapidly create a child theme.

Once you have downloaded and installed the plugin, you can access the settings by going to Appearance > Plugin you installed. From there, you can easily create your Divi child theme by filling in the required fields.

If using a plugin doesn’t suit your preferences, you always have the option to manually create a Divi child theme.

Here are a few of our top Divi Child Theme Plugin recommendations:

Divi Children

Divi Children is a free plugin designed specifically for Divi users. It simplifies the process by automating tasks, allowing you to focus on creativity. It offers extensive customization features via the WP Customizer.

Child Theme Configurator

This plugin is ideal for WordPress users who want to customize child theme stylesheets directly. It allows easy identification and overriding of specific CSS attributes. The built-in analyzer scans the theme and configures your child theme accordingly.

Child Theme Creator by Orbisius

This plugin enables the quick creation of child themes from any installed theme on your site. You can create unlimited child themes from the parent theme and use two editors to customize them. It also allows copying code snippets between themes.

FAQs about Divi Child Theme

Question: What you will Need to Create a Divi Child Theme?

Answer: To create your Divi Child theme, you will require the following:

  • Ensure that you have the Divi theme installed and activated on your WordPress website before proceeding with the child theme creation.
  • You will need a text editor to edit the theme files. While the default text editors that come with Windows or Mac can be used, it is recommended to use a more powerful text editor like Atom, Sublime, Notepad++, etc., especially if you anticipate frequent editing of these files.
  • If you intend to access the theme files of a live website, an FTP client like FileZilla is necessary. It allows you to connect to the server and manage theme files by providing options to edit, add, or delete them. However, if you are working on a local installation, you can directly access the theme files on your computer’s hard drive, and an FTP client is not required in that case.

Question: How to Test if Your Divi Child Theme is Working?

Answer: To ensure that your child theme is functioning properly, follow these steps:

  • Add CSS code to your child theme’s style.css file and save the changes.
  • Check the live site to see if the applied CSS changes are visible. This confirms that your child theme is working as intended.

Note: If the changes don’t appear immediately, try opening the page in a private browser window to bypass any cached data.

Question: How to Add New Code to Your Child Theme?

Answer: Once your new child theme is activated, you can begin adding custom CSS and other code to personalize it. To access the theme file editor, go to Appearance > Theme File Editor.

Within the editor, you will find the style.css file you created for your child theme. This is where you can insert your custom CSS code to modify the theme’s appearance.

In the top right corner of the editor, you can switch to the functions.php file. This is where you can incorporate your own PHP code to enhance the functionality of your child theme.

Question: Why Divi Child Theme Not Working?

Answer: If your child theme is not functioning properly, it’s possible that you may have overlooked certain steps. Follow these guidelines to ensure you haven’t missed anything:

  • Ensure that the two files in your child theme folder are named “functions.php” and “style.css”.
  • Confirm that the Template name specified in the CSS file is the same as the parent folder name, which should be “Divi”.
  • The parent folder of your theme must be named “Divi”. Sometimes, if you download Divi and already have a folder named Divi in your downloads folder, it may be automatically renamed to “Divi-1”. In such cases, when you upload the theme, Divi will still function properly, but the child theme will be unable to locate the parent theme named “Divi”. You can check this using FTP or your hosting provider’s interface.
  • If you’ve made custom CSS modifications but don’t see the changes reflected on your site, ensure that you clear your browser cache. Additionally, if you’re using a caching plugin, remember to flush its cache as well.
  • If you have enabled the static CSS cache in Divi > Theme Options > Builder > Advanced, make sure to clear that cache as well.

Question: What is a premium Divi child theme?

Answer: A premium Divi child theme is specifically crafted to complement the Divi theme, providing a collection of ready-to-use layouts and styles that elevate your website design. These themes often include additional page templates, customized elements, and exclusive features that are finely tuned for the Divi website builder.

Final Word

This was all about “how to create a Divi child theme.“ Divi is a highly popular WordPress theme known for its ease of use and flexibility, which makes it a top choice for many website owners. If you want to customize your Divi theme even further, creating a child theme is the perfect solution.

This comprehensive guide provides you with step-by-step instructions to effortlessly create your own Divi child theme. If you have any additional points or questions you would like us to address, or if you require any assistance, please feel free to share your thoughts in the comments section below.

Team DiviFlash

At DiviFlash, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

DiviFlash 1.4.7 is Here

DiviFlash 1.4.7 is Here