Divi TutorialsDivi Child Themes - The only guide you need

Divi Child Themes – The only guide you need

There are many guides online regarding wordpress child themes. If you look hard enough, you will find quite a number specifically for Divi. So why are we writing another guide to Divi child themes if there are so many – I hear you asking. Well, to be honest we probably did not NEED to but […]
Published Monday, 30 Mar 2020

There are many guides online regarding wordpress child themes. If you look hard enough, you will find quite a number specifically for Divi. So why are we writing another guide to Divi child themes if there are so many – I hear you asking. Well, to be honest we probably did not NEED to but we wanted to have a place where one could learn everything they needed to know regarding divi child themes without having to go through a number of websites to find it. We found that while many wrote about how to create a child theme, they likely did not include how to use it or when not to use it.

As there is a lot to cover, so let’s get right to it.

What is a WordPress Theme?

Before we start – just in case you are new to WordPress, I should probably quickly run over what a WordPress theme is. WordPress is a content management system which is a fancy way of saying that it is a powerful system that lets you build websites and present your content to the world wide web without having to type any of the dreaded code. While all the heavy lifting is done by the database and the in built functions hidden within the code, what you see in your internet browser is all determined by the wordpress theme. This includes the structure and the colours and dependent on the theme, some custom functionality.

Divi is such a theme.

There are two main types of themes when working with wordpress and they are Parent Themes and Child Themes.

What is a parent theme?

A parent theme is a complete theme which includes all of the required WordPress template files (index.php and style.css) and assets for the theme to work. All themes – excluding child themes – are considered parent themes. In this case here Divi will be the parent theme.

What is a Child Theme?

According the WordPress Codex, “A child theme is a theme that inherits the look and feel of the parent theme and all of it’s functions, but can be used to make modifications to any part of the theme.”

To simplify that, a child theme provides a way for you to customize your website with the confidence of know that any changes you make will not be lost if there is an update to the parent theme. Child themes inherit the look and feel as well as functionality of the parent theme.

How does a Divi Child Theme work?

A child theme uses a bunch of files to produce the look, feel and functionality of the website. Inside these files are a series of various .php functions that hook into the functionality of the parent WordPress theme. As we established earlier, this allows the child theme to inherit the look and feel of the parent theme and all it functions.

WordPress runs in a methodical process. When a user clicks on your site (let’s say your homepage), WordPress will first look for files present in your child theme to apply the code, if there are no files it will default to the parent theme.

If you have files like header.php, footer.php or single.php within a child theme, WordPress will load them before loading the parent theme. Any changes you have made within these files will be reflected on your website.

As powerful as it can be, one thing to remember is that a child theme is just that – a CHILD theme. It will not exist if there is no parent theme.

When to use a Child Theme

Before we look at when to use a Divi Child Theme, let’s take a look when NOT to use a Divi Child Theme.

There are two cases where you would not want to use a Divi Child Theme;

You will only be using the divi visual builder to build your website

There is no need for you to use a child theme if you are only going to use the divi builder to build out your divi website. This includes using the Divi templates that come from the library.

You are the webmaster of your website and your changes are minimal.

There is no need for you to use a divi child theme if you are building out your own website and are not planning on editing any of the main core files such as; header.php, footer.php, single.php, page.php or style.css. Divi allows for minor customizations within their settings area. You can add css (Divi Theme Options – Custom CSS) and javascript (Divi Theme Options – Intergration).

Now let us move on to cases where you would want to use a Divi Child Theme. In my view, there are three reasons you would want to use a Divi Child Theme;

Making changes to the core files

If you are planning on making changes to the core template files such as header.php, footer.php, single.php, page.php, 404.php and etc it is better to use a Divi Child Theme.

Let’s be honest, we have all googled a certain type of functionality we wanted to add to the website. After scolling through 300 pages, you find a snippet of code that says can do it. You are tried and frustrated so decide to just copy and paste it in without fully understanding the code. Hit refresh and are faced with the white screen of death!

