In fact, the title for this post could had been something like “Why you should use a child theme for any WordPress theme” because, as you will see if you keep on reading, it is always a wise decision to use a child theme for any WordPress site.

But since on this blog we are only dealing with the Divi WordPress theme, we will talk about why and how to use a Divi child theme.

But let´s start with the basics:

What is a child theme?

Of course most of my readers know the answer to that question. But for those of you who still don´t, I want you to know that a child theme is nothing to be afraid of.

Quite on the contrary: once you understand this concept, you will find it both very easy and very interesting. On the first post of a tutorial series about child themes on the WPThemeDetector Blog I wrote sometime ago:

“At the beginner level this subject is surrounded by an inexplicable mystery halo. I don´t really know what the reason for this is, but for somebody who doesn´t know the basics of child themes or how to create one, the whole thing usually appears like something to be done by an expert.”

But is is not, and I´ll try to make sure you agree with me once you finish reading this post. We will first look at the definition of a child theme, according to the WordPress Codex:

“A WordPress Child Theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme”

The first thing to take into account is that a child theme can use everything from the parent theme: all the styles, all the functionality, the whole thing. As a matter of fact, in its simplest form a child theme is just a theme that, once activated, tells WordPress to use another theme (known as the parent theme). Such a child theme would have its own name and it technically is a WordPress theme, but it is an empty one except for a line of code that lets WordPress know what is the parent theme from which everything is to be inherited.

In other words: a brand new child theme with no tweaks will behave just like a clone of the parent theme, there´s no difference whatsoever. It´s like having two identical themes, except that the code is not duplicated.

Now, when we begin adding some code to modify whatever we want in the child theme, it will begin behaving different from the parent theme. Still, the only code we will need is just the code that will create those differences.

So that takes care of the second part of the WordPress Codex definition (“allows you to modify, or add to, the functionality of that parent theme“).

But somebody might argue that any level of customization could also be accomplished by directly modifying the parent theme, without the need of a child theme. So why would we want to mess with a child theme?

Why using a Divi child theme is a wise decision

Imagine you installed Divi on your WordPress site and wanted to tweak it a little bit, for example by changing some colors. You go to the theme´s style.css file and edit a few lines to make those changes. The results please you, but then you think that it would also be nice to change some margins and paddings, so you edit the stylesheet again. And then later on you decide to change or add some functionality by editing the functions.php file. So little by little you´re adding a little tweak here and a little tweak there. Then you are finally proud of your customized theme, you love it and therefore you plan to keep it that way.

But a day will come when you´ll need to update Divi. You would be then running into trouble since every time you update your theme to a new version you are actually replacing some of the old files with new ones, which means that you would be overwriting all your custom changes. You´ll be really throwing all your previous work away!

Even if you have a backup copy of the files you tweaked, you´d need to manually redo all the modifications to the new theme´s files again. It wouldn´t be safe to just replace the applicable newly installed files with your backup copies, since then you might be also deleting the changes made by Elegant Themes in the new version.

The solution? Don´t you ever touch the original theme´s files and start by creating a child theme of Divi from the very first moment you want to modify something in your theme instead.

That way, you will be free to update Divi whenever you want, without loosing your previous work. The changes in the stylesheet of your Divi child theme will override the applicable rules of the parent theme, and your custom functions will add to the functions of the parent theme (you can even change them without touching the Divi files), so you will be effectively preserving your work.

Your Divi child theme´s files will always keep untouched after a Divi update, so your modifications to the theme features will never get lost, no matter how heavily you customized your Divi child theme.

The basics about how child themes work

I´ve already given you a hint about the way a child theme works. Of course there is more to it, but you´ll grasp the whole concept just by taking into account a few points:

1. A child theme needs its parent theme to work.
2. If its parent is present, a child theme can be activated just like any other theme.
3. You can create and have installed in your site as many child themes as you like, even if they have the same parent theme (of course, only one at a time can be the active theme of your site).
4. The stylesheet of your Divi child theme will override the stylesheet of the parent theme.
5. The custom functions you include in your child theme will add to the functions of the parent theme.

The last two points are vital to get a good understanding of  how child themes work. As you will see now, point #4 can be a bit tricky. Maybe you have already wondered: “How come you´d want to override the stylesheet of your parent theme if you are going to base everything on it? “

How to create a Divi child theme

The first thing you need to do is to create a new folder inside the themes directory of your WordPress installation (“/wp-content/themes/”). Note that your new folder will be side by side with whatever other themes you may have installed, including Divi which you are going to use as the parent theme. You can use whatever name you want for that folder, but the logical way to go is to use the name you will be giving your Divi child theme.

Now you will only need one single file in that folder to create a Divi child theme, and that is its stylesheet. You may have more files that you can add later on, but a style.css is the only one that is really required.

At the top of that file an information header must be present. The information header consists on some commented lines, some of them being absolutely necessary while others are optional. There are two lines that should be in the information header for your Divi child theme to work. Both are used to tell WordPress decisive things:

• The name of your new theme, preceded by the words “Theme Name:“.
• The theme that your child theme will be using as its parent, in this case Divi, preceded by the words “Template:“.

On the “Theme Name:” line you can write whatever name you decided to give your Divi child theme. As for the “Template:” line, it has to exactly match the directory name of the parent theme, in our case “Divi”. Be aware that it is case sensitive.

Everything below the information header will work as a regular stylesheet file, so there will be where you should put any new styling rules you want WordPress to apply.

And now comes a very important point: A child theme’s stylesheet replaces the stylesheet of the parent completely, which means that WordPress won´t even load the parent’s stylesheet. So if you want to use the parent theme as a base and just make some modifications to its styling or layout, you will need to first import the stylesheet of the parent, and then make your modifications by adding the corresponding rules to your child´s style.css file.

So the simplest Divi child theme would consist on a theme folder with just a style.css file inside it with the following content:

The @import rule you see under the information header is what tells WordPress to import all the styles form Divi. It should go immediately below the information header. If you put other rules above it, it will be invalidated and the stylesheet of the parent theme will not be imported. So always remember that there must be no other CSS rules above the @import rule.

You can include other optional lines in the information header of your Divi child theme styleshhet. It is a good practice to include the URI to the site homepage, the author´s name, the author´s site URL and a brief description for the child theme. It is also good to include a version number, which can be updated every time the theme is modified.

Here is an example of a more complete information header, which belongs to the stylesheet of a Divi child theme with some CSS tweaking already included below the import rule (you can notice how the background of the Divi main header has been modified) :

Apart from CSS modifications, you can also change the way Divi behaves by using a child theme if you add an optional functions.php file to your child theme folder and include there your own custom functions. As I said before, they will be added to the original functions of Divi.

You could even create your own custom page templates and include them in your Divi child theme to further modify the functionality of the Divi parent theme.

Go the easy way with the Divi Children plugin

As you´ve seen above, creating a Divi child theme can be very easy. But there is an even easier way to do it: use the free Divi Children plugin. If you don´t know about this plugin yet, please read my introductory post and, if you feel like using it, feel free to download the latest version from the plugin page.

Divi Children will be soon updated to version 2.0, and it will come with a lot of interesting features like child theme customization via the Theme Customizer, as I explained in my post Divi Children 2.0 sneak peek: Customizing Divi even further, without code.

Conclusion

We have seen how the wise way to customize your Divi site is by using a child theme, and the basics about child themes have also been covered on this post.

And now, with all the easiness provided by the Divi Children plugin, you´ll no longer have any excuse for not using a Divi child theme!

• Author
• Recent Posts

Luis Alejandre

Luis is the creator of Divi4u and the editor of this blog. You can read more about Luis in his About page. Luis also created and runs the free online WordPress tool WPThemeDetector.

Latest posts by Luis Alejandre (see all)

• New Divi Children 3.0.10 update released - April 7, 2022
• New Divi Children 3.0.7 version for WordPress 4.9 - November 15, 2017
• Understanding Divi Children Output Mode - October 11, 2017