How to Create a Divi Child Theme
There are thousands (that’s right, thousands!) of WordPress themes available for you to choose from when building a site. Most web designers, however, find that while WordPress themes are a nice starting place, they want more customization, and creating a child theme is a great way to do that.
Child themes build off parent themes and allow you to add or remove your own code. If you’re wanting to truly customize your WordPress site, using child themes is the best way to go and Divi is one of the best choices.
The biggest reason creatives create a Divi child theme is so that when the parent theme is updated, nothing breaks on your site. Creating a child theme from Divi essentially acts as a safety net, always there to catch your site before it breaks! But, I’m getting ahead of myself, so let’s start with the basics.
In this article, I’ll cover:
- What is Divi and what are the features?
- How to create a Divi child theme (+ a free child download!)
- How to test if your Divi child theme is working
Let’s dive in.
What is Divi and What Are The Features?
Divi is a WordPress theme from Elegant Themes that allows you to build your pages using different structural elements from the ground up. This means you have full control over everything on the sites you’re building because of its superior visual editor.
It also comes with hundreds of pre-made designs, so if you don’t have experience creating and customizing themes, no worries! Whether you’re a beginner looking to customize your first site or a seasoned developer, Divi gives you the tools to bring your ideas to life.
Divi has two builder interfaces: The visual editor on the front-end of WordPress and the back-end builder. On the visual editor, it makes building sites for clients 10x easier, faster, and more enjoyable because you can edit on the page itself and see your edits live. On the back-end, you’re editing the block-based representation inside the post. However, you can still add new modules and do essentially everything like you would in the visual editor. It’s also easy to bounce back and forth between the editors, depending on your preference.
Divi also has three main structural elements that you can utilize as they are, or customize to your exact specifications: sections, rows, and modules.
Sections: These are the biggest building blocks in the Divi builder. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas. Everything you build starts with a section.
Rows: Rows are the various column layouts that can be placed inside of sections. They have various settings that can be accessed by clicking the settings icon on the top left of the row and can be used to greatly increase the variety of layouts built with the Divi Builder since they create the structure that your modules are housed in.
Modules: Modules contain different content elements such as images, content, sliders, galleries, contact forms, CTAs, blogs, forms, testimonials, etc. There are over 40 modules you can choose from and then customize how you want.
Now that you understand Divi a bit better, let’s dive into how to create a child theme.
How to Create a Divi Child Theme
Before you start customizing things, you’ll want to make sure you have Divi installed and activated. There are two ways to go about this:
Option 1: Use Flywheel + Divi for quick and easy installation.
Option 2: The manual method (follow these two steps)
Step 1: Sign up for and download Divi here. Once you’ve created an account and logged in, you’ll be redirected to the members area and head over to the left hand side and find the “Downloads” tab. Find Divi and click “Download”. This sends a download of Divi in a zip file to your Downloads folder.
Step 2: It’s time to log in to your WordPress site. Go to Appearance > Themes. Click Add new or Add new theme on the right side. Click the “Upload theme” button on the top left. Choose file and find that Divi zip file. Note: Keep it in a zip file (don’t unzip). Click Install. After it’s done installing, click “Activate” and it’s installed and activated on your site! ?
Now, you’re ready to create a Divi child theme! There are three main ways to create a Divi child theme: download a free child theme, use a plugin, or code it manually.
Option 1: Download a Free Divi Child Theme File
One of the quickest (and easiest!) ways to create a child theme is to download this free Divi child theme. It has all of the necessities for you to get started, as well as room for you to customize to your liking! Download your free Divi child theme below.
Once it’s downloaded, install Divi, activate it, and you’re good to go! It’s as easy as that. If you’d prefer a different way to create a Divi child theme, you can always try a plugin.
Option 2: Create a Divi Child Theme by Using a Plugin
There are a number of plugins available to help you create a Divi child theme. Here are a few of my personal favorites:
Divi Children
Divi Children is a free plugin specifically developed for the users of Divi. It automatically does the hard work for you, so you can just focus on the creative side! Every child theme created by Divi Children comes with loads of customizing features via the WP Customizer. Learn how to install this plugin here.
Child Theme Configurator
This plugin was designed for WordPress users who want to be able to customize child theme stylesheets directly. With this plugin, you can easily identify and override the exact CSS attributes you want to customize and the analyzer scans the rendered theme and automatically configures your child theme. Learn more about this plugin and how to install it here.
Child Theme Creator by Orbisius
This plugin allows you to quickly create child themes from any theme that you have currently installed on your site. With this plugin, you can create an unlimited number of child themes from your parent theme so the options are endless. It features two editors and you are able to pick snippets from one theme and paste into another. Talk about customization! Learn more about installing this plugin here.
Finally, if a plugin isn’t for you, there’s always the option to create a Divi child theme manually!
Option 3: Create a Divi Child Theme Manually
If you’re a WordPress developer or just love a good challenge, this is a great way for you to create a Divi child theme.
Step 1: Create the style.CSS file
As you probably know, the style.css file is for telling WordPress the details of your child theme and can be used to add custom CSS! To do this, create a folder on your computer and give it a name (something that lets you know this is for a Divi child theme). From there, create a file in that folder and name it style.css.
Note: Make sure you have a text or code editor tool, otherwise naming that file will be difficult!
Step 2: Add this to the style.css file:
/* Theme Name: Divi Child Theme Theme URI: https://www.elegantthemes.com/gallery/divi/ Description: Child Theme for Divi Author: Your Name Author URI: https://getflywheel.com/ Template: Divi Version: 1.0.0 */
The theme name, theme URI, description, author, author URI, and version are all editable. Keep the template name as is! For more customization (and to make sure your Divi child theme is working), add any custom CSS here.
Step 3: Create the functions.php file
Create another file in the folder you already created and name it functions.php
Then, add this code to your new file and add any custom functions you may want below the last line:
<?php
function divi__child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );
Step 4: Create a screenshot
This is an important step so your site doesn’t have a blank space where the image should be on the WordPress themes page, so snapping a quick screenshot is a key step here! Once you’ve snapped your screenshot, go ahead and make sure the dimensions are 880x660px, that it’s a .png or .jpeg (either work!), and the name is [screenshot.png] or [screenshot.jpeg]. Then, you’ll add your screenshot image to the main folder.
Step 5: Compress the folder and upload
Finally, compress the folder into a zip file type and upload to WordPress! You’ll go to Appearance > Themes > Upload and then click Activate.
Voila! You’ve successfully created a Divi child theme and you’re ready to customize to your heart’s desire.
How to Test if your Divi Child Theme is Working
In order to test if your child theme is working correctly, add some CSS in your child theme style.css file and save your changes. You should see those changes on the live site and that’s how you’ll know it’s working!
Note: You may have to open your page in a private browser in case it is cached.
Remember: You should never make changes to your live site in the off chance that you break something! Use Local, a free local development app so you can stop debugging local environments and spend more time launching beautiful WordPress sites. Learn more about Local here.
Conclusion
Customization is one of the best parts about creating sites using WordPress and while themes are great starting places, it’s nice to have child themes, like Divi at your disposal.
Free Divi child theme Download
One of the quickest (and easiest!) ways to create a child theme is to download this free Divi child theme. It has all of the necessities for you to get started, as well as room for you to customize to your liking! Download your free Divi child theme below.
