Ria du PlessisIf you’re a new Divi user, you might be wondering whether or not to use a Divi child theme. Alternatively, you may have just learned about a Divi child theme and are curious to know more. In this article, I will provide you with all the information you need to know about a Divi child theme. I’ll even guide you through the process of creating your own Divi child theme. If you are still on the fence, I’ll also help you determine if a Divi child theme is truly necessary for your Divi website.
If you’re interested in learning more, keep reading!
Table of Contents
- What Is A Divi Child Theme?
- Is It Possible to Use Divi Without a Child Theme?
- What You Need to Create a Divi Child Theme
- The Building Blocks of a Child Theme
- How To Create Your Divi Child Theme
- Upload and Activate Your Divi Child Theme
- Frequently Asked Questions
- Wrapping Up
What Is A Divi Child Theme?
A Divi child theme is an extension of the Divi theme that also inherits the functionality and styling of the parent Divi theme. However, it can also have its own independent functions, styles, and design. When WordPress executes the child theme files first, any customized header, footer, sidebar, etc., in those files execute instead of the parent theme.
Using a Divi Child theme enables you to make customizations to the parent theme without directly modifying it. It has its own CSS stylesheet that can be used to customize your website’s appearance and a functions.php file for implementing other modifications.
Is It Possible to Use Divi Without a Child Theme?
It is 100% possible to use Divi without creating a Child Theme, but it is crucial to understand the circumstances in which a Child Theme is needed. This is a crucial step in your Divi web development process.
Below, I have listed a few circumstances where you will need to create a Divi child theme, and when you do not need a child theme.
When You NEED A Child Theme
When You want to customize the style.css files and you don’t want to lose your customizations when Divi updates.
When You DO NOT Need A Child Theme
When you are not going to change anything in your files, and only add minor CSS customizations, you DO NOT need to create a Divi Child theme.
What You Need to Create a Divi Child Theme
To create your Divi Child theme, you will need the following:
- Divi Theme Installed and Activated
- A Text Editor for editing theme files. You can use the text editor that comes with Windows or Mac but if you plan on editing these files, I suggest getting a more powerful text editor like Atom, Sublime, Notepad++, etc.
- An FTP Client – This isn’t necessary if you plan on uploading your child theme to WordPress as a zip file. But if you are trying to access the theme files for a live site you will need an FTP client like FileZilla to access, edit, add, or delete theme files. If you are working on a local install, you should be able to access the theme files directly on your hard drive.
The Building Blocks of a Child Theme
On the most basic level, a child theme must consist of three things:
- A child theme directory (or folder). Like all themes, your child theme folder will exist inside your WordPress Themes folder that holds your child theme files.
- A style.css file (which will be used to store your child theme CSS).
- A functions.php file – At the basic level this file will hold the wp_enqueue_scripts action that will enqueue the parent theme stylesheet (more on this later).
*Related Article – Divi vs Elementor: Which Page Builder Is the Best in 2024
How To Create Your Divi Child Theme
Create a Divi Theme Folder
Create a folder to place all your Divi child theme template files and assets. To create this folder, you can use your File Manager. This is located in the control panel of your WordPress hosting provider.
Open your File Manager, click the public_html folder, and then on the wp-content folder.
Find the folder labeled “themes.” Then, click +Folder from the toolbar at the top of the screen.
You can name this folder “Divi-child.” This folder will be the directory for your Divi child theme.
Create A Stylesheet For Your Divi Child Theme
Next, you’ll need to create a stylesheet to contain all of the CSS for your Divi child theme. To do so, you’ll need to use a text editor.
Add a header comment. This header comment is required for the stylesheet to work. It contains basic info about the child theme, including that it is a child theme of the Divi parent theme.
Below is an example of a complete header comment:
/*
Theme Name: Divi Child
Theme URI: https://example.com/divi-child/
Description: Twenty Twenty-One Child Theme
Author: Ria du Plessis
Author URI: https://example.com
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
The slashes and asterisks signify that this code will be “commented out” in CSS so WordPress doesn’t try to render it on the front end.
Create Your Functions.php to Enqueue Your Parent Theme Stylesheet
Now that we have our style.css file for our child theme, we need to make sure we don’t leave out the styling already in place inside Divi (the parent theme). This means we will need to use Divi’s Parent stylesheet first and then introduce our new stylesheet afterward.
This order is important because if you are familiar with CSS, the code you enter at the bottom will always take precedence over the code at the top. So, in our case, we want the parent stylesheet code to load first and then our child stylesheet code last. To do this, we need to enqueue the parent theme’s (Divi’s) stylesheet.
*Related Article – Top Divi Updates You Need To Know
Enqueue is a fancy word that means “add to a queue” so in this case we are adding the parent stylesheet to be queued first before the child theme stylesheet. In other words, anything we add to our child theme stylesheet will add to and supersede the parent theme.
Since Divi was first launched, it was set up to adhere to the original WordPress recommended way of setting up a child theme. This original method of creating child themes involved doing a CSS @import of the parent theme’s stylesheet from within the child theme style.css file. Many themes are still set up in this way, leaving the child theme the simple task of defining its own style.css and @import -ing Divi’s style.css and Divi will load that file automatically.
This works by Divi using the get_stylesheet_directory_uri() function when it enqueues the main stylesheet. What this means is Divi is set up to call upon either its own stylesheet or the child theme’s stylesheet (whichever one is active).
With the get_stylesheet_directory_uri(), if you have activated a Child Theme, WordPress will return the URI to the child theme directory rather than the parent theme directory. Now that WordPress has updated its recommended way of approaching this, you can still easily set up the styles for your Divi child theme. All you need to do is explicitly enqueue Divi’s main style.css since Divi is already set up to enqueue the child theme’s style.css.
To do this, we will need to use our text editor to create another file within the child theme folder. Save the file with the Name functions.php (the name must be exactly this) and then add the following code to the file:
<?php
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’ );
Upload and Activate Your Divi Child Theme
This is an easy step. You can install and activate your Divi child Theme the same way you would install any WordPress theme. Once your child theme is uploaded and it appears on your WordPress Themes section, you can go ahead and click activate.
Your Divi Child Theme is now live but will look identical to your Divi Parent theme. So, you would want to go ahead and customize it a little bit!
Below is a video by Josh Hall on How To Create A Divi Child Theme. He takes you through the steps to show you how he creates his Divi Child Themes!
Frequently Asked Questions
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.
Wrapping Up
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!
Try Divi Areas Pro today
Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.
Click here for more details
Try Divi Areas Pro today
Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.
Click here for more details
More Articles You Will Like