Divi’s core theme files are made up of millions of lines of code and even having a comma out of place can cause all kinds of vulnerabilities. Separating the parent’s core files by creating a Divi Child Theme allows you the wiggle room to play around with code without having to worry about affecting the parent theme.

Theme Updates

You have built the digital version of the sistine chapel and decide to go to bed. When you wake up, you call your friends, your mom and the family dog to come and look at your masterpiece. As the page loads, you gasp in disbelief. While all your content is there on the screen, it is being displayed with the default Divi page styling. All your hard work is gone! What happened?

As it turns out, while you were sleeping Divi released a new update and those files replaced all the files that you were working on. (Side note – this is a dramatization. In real word scenario you would have clicked update on the Divi theme in Appearance – Themes ..but you get the idea). A Divi Child Theme separates your customization from the parent theme so even though the Divi Theme is updated, your files are 100% safe and will not be overwritten.

Hiding code from clients

If you happen to be a freelancer or agency that develops websites for clients you may want to use a Divi Child Theme if you are adding any css or javascript to the website.

We have all had that ONE client that pokes around where they should not be. You know the one that has a smart 9 year old nephew that took a css class online and can “fix” the design. I see you nodding your head.

A Divi Child Theme allows us to hide any custom css or javascript code within the files so that even if the user were to go and take a look at the Divi Theme Options, your custom code will be safe …or at least safer.

Different Types of Child Themes

Now that we can see the benefit of using a Divi Child Theme, let’s have a look at the two different type of Divi Child Themes you can use;

Blank Divi Child Theme

A blank child theme is made up of at least two files; style.css and functions.php. These files are placed in their own folder in the themes folder of the wordpress installation.

The reason that it is called a blank theme is because there are no styles being applied in the style.css file and only minimal functions (en queuing the parent theme) in the functions.php file which allows you to add all your own customization.

Premium Divi Child Theme

A premium divi child theme has the same core functionality of a blank theme but comes with the web design and development already done for you.

These are a good choice if you are looking to get your site online as quick as possible as they usually only require the content to be updated as the design is already taken care of.

Is a Divi Layout the same as a Divi Premium Child Theme?

We get asked often if a Divi Layout is the same as a Premium Divi Child Theme as it also comes with the design already done. The difference between a Divi Layout and Divi Premium Child Theme is the amount and type of customization.

A Divi Layout has a good amount of design that has been created using the Div builder. There are no files added to the installation so you are still using the parent theme of Divi.

A Premium Child Theme would include at the very least it’s own style.css and functions.php files. These would include a good amount of code added to those files to customize the website far more than any layout can.

How to create a Divi Child Theme

So you are starting to get a little excited to start using a divi child theme on your website. There are a few ways you can create your own child theme. We even offer a Divi theme setup service where we will install the Divi theme for you and set you up with a child theme but for now, let’s take a look at some of the more popular ways.

Use the Dividuck blank child theme

If you are just starting out and easy way is to use our Dividuck child theme. The dividuck child theme comes with all the required files such as style.css and functions.php which will enqueue and hook into your parent Divi theme after activation.

You can download the theme from here

Use a plugin

Another easy way to make a child theme is by using a plugin. You can give Child Theme Generator a go to create your child theme from within your wordpress dashboard. You can install it as you would any other plugin and then it will be loaded into the menu items on the left sidebar.

Divi Child Themes - The only guide you need - Child Theme Generator

Once installed, go to Settings > Child-Theme Gen and select Divi as your Parent theme. You can fill the rest of the fields out as you want and click “Create new child theme” (the blue button) and this will create the child theme for you.

Use a premium theme

If you are new to wordpress development and have a deadline to meet, using a premium theme is a good choice for you. Just like with child themes, they come with the required files such as style.css and functions.php but also come with all the web design and development down for you out of the box. All you need to add is your content which includes your words and images. Although many premium themes will come with the appropriate images out of the box which makes it even easier.

Create a child theme manually

