How To Create a Divi Child Theme
Have you ever updated your Divi theme only to discover some of the customizations you previously made are now gone? This is one of the reasons why you need your own child theme for your site.
Having a child theme means your custom styling will not get lost during a theme update.
In this post, I share with you what exactly a child theme is and how to create and install a child theme for your Divi website.
What Is A Divi Child Theme?
A child theme is an extension of a parent theme, in this case your Divi child theme is an extension of the standard Divi theme. This means your child theme can have it’s own functions, style, and design totally different from the Divi theme.
WordPress will first check your child theme and then check the parent theme.
For example, if you want to change the design of the header then you would create a header.php file in your child theme with your custom design. WordPress would first check your child theme and use the header.php file from there, if it doesn’t find one then it will use the header.php file from the standard Divi theme.
How To Crete A Divi Child Theme
The Files You Need
Every child theme requires these three files:
- style.css
- functions.php
- screenshot.png (1200px by 900px saved in PNG format)
Let’s take a closer look at each of these.
style.css
The first step is to create a style.css file. This has two purposes. First it tells WordPress information about your theme (name, author, description, version number, etc.). Second it will hold your custom style css for your child theme.
Go ahead and create a style.css file and add the following to it. Change the Author and Description text to your own.
/*------------------------------------------------------- Theme Name: Divi Child Theme Description: A child theme template for Divi Author: Steven Stromick Author URI: https://stevenstromick.com/ Template: Divi Version: 1.0.0 ----------------- ADDITIONAL CSS HERE ------------------*/
functions.php
This file is present in just about every theme and holds and custom php code your theme needs for various theme related functions.
All you need to do is simply create a file called functions.php and include the following code in it.
<?php
/*-------------------------------------------------------
* Divi Child Theme Functions.php
---------------------------------------------------------*/
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.
You can easily use a free tool such as Canva to create one for your theme. Or here is one I created that you are free to use.
Installing Your Child Theme
Now you are ready to install your child theme. You have two options
- Option #1 – Upload a zipped file (this is the easiest)
- Option #2 – Manually create the directory and upload the files individually
Option #1 – Upload a Zipped File
Create a new folder with the name of your child theme and place the three file you created above in that folder.
Make sure the style file has an extension of .css and the functions file has an extension of .php. You can use text editor or a program such as Brackets to create these files.
Now all you need to do is zip up this folder and install the theme, like any other theme, by going to Appearance >> Themes >> and select Add New.
Once the theme has been upload, simply click Activate.
Option #2 – Manually Upload The Theme
For this option, you will need to use an FTP program such as FileZilla.
Navigate to the themes folder and create a new directory with the name of your theme. Within this new directory, upload the three files you created.
Finally log into your Worpress dashboard and go to Appearance >> Themes and activate your child theme.
Customizing Your Divi Child Theme
Initially your theme will look just like the standard Divi theme, but now you can add your own css, functions, design and these changes won’t get lost when you update your Divi theme.