If you’ve installed the Divi theme on your WordPress website, you can use the Divi Builder and pre-designed layout packs to create and customize your site quickly and easily.
But if you’d like to add lots of custom CSS and PHP functions to create a truly unique look and feel for your site, then you’ll want to create a Divi child theme. A child theme is a sub-theme that inherits the look, feel, and functions of the parent theme. When you make modifications to the child theme, they are kept separate from the parent theme’s files.
Let’s look at the benefits of creating a Divi child theme, then walk through how to do it.
Why Create a Divi Child Theme
Creating a child theme and therefore keeping your modifications in a separate folder from your theme — offers many benefits.
First and most importantly, you’ll be able to update the parent theme without losing your customizations. This is important when using a theme like Divi, which is frequently updated.
Second, you could also easily replicate or move this child theme folder from one site to the next to speed up the development process across multiple sites. As a result, creating a child theme is particularly ideal for freelancers or agencies that create WordPress sites for many clients.
Third, creating a child theme can make it easier to collaborate with other users. Say you’re working with other designers or developers. With a child theme, you’ll have all your customizations in one organized folder — instead of spread across the settings pages and WordPress Customizer in your dashboard. This can significantly speed up development time. Also, keeping customizations in a separate folder can prevent certain users — like clients — from messing with the code and configurations set in the theme’s setting pages and WordPress Customizer.
Fourth, creating a child theme is like creating a WordPress staging site in that you can start dabbling in theme development in a low-risk environment. Let’s say you begin customizing your child theme and something goes wrong or you aren’t satisfied with your changes. In that case, you can just disable the child theme. It will restore the parent theme and your website as it was — no need to worry about breaking your site or having to roll back all your changes.
Now that you understand the benefits of creating a Divi child theme, let’s walk through how.
How to Create a Divi Child Theme
- Create a Divi child theme folder.
- Create a stylesheet for your Divi child theme.
- Enqueue the parent and child themes’ stylesheets.
- Install and activate your Divi child theme.
- Edit your child theme’s style.css file.
- Edit your child theme’s functions.php file.
- Add templates to your child theme’s directory.
Step 1: Create a Divi child theme folder.
To start, you’ll need to create a folder where you can place all the template files and assets of your Divi child theme. To create this folder, you can use File Manager. This is located in the control panel of your WordPress hosting provider.
- Open File Manager.
- Then click the public_html folder.
- Click the wp-content folder.
- Find the folder labeled “themes.”
- Click +Folder from the toolbar at the top of the screen.
- Name this folder “Divi-child.”
This folder will be the directory for your Divi child theme.
Step 2: 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. For the sake of this demo, I’ll use Sublime Text since it’s one of the best HTML & CSS editors.
Create a new text file and name it “style.css.”
Next, add a header comment. This header comment is required for the stylesheet to actually work. It contains basic info about the child theme, including that it is a child theme of the Divi parent theme.
You really only need to include two things in this header comment: the theme name and template (ie. the parent theme’s name). You can include other information, including a description, author name, and version, if you’re going to publish or sell your child theme.
Here’s an example of a complete header comment for a Divi child theme:
/*
Theme Name: Divi Child
Theme URI: https://example.com/divi-child/
Description: Twenty Twenty-One Child Theme
Author: Anna Fitzgerald
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.
Later, we'll walk through how to add custom CSS. For now, click Save so this stylesheet will be saved in your child theme’s directory.
Step 3: Enqueue the parent and child themes’ stylesheets.
Now it’s time to enqueue your parent and child themes’ stylesheets. This will ensure two things.
First, that the child theme inherits its parent theme’s styling. Otherwise, when you activated your child theme, you’d just be looking at a bunch of unstyled text.
Second, that the child theme’s stylesheet is loaded before the parent theme’s — but doesn’t override it. That way, once you add custom CSS and otherwise modify your child theme, these modifications will either add to or replace certain styles and functions of the parent theme.
To enqueue these stylesheets, you need to create another file in your child theme’s directory.
You should still have cPanel open and be in the Divi-child folder.
- Click +File from the toolbar at the top of the screen.
- Name the file “functions.php.”
- Add the following code:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
Step 4: Install and activate your Divi child theme.
You install a child theme the same way you install any theme. You have two options: you can copy the folder to the site using FTP, or create and upload a zip file of the child theme folder. Let’s outline the steps of the latter.
- Log in to your WordPress dashboard.
- Click on Appearance > Themes.
.webp?width=650&height=275&name=draft%20-%20Divi%20Child%20Theme-1%20(1).webp)
- Click the Add New button.
.webp?width=650&height=275&name=draft%20-%20Divi%20Child%20Theme%20(1).webp)
- Click Upload Theme.
- Then, choose your child theme’s folder.
- Once it’s uploaded, click Activate.
Your child theme is now live — but it looks identical to your parent theme. Time to customize!
Step 5: Edit your child theme’s style.css file.
There are three major ways to customize your child theme. The easiest way is to edit the style.css file in your child theme’s directory
To customize the color scheme, padding, typography, or other fundamental design elements of the parent theme, simply add CSS to your child theme’s stylesheet. This CSS will override the code in your parent theme’s stylesheet.
To start, open the style.css file in your child theme’s directory. Then, add CSS below the header comment.
/*
Theme Name: Divi Child
Theme URI: https://example.com/divi-child/
Description: Twenty Twenty-One Child Theme
Author: Anna Fitzgerald
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
*/
/* Add custom CSS here */
When you’re ready, save your changes. You should see those changes immediately on your live site.
Step 6: Edit your child theme’s functions.php file.
To modify the functionality of your child theme instead of its appearance, you’ll need to edit the functions.php file in your child theme’s folder. It’s important to understand that this file will not completely override the parent theme’s functions — it will simply add to or modify it.
To start, open the functions.php file in your child theme’s directory. Then, add any functions you want below the script for enqueuing your parent and child theme’s stylesheets.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
// Add functions here
Step 7: Add templates to your child theme’s directory.
If you’ve followed the steps above, you will only see a style.css and functions.php file in your child theme’s directory — but you are not limited to editing only these two files. If you’d like to edit other parts of your theme, you can copy and paste the original theme file into your child theme folder and edit it. Just take care to keep the file name and location exactly the same in your child theme’s directory.
For example, say you want to edit the navigation of your child theme. Then you’d locate the navigation.php file in your parent theme’s directory and copy and paste it into your child theme’s directory.
Once you’re done copying, pasting, and making changes to theme files in your child theme’s directory, make sure to save them. You should see those changes immediately on your live site.
Creating Your Divi Child Theme
Installing the Divi theme is a great first step for creating a WordPress website. Thanks to Divi’s layout packs and powerful front-end page builder, you’ll have plenty of options for customizing your site. But for more control over customizing its design and functionality, you’ll want to create a Divi child theme. Follow the steps above to create your own.
