If you build client websites with Divi, you will eventually want to add custom CSS, PHP functions, JavaScript, or template changes. Editing the main Divi theme directly may seem convenient, but it creates a serious maintenance problem: your customizations can be overwritten the next time Divi updates.
A Divi child theme gives you a safer development layer. It inherits Divi’s design and functionality while keeping your custom code separate from the parent theme. In this guide, you will learn how to build a custom Divi child theme from scratch, install it, test it, and use it for future customization.
What Is a Divi Child Theme?
A child theme is a separate WordPress theme that relies on another theme, known as the parent theme. In this case, Divi is the parent theme and your custom theme is the child theme.
The child theme inherits Divi’s templates, styles, features, and functionality. You can then add your own code without modifying the original Divi files.
This structure is important because Divi updates replace files within the parent theme. Any changes made directly to those files can disappear during an update. A child theme protects your custom work while allowing you to continue receiving Divi improvements, bug fixes, and security updates.
According to the official Elegant Themes guide to creating a Divi child theme, a child theme is especially useful when you plan to:
- Add custom PHP functions or hooks
- Modify template files
- Add a large amount of CSS or JavaScript
- Organize custom code for a team or client project
- Maintain consistent customizations across multiple websites
If you only need a small amount of CSS, a child theme may not be necessary. Divi’s built-in Custom CSS fields and WordPress’s Additional CSS panel can preserve those changes during theme updates. However, a child theme is the better long-term solution for advanced or ongoing development.
What You Need Before Starting
Before creating the files, confirm that you have:
- Divi installed on your WordPress website
- Access to the WordPress dashboard
- A code editor such as Visual Studio Code
- Access to your website files through hosting tools, FTP, or a local development environment
- A recent website backup
- A staging site for testing, if available
You do not need to edit the live website directly. In fact, creating and testing the child theme locally or on staging is the safer workflow.
Step 1: Create the Child Theme Folder
Create a new folder on your computer and name it:
divi-child
You can use a different folder name, but lowercase letters and hyphens make the folder easier to manage. The folder will eventually be uploaded to:
wp-content/themes/divi-child
Your new child theme will begin with two files:
divi-child/
├── style.css
└── functions.php
The folder name is important because WordPress uses it to identify the theme. More importantly, the parent theme’s folder name must be entered correctly in the child theme header.
For a standard Divi installation, the parent theme folder is usually:
Divi
The capitalization matters.
Step 2: Create the style.css File
Inside the divi-child folder, create a file named exactly:
style.css
Add this theme header at the top:
/*
Theme Name: Divi Child Theme
Theme URI: https://yourwebsite.com
Description: A custom child theme for Divi
Author: Your Name
Author URI: https://yourwebsite.com
Version: 1.0.0
Template: Divi
*/
/* Custom CSS starts here */
The most important line is:
Template: Divi
The Template value must match the parent theme folder name exactly. If your Divi folder is named Divi, use Template: Divi. If the value is incorrect, WordPress may report that the theme is broken or that the template is missing.
The other header fields identify your child theme in the WordPress dashboard. Replace the example website and author information with your own details.
You can add custom CSS below the header:
/* Example custom button styling */
.et_pb_button {
border-radius: 8px;
letter-spacing: 0.02em;
}
Avoid placing CSS before the theme header. WordPress needs to read the header comment to recognize the folder as a child theme.
Step 3: Create the functions.php File
Create a second file in the same folder:
functions.php
Add the following code:
<?php
function dt_enqueue_styles() {
$parenthandle = 'divi-style';
$theme = wp_get_theme();
wp_enqueue_style(
$parenthandle,
get_template_directory_uri() . '/style.css',
array(),
$theme->parent()->get( 'Version' )
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array( $parenthandle ),
$theme->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'dt_enqueue_styles' );
This code loads Divi’s parent stylesheet first and your child theme stylesheet afterward. The order matters because your child theme CSS should be able to extend or override Divi’s default styles.
The code also uses each theme’s version number for cache busting. When you update the child theme version, browsers are more likely to retrieve the latest stylesheet instead of displaying an older cached copy.
Do not add a closing PHP tag at the end of the file. Leaving it out helps prevent accidental whitespace from being sent before WordPress generates the page.
Your child theme now has the minimum required structure:
divi-child/
├── style.css
└── functions.php
Step 4: Zip the Child Theme
To install the child theme through WordPress, compress the entire divi-child folder into a ZIP file.
The result should look like:
divi-child.zip
When WordPress opens the ZIP file, it should find style.css and functions.php inside the divi-child folder. Make sure you do not accidentally create an extra nested folder, such as:
divi-child/divi-child/style.css
That structure can prevent WordPress from recognizing the theme correctly.
Step 5: Install and Activate the Theme
In your WordPress dashboard, go to:
Appearance → Themes → Add New → Upload Theme
Choose divi-child.zip, select Install Now, and then click Activate.
Divi must already be installed on the website because the child theme depends on it. Activating the child theme does not remove your Divi Theme Options, Customizer settings, layouts, or page content. It simply changes the active theme layer that WordPress uses.
If you prefer to upload files directly, place the complete divi-child folder in:
wp-content/themes/
Then open Appearance → Themes and activate it from there.
Step 6: Test That the Child Theme Works
After activation, test the child theme before adding significant custom code.
First, add a simple CSS rule to style.css:
body {
outline: 4px solid #5b2cff;
}
Save the file and open your website in a private browser window. If you see the outline, the child stylesheet is loading correctly. Remove the test rule after confirming that it works.
If you do not see the change:
- Clear your browser cache.
- Clear Divi’s static CSS cache.
- Clear any caching or optimization plugin cache.
- Check that the file is named
style.css, notstyles.css. - Confirm that
Template: Divimatches the parent folder. - Inspect the page source or browser developer tools to verify that the child stylesheet is being loaded.
You can also review Divi Daily’s guide to common Divi Theme Builder mistakes if the issue appears to involve layouts, templates, or global settings rather than the child theme itself.
How to Add Custom Code Safely
Add CSS to style.css
Place reusable site-wide CSS in the child theme’s style.css file. Organize larger stylesheets with comments and consistent sections:
/* Layout */
...
/* Buttons */
...
/* Forms */
...
/* Responsive adjustments */
...
For small, page-specific changes, Divi’s module settings may still be more practical. A child theme is most useful when your CSS is extensive, reusable, or managed as part of a larger development workflow.
Add PHP to functions.php
Add custom functions below the enqueue code in functions.php. For example:
function my_custom_body_class( $classes ) {
$classes[] = 'custom-divi-site';
return $classes;
}
add_filter( 'body_class', 'my_custom_body_class' );
Use unique function names to reduce the chance of conflicts with Divi or plugins. Never copy Divi’s entire functions.php file into the child theme. The child and parent functions files are both loaded, so duplicated function declarations can cause fatal errors.
For larger projects, place related functionality in separate files and load them from the child theme. WordPress recommends using functions such as get_theme_file_path() when referencing files inside your child theme.
Override Template Files Carefully
You can override a Divi template by copying the original file from the parent theme into the child theme while preserving its exact filename and relative folder path.
For example:
Divi/includes/navigation.php
would become:
divi-child/includes/navigation.php
WordPress will use the child version instead of the parent version. This gives you control over the template, but it also creates an ongoing maintenance responsibility.
A future Divi update may change the original template. Your copied version will not automatically receive those changes, which can cause compatibility problems.
Child Theme Maintenance and Updates
A child theme protects your custom files, but it does not make custom code permanently immune to compatibility issues.
Before updating Divi:
- Back up your website.
- Test the update on staging.
- Review any template files copied into the child theme.
- Check custom PHP for deprecated functions or conflicts.
- Test the header, footer, navigation, forms, and responsive layouts.
- Clear Divi and website caches after the update.
CSS and additional functions generally continue working because they are added to the parent theme. Template overrides require closer attention because they replace the parent files rather than simply adding to them.
It is also useful to keep your child theme under version control or at least maintain dated backups. This makes it easier to identify when a customization was introduced and roll back a change if necessary.
For broader performance considerations, see Divi Daily’s Divi speed optimization framework. A child theme does not automatically make a website faster, but organized assets and carefully loaded code can support a more efficient workflow.
Should Every Divi Website Use a Child Theme?
Not necessarily.
You may not need one if you are only adding a few lines of CSS through Divi’s Custom CSS settings or making visual changes through the Visual Builder. Those settings are designed to remain in place during Divi updates.
A child theme is recommended when you are:
- Building websites for clients
- Adding custom PHP or JavaScript
- Modifying templates
- Managing hundreds of lines of CSS
- Reusing code across projects
- Working with other developers or designers
- Maintaining a long-term custom Divi system
Final Thoughts
Building a Divi child theme from scratch requires only a folder, a properly configured style.css, and a functions.php file that loads the parent and child stylesheets in the correct order.
The real value is long-term stability. By keeping your customizations separate from Divi’s core files, you can update the parent theme without automatically losing your work. You also gain a more organized foundation for custom CSS, PHP functions, template overrides, and future development.
For most professional Divi projects, creating a child theme before adding advanced custom code is a practical and worthwhile step. It reduces maintenance risk, streamlines collaboration, and gives you a safer way to extend Divi as your website evolves.