How To Create a Child Theme for Your Divi Website

by | Mar 5, 2018 | Tutorials, Community, Resources, Tips & Tricks | 1 comment

Have you ever customized your Divi site and then lost those customizations when Divi updated? Or have you ever modified your design and then wished you could keep both designs? Maybe you’re a seasoned Divi developer and you’re ready to create professional Divi child themes to sell. Well, the solution to all of those problems is achieved by using a child theme with Divi. In this article we will learn how to create a Divi child theme for your Divi website from scratch.

What Is a Divi Child Theme and Why Do You Need One?

A Divi child theme is an extension of the parent Divi theme and can have its own functions, styles, and design that is completely independent of the Divi theme. WordPress executes the child theme files first, so if you’ve customized your header, footer, sidebar, etc., those files execute instead of the parent theme. A Divi child theme requires the parent Divi theme in order to operate correctly.

Files You Need to Create a Divi Child Theme

Every child theme requires three files to properly work, and so will yours:

  • style.css
  • functions.php
  • screenshot.png (1200px by 900px saved in PNG format)

In the next section we’ll create each of these files and take a look at their purposes. I highly recommend you follow along with this tutorial step-by-step so you can gain an understanding of what’s in a Divi child theme and how to make one.

Note: If you already know how to create a Divi child theme or if you just want to save some time, we have provided a download option at the bottom. Alternatively, you could try out this free and convenient Divi Child Theme Generator by Divi Cake.

style.css

The first step in creating a Divi child theme is to create the “style.css” file. This file serves two main purposes: it holds the information about your child theme such as name, author, description, version number, and more. The second purpose is to hold the CSS styles used to customize the look and feel of your website. We’ll talk about customizing your child theme later on in this tutorial.

When you create your “style.css” file, copy and paste this code:

/*-------------------------------------------------------
Theme Name: Divi Cake Child Theme
Theme URI: https://divicake.com/
Description: A child theme template for Divi
Author: Divi Cake
Author URI: https://divicake.com/
Template: Divi
Version: 1.0.0
----------------- ADDITIONAL CSS HERE ------------------*/

You’ll want to change all of the information to match your own. The theme name will display in your theme directory. Make sure you include everything above, and make sure to use Divi or Extra for the ‘Template:’ value. If any of this information is incorrect your child theme will not work.

functions.php

The “functions.php” file is simply a template used by almost every WordPress theme. It behaves similar to a plugin, and automatically gets executed in both the admin dashboard and front-end pages of your WordPress site. Typically this file is home to custom PHP code to be used for various additional functionality within the child theme.

When you create your “functions.php” file, copy and paste the following code using your favorite text editor.

<?php
/*-------------------------------------------------------
 * Divi Cake Child Theme Functions.php
------------------ ADD YOUR PHP HERE ------------------*/

function divichild_enqueue_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divichild_enqueue_scripts' );


screenshot.png

The “screenshot.png” is the image that will display in your themes directory. WordPress recommends a PNG file sized at 1200 by 900 pixels. The design is up to you. Elegant Themes uses a solid background with the Divi theme’s logo, while the standard WordPress themes use a screenshot of the layout.

Multiple WordPress themes including Divi and Extra

Divi child theme example screenshot

child theme screenshot.png example

As you can see, I’m using a variation of the Divi Cake logo.

Creating and Installing the Child Theme Files

There are three ways to create the files for your child theme:

Method 1: Manually creating the directory

For the manual upload I’m using FileZilla. Other FTP applications may work differently.

Creating Divi child theme directory

Navigate to your themes folder on your server and create new directory. Give it a name that makes sense to you.

Creating Divi child theme with FTP

Right click on the directory to create new file. Name it functions.php and then create one named style.css.

Uploading Divi child theme with FTP

The files are automatically created with the proper extensions.

Now open the files and paste the code we discussed in the previous section. Drag and drop the screenshot file into the directory.

WordPress themes including Divi and Extra

In your WordPress dashboard go to Appearance -> Themes, and your new child theme will be available.

Congratulations, you created a Divi child theme using method 1!

Method 2: Uploading the zipped file

Divi child theme folder and files

Create a folder on your computer where you’ll place your files. Within the folder create a text file named functions.php and a text file named style.css. Open the functions file with a text or code editor and paste in the functions code.

Open the CSS file (using an editor such as Brackets or Notepad++) and paste in the code. The CSS file must be saved with the CSS extension in order to work. If you’re using Brackets or a similar app you can save it as a web file and the file will convert to .CSS.

When you’re done creating your files, zip up this folder and install it like a regular theme.

Divi child theme zip and theme upload screen

In the dashboard go to Appearance -> Themes, and select Add New. Select the zipped folder and click Install Now. Activate it once it uploads.

Divi child theme and WordPress themes

There you have it, your new Divi child theme is now active. You may now customize it without the fear of losing your customizations due to updates.

Method 3: Uploading a zipped file built using the Divi and Extra child theme generator

This option is a new tool that is completely free, built by us! It’s very simple. Just enter your child theme information, upload a screenshot, and click the “Build Your Child Theme!” button. We’ll do all the hard work and send you a generated Divi or Extra child theme straight to your email inbox. From there, follow the ZIP Upload details in Method 2.

Click here to use the Divi & Extra Child Theme Generator.

Customizing Your Divi Child Theme

Once you install your Divi child theme your site will look the same as before. Until you add your own CSS styles and PHP code to functions.php, all of the styles and functions come from your parent theme. You can now make your customizations with your child theme’s PHP and CSS files, and when you perform an update to Divi the child theme files will remain intact.

Final Thoughts

Creating a child theme for Divi and Extra is easy to do and has many benefits. Child themes keep you from losing your customizations when updating your parent theme. You can change to a new child theme without losing the design of your current child theme. You can also switch between them, changing the look of your website while continuing to run on Divi.

Going through the process of creating them by hand will help you understand what goes into a child theme. Using child themes for your customizations is a best practice that every Divi developer should adopt.

Now that you’ve learned the “hard” way to a build Divi child theme, be sure to check out the new EASY way to create a Divi child theme by using our brand new Divi and Extra child theme generator!

What’s your favorite method for creating a Divi child theme? Let us know in the comments.

1 Comment

  1. PG Softwares

    Good information about the child theme creation for divi theme. Really useful.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Featured Divi Products

 

Recommended Hosting

Pin It on Pinterest

Shares