A child theme lets you make any type of customization to your theme without worrying about losing it when you update the theme.
Divi is not an exception to that. You can create a child theme in Divi too.
The child theme benefits you in many ways. It helps you keep all your custom CSS/Code in one place, making collaboration easier and preventing clients from accessing your code through the theme customizer.
In this post, we will show you how to create Divi child theme in WordPress. No matter if you’re just getting started with Divi or a developer, we have all the solutions you need.
Let’s start!
Things Required to Create Divi Child Theme
We know that making something new always needs some pre-work. To create a child theme for Divi is not an exception.
Here to start –
- Ensure you have the latest Divi theme installed and active on your WordPress site
- You’ll need a text editor to modify the theme files. Using the default text editor that comes with Windows or Mac is fine, but it’s better to use a powerful one like Atom, Sublime, or Notepad++. (For MANUAL child theme creation)
- Have an FTP client like FileZilla if you want to edit theme files on a live website. It allows you to connect to the server and manage theme files. (For MANUAL child theme creation)
Note: If you are working on a local installation, you can directly access theme files on your computer without needing an FTP client.
All set!
Now. let’s move on to how to create a child theme in Divi
Method #1 – Using Downloadable FREE Blank Divi Child Theme
First, we will go with our ready-made blank Divi Child theme process; the easiest one.
Here’s how can you get started:
- Download the free blank Divi child theme package from here
- Go to your WordPress dashboard > Appearance > Themes and click on Add New Theme.
- Next, click on Upload Theme and upload the downloaded Divi child theme zip file (don’t extract it) and activate it.
Once you have the child theme, you can use it as it is or customize it by changing details like the name, author, and links. Additionally, you can incorporate your own custom styling and functions.
Method #2 – Via Divi Child Theme Generator
If you’re not comfortable with someone else’s code, the next easy solution is to use a child theme generator. This child theme generator simplifies the process of creating a child theme compared to doing it manually.
Here’s how a child theme generator works; first this tool will give you the option to input custom details for your child theme. Then it will automatically generate the necessary files for you, even packaging them in zip file format so that you can upload your child theme very easily.
However, there are several options available to generate child themes on the Internet. Among them, 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, click on ‘Generate’ 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 file and upload the .zip file to your WordPress dashboard’s theme console.
Method #3 – Through a Plugin
In this third process, we will here create Divi child theme using a third-party plugin. Though, you can find various free plugins available on the market that can enable you to effortlessly and rapidly create a child theme.
From them, here’s our recommendation list you can relay:
- Child Theme Configurator (Free and Premium)
- Child Theme Generator (Free)
- Child Theme Wizard (Free)
- Child Theme Creator by Orbisius (Free and Premium)
- Childify Me (Free)
- WP Child Theme Generator (Free)
So, using a plugin to create a child theme is a simple one.
First, download and install the plugin. Later to access the settings go to Appearance > Plugin you installed. From there, you can easily create your Divi child theme by filling in the required fields.
For a clean and clear understanding, let’s have a demo.
Step 1: Install the Plugin
For example, we will use the plugin named Child Theme Configurator (free version) here. To install the plugin, walk with us:
- First, go to the WordPress dashboard > Plugins > Add New Plugin
- Write the name of the plugin(Child Theme Configurator) you are required for on the search bar
- Click on Install, wait a second, and activate it.
- After activating the plugin, you will get the plugin settings visible on the WordPress dashboard > Tools > Child Themes
Note: If you are starting with a downloaded plugin, simply upload, install, and activate it. However, you may not find the plugin settings on Tools, so you can look in the WordPress dashboard or Appearance instead.
Step 2: Create Divi Child Theme
Now to create Divi child theme, follow these steps:
- In the Parent/Child tab, select CREATE a new Child Theme.
- Choose a parent theme(Divi) from the drop-down list.
- Click Analyze to let this child theme plugin examine the parent theme’s configuration.
Note: If you don’t have a child theme on your profile, you won’t see these four options. ‘CREATE a new Child Theme’ is the only option that will appear.
- Once the plugin analyzes your theme, it will give you the option to customize things like name your new theme directory, parent theme stylesheet handling with advanced options, and a tab for modifying the child theme attributes. You can change them according to yours if needed.
- Next, click on the ‘Click to Edit Child Theme Attributes’ tab. This tab extends the option to change the child theme’s information, including its name, description, and, optionally, the author and version details.
- Lastly tick the checkbox if you want to copy the menus, widgets, and other things if you are required to create Divi child theme
- Then click to run the Configurator to create a child theme in Divi
Now to check the child theme you have created, go to the Appearance > Theme. Here is ours –
Finally, activate your new child theme to begin to use. You can either customize it through Appearance → Customize. This Child Theme Configurator plugin ensures that all styles and scripts from the parent theme can seamlessly transfer to your newly created child theme.
However, if using a plugin doesn’t suit your preferences, you always have the option to create Divi child theme manually. Which we are going to cover in our next method #4.
Method #4 – Create Divi Child Theme Manually
Doing things manually or starting from scratch is always been a tough one. But if you like to roll up your sleeves and put yourself up to a WordPress development challenge, then this section is a great choice for you.
A Divi child theme consists of three initial things such as style.css, functions.php, and a screenshot. So, now we will create them manually.
But before you have to ensure that –
- You have a reliable text or code editor and
- An FTP client(online customization) for customizing the theme files (optional)
Step 1: Create a Divi Child Theme Folder
Like the parent theme (Divi), your child theme needs its own folder for all its files.
Start by making a folder on your computer and give it a special name just for your child theme. Make sure it’s a unique name to prevent any issues or accidental updates caused by other themes with similar names.
That’s the first step, let’s continue to the next step!
Step 2: Create the style.CSS file
To create a style.CSS file for your Divi child theme in WordPress, go to your created folder and follow these steps:
- Open a text editor of your choice.
- Make a new file and name it “style.css”. It must have this name for WordPress to know it’s the CSS file for your child theme.
- Put your custom CSS code into the “style.css” file to customize your Divi child theme.
Copy the code below and paste it into your style.css file.
/*
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
*/
However, You can customize the theme name, theme URI, description, author, author URI, and version according to your preferences. Just don’t change the Template name; keep it as “Divi.”
To include extra custom styles and make sure your Divi child theme works properly, insert your custom styles in the specified section.
Step 3: Create the functions.php file
Next, in your Divi-child-theme folder, make a new file called functions.php; the second child theme file. This file will take care of putting things in the right order and let you add any special functions you want.
Copy and paste the code below into your functions.php file. If you have more custom functions, add them 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');
Note: Make sure your custom styles show up correctly by putting the main theme’s (Divi) styles first, and then your child theme’s styles. Think of it like waiting in line – the order is important.
Step 4: Create a screenshot
After making the style.css and functions.php files for your Divi child theme, now let’s create a screenshot. It’s optional, but if you skip it, you’ll have a blank space on your WordPress themes page.
To ensure compatibility, please ensure that your screenshot meets the following specifications:
- Its dimensions should be 880×660 pixels, in either .jpg or .png format.
- Name the image file exactly “screenshot” so WordPress can recognize it. Other names won’t work.
Make sure you have saved all of these three files—functions.php, style.css, and the screenshot—in your created folder.
That’s it. Now your Child Theme is ready to use and looks complete.
Step 5: Upload and Activate your Divi Child Theme
Before uploading in WordPress, compress the child theme folder(created one) into a zip file.
Then to upload the Divi child theme you have to –
- 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. Wait a second and the upload will be complete.
- Then you can activate the theme by clicking on the “Activate” button.
Congratulations, you’ve successfully created your own blank Divi child theme!
Bonus: If you prefer that these blank child theme creation methods don’t serve you the best. Here’s our premium child theme for you.
Things to Know that Your Divi Child Theme Working or Not?
But yes, there can happen some mistakes too as we are human. So, check that your child theme is working correctly by doing the following:
- Ensure that the stylesheet is correctly added. If none of the CSS is loading, it may be because the entire stylesheet has not been added correctly.
- Confirm that the template is called correctly in the stylesheet header. Write ‘Divi’ with a capital D exactly like it is in the parent theme folder.
- If you think the CSS is broken, add something simple, obvious, and unmissable to the style sheet.
- Ensure Divi’s stylesheet isn’t taking over your own CSS. If your other CSS is working fine, Divi’s styles might be overriding your edits.
- Check if a caching plugin is affecting your stylesheet. If you use a caching plugin, your browser might be showing a cached version of your page, causing you not to see your changes.
Note: If any of the changes don’t appear immediately, try opening the page in a private browser window to bypass any cached data.
What is the Difference between Divi Theme & Child Theme?
Divi is the parent theme that has the main functionality and styles, including the builder. While a child theme inherits everything from Divi but allows safe, isolated customization.
It’s like renting a place (Divi) and decorating it (child theme) without changing the main structure. The child theme keeps your changes safe when the parent theme updates and lets you personalize your website without risk.
Precautions for Creating a Child Theme
Creating a child theme in WordPress requires some precautions that ensure a smooth and efficient process.
If you want to develop a clean and clear child theme, consider the following best practices:
- Backup your website: Before making any changes, create a backup of your website. This is important to avoid any issues, and you can do this regularly.
- Test in a safe environment: Use a staging environment or install WordPress locally to test your new child theme. This helps ensure that any changes you make won’t cause problems on your live site.
- Choose a good parent theme: Pick a parent theme from a developer who regularly updates and provides support.
- Follow folder structure: Keep the same folder structure as the parent theme. WordPress uses a template hierarchy based on folder organization, so maintaining this structure ensures everything works smoothly.
- Document your changes: Add comments in your child theme files to explain the modifications you’ve made. This is helpful for future updates and for other developers who might work on your theme.
Conclusion
That’s all from us.
Hope you found our guide on how to create Divi child theme in WordPress helpful. If it is, feel free to share it as well!
Or if you have any additional questions/comments, or need assistance, please let us know in the comment section below.
0 Comments