The last option you have is to roll up the sleeves and create one yourself. If you have the time and are looking to do any form of development in the future, this is a great option. It allows you to gain an understanding of what the files are and how they link into each other.

If you want to give it a try, let us break it down for you step by step.

Create a Divi Child Theme

So you have decided to create your own divi child theme. Awesome! Grab a coffee, cup of tea or whatever beverage of your choice and let’s get cracking.

What you will need

Creating a divi child theme is basically creating a few files that will link into the main parent theme. To create the files you will need a code editor. If you are using windows, you could use notepad but there are more advanced code editors out there that you can use and will make things easier. While there are many code editors online, we are only going to recommend the more popular ones that you can use for free.

Brackets
VSCode (Our preferred choice)
Atom
Notepad++

You can download and install any of the code editors listed above. Once you are done, come back here and we will walk you through the rest of the process.

Create the required files

To start, create a folder that you will build your divi child theme in. You can name this anything you want.

Style.css

Inside the folder, using your code editor, create a new file called style.css. Edit the file to include the following code;

/*
 Theme Name: DiviDuck Example Theme
 Theme URI: http://www.dividuck.com/dividuckexample
 Description: Child theme for Divi Example and designed to show how it works
 Author: Dividuck
 Author URI: http://www.dividuck.com
 Template: Divi
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Add your custom styles below */

Let us go over the code in a bit more detail so that you can understand what is going on.

Theme Name | This is the name of your theme. Try to make sure it is unique to your business.

Theme URI | The website where users can find the code or documentation for the theme.

Description | Here you would describe what the theme is about. If you are creating this for clients, try to be quite detailed as to what the theme can do.

Author | This would most likely be your name. Either your individual or agency.

Author URI | Your website as an author.

Template | This is the folder where the parent theme is stored. Make sure you use the folder name and not the theme name. Without this your child theme will not work.

Version | This is the version of your website and is entirely up to you. Some people will start at 0.0.1 and then when they go live will change it to 1.0.0 but it is up to you.

License | This displays the license that applies to your theme. It is advisable to leave it as the GNU General Public License.

License URI | The link to the where people can read more about the license for your theme.

The most important line in the child theme is the Template line. Without this, the theme will not be able to work as a child theme. Parent themes will not include this line.

Save the file.

Functions.php

Right. With the style.css file all done, it is time to create the functions.php file. This file will include the function to load the styles of the parent theme. Let’s get started.

In your code editor create a new file called functions.php and then we are going to add the following code.

< ?php
function dd_enqueue_assets() { 

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); 
wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));

}
add_action( 'wp_enqueue_scripts', 'dd_enqueue_assets' );
? >

This code uses the native wordpress function wp_enqueue_style to enqueue the stylesheet from the parent theme. The get_template_directory_uri() function locates where the file is stored. This function is running inside another function that I have created called dd_enqueue_assets which is using the wp_enqueue_scripts hook to run.

If you want to change anything, feel free else you can leave it as is and save the file.

Upload the files to your server

Depending on the web host you are using, you may have a few different ways to upload the child theme to your website. First make a zip file of your folder by right clicking and compressing it. Name it the same as your folder name.

Upload through wordpress

This would be the easiest and best option as long as there are no restrictions which there should not be.

In your WordPress Dashboard go to Appearance > Themes > Add New

Select the zip file you just created and click upload.

Once it has completed the upload, make sure to activate your new child theme. If all went well, it should say active under the thumbnail and you should get no errors.

Upload through File Manager

If you host provides cpanel or any other file manager, you can use that otherwise you would most likely need to get yourself an FTP client such as;

Filezilla
Cyberduck

Once you have your file manager setup, you will need to navigate to the folder wordpress root folder/wp-content/themes/ and upload the folder you created to here. Once that is setup go back to your wordpress dashboard and head to Appearance > Themes and you should see your new child theme listed there. Hover over it and you should be able to activate the theme by clicking on the button Activate. If it says Active under your child theme thumbnail with no errors, it is working and you have officially created a divi child theme. Congrats!

Best web hosting for Divi websites