Ultimate Guide To Creating A Divi Child Theme

Creating a Divi Child Theme is a great way to add advanced customization to your theme without having to worry about erasing those changes every time you update the Divi theme. In fact, a Divi Child theme has many benefits. It allows you to better organize all your custom CSS / code in one place, which facilitates collaboration with others. This will also protect your code against customers who have access to custom code in the customizer and theme settings.

In this post, I'm going to show you how to create a Divi child theme. My hope is that this process will be useful for those who are just starting out with Divi and also for developers looking to publish Divi themes for their clients.

Let's start.

Why do you need a child theme divi

Ultimate Guide To Creating A Divi Child Theme

Divi is a WordPress theme. Whenever you need to make changes to a WordPress theme, it is recommended to create a child theme that inherits the design and functionality of that parent theme. An important reason for creating a child theme is to preserve the changes you make when updating the parent theme. Whenever you update Divi, all theme files are updated, so if you have made changes to these files, these changes will be erased. So, instead of directly editing Divi theme files, you can create additional theme files in a child theme so that when Divi is updated, these child theme files remain unchanged. Therefore, if you plan to make advanced edits to your theme, such as editing page templates and / or adding large amounts of CSS / JavaScript, and / or adding new features, it is best to do the following. make these changes to the child theme without having to touch the parent theme files.

Is it possible to use Divi without a child theme?

Ultimate Guide To Creating A Divi Child Theme

It is possible to use Divi without creating a Child Divi Theme, as long as you understand why.

Divi allows you to add custom CSS code and code in places such as Divi Builder, Theme Customizer and Theme Settings. If the fact Divi even improved the edition of code for this purpose. And this code is kept when updating the Divi theme. So, there is an argument to make that a child theme is useless if a user will only make minor changes. In addition, Divi automatically minimizes and caches a static CSS file so that there is no problem with the loading speed of the page.

To simplify your life, let me describe the circumstances in which you should probably use a divi child theme.

You should probably use a Divi child theme if …

You plan to make code changes to some theme files (this includes things like page templates and functions.php)
You plan to add hundreds of lines of code (CSS, JavaScript, etc.). Even if it is possible to add this to places like the settings of your theme, it becomes more difficult to manage with a lot of CSS.
You want to collaborate with others and accelerate development time by keeping everything in an organized space.
You do not want customers to tinker with the Customizer / Theme Settings and break your code. Putting it in a child theme will certainly protect it from others.

You SHOULD NOT use a Divi Child Theme if …

You plan to make minor changes to the theme. Adding a small amount of CSS (like less than 100 lines for example) or a few scripts in the Theme / Customizer Settings will not justify the need to create a child theme if that's all you plan to do.
You do not plan to collaborate with a team. Suppose you hire a developer to work on your site, that person may not be familiar with Divi and will probably resort to creating a child theme to make changes anyway.
You do not mind customers seeing your code changes in the theme / customizer settings.

What You'll Need to Create a Divi Child Theme

To create your Divi child theme, you will need the following:

Divi theme installed and enabled
text editor for editing theme files. You can use the text editor provided with Windows or Mac but if you plan to take the habit of editing these files, I suggest you have a more powerful text editor like Atom , Sublime, Notepad ++, etc.
FTP Client – This is not necessary if you plan to download your child theme in WordPress as a zip file. But if you are trying to access the theme files for a live site, you will need an FTP client like FileZilla in order to access, edit, add or delete theme files. If you are working on a local installation, you should be able to access the theme files directly on your hard drive.
Cup of coffee or tea (optional)

Building blocks of a child theme

Ultimate Guide To Creating A Divi Child Theme

At the most elementary level, a child theme must have three elements:

A child theme directory (or folder). Like all themes, your child theme folder will exist in your WordPress Themes folder that contains your child theme files.
A style.css file (which will be used to store your CSS theme)
A file functions.php – At the base level, this file will contain the action wp_enqueue_scripts that will queue the style sheet of the parent theme (more information about this later)

Create your child theme directory (folder)

Ultimate Guide To Creating A Divi Child Theme

There are two ways to add your child theme files to WordPress. You can directly add the child theme folder to WordPress theme files (via FTP or locally). Or you can create a folder outside WordPress to be later compressed and downloaded into WordPress as a new theme.

To create a new folder for your child theme directly in WordPress, you will need to access your theme files located in the WordPress Themes folder (wp-content / themes /). Then create a new folder in the Themes folder and give it the name "divi-child". The directory of the new child theme will be wp-content / themes / divi-child.

Ultimate Guide To Creating A Divi Child Theme

But if you create a child theme folder to compress and upload in WordPress later, you can simply create a new folder on your computer and give it the name "divi-child".

Create your Child Style.css Theme File to Add Custom CSS

Ultimate Guide To Creating A Divi Child Theme

In your new theme folder, use a text editor to create a file called style.css (the name must be exactly this one or WordPress will not recognize it) and fill in the information as shown below.

/ *
Theme name: Divi Child
URI theme: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme
Author: Elegant Themes
Author URI: https://www.elegantthemes.com
Model: Divi
Version: 1.0.0
* /

/ * = Customizing the theme starts here
————————————————– —– * /

If you do not plan to publish your child theme, you only need the name of the theme and a template. So, if you have trouble knowing how to fill in all this information, do not worry about it.

Ultimate Guide To Creating A Divi Child Theme

You must ensure that the "Template:" parameter correctly identifies the directory name of your parent theme that is "Divi". The theme Name, URI, Description and Author are totally up to you. You can customize this header information to meet the needs of your customers. For example, you might want to add your client's company name to your theme name because that's the name that appears when visiting your theme in the WordPress Dashboard.

Create your Functions.php to queue your parent theme style sheet

Ultimate Guide To Creating A Divi Child Theme

Now that we have our style.css file for our child theme, we need to make sure that we do not completely leave out the style already in place in Divi (the parent theme). This means that we will first make sure to use the Divi's Parent style sheet, and then introduce our new stylesheet afterwards. This order is important because if you are familiar with CSS, the code you enter below will always have priority over the code at the top. So, in our case, we want the parent style sheet code to load first and then the code of our child stylesheet last.

To do this, we need to queue the parent theme (Divi) style sheet. Enqueue is a whimsical word that literally means "add to a queue". In this case, we add the parent style sheet to be queued before the child theme style sheet. In other words, everything we add to our child theme style sheet will add and surpass the parent theme.

Since the first launch of Divi, it has been designed to respect the original method recommended by WordPress to create a child theme. This original method of creating child themes involved making a CSS @import of the parent theme's style sheet from the child theme's style.css file. Many themes are always configured this way, leaving the child theme with the simple task of defining its own styles.css and @import -ing style.css of Divi and Divi will automatically load that file. It works by Divi using the get_stylesheet_directory_uri () function when it queues the main style sheet. What does it mean is Divi is configured to call either his own style sheet or the child theme sheet (the one that is active). Basically, with the get_stylesheet_directory_uri (), if you have enabled a child theme, WordPress will return the uri to the child theme directory rather than the parent theme directory.

Now that WordPress has updated its recommended approach, you can easily configure the styles for your Divi child theme. All you have to do is explicitly cache the main Divi style.css file, since Divi is already set up to queue the child theme style.css file.

To do this, we will need to use our text editor to create another file in the child theme folder. Save the file with the name functions.php (the name must be exactly this one), then add the following code to the file:

<? php
function my_theme_enqueue_styles () {
wp_enqueue_style ('parent-style', get_template_directory_uri (). & # 39; /style.css&#39;);
}
add_action (& # 39; wp_enqueue_scripts & # 39;; & # 39; my_theme_enqueue_styles & # 39;);

Then save the file.

This code is specific to Divi and is a modified version of the method proposed by WordPress Codex .

Tip: You do not need the PHP closing tag. PHP documents like this one should always start with an open php tag (the code will not work without it). However, it is best not to include the php closing tag. This will ensure that none of your php code is cut off by a misplaced closing tag or will create unwanted funky spaces that might break your code by trying to include it.

By the way, you do not need to understand the inner workings of this php code for it to work (obviously). So, if you are completely confused, do not worry. You can simply copy and paste the code above into the functions.php file of your child theme and do it.

Create a thumbnail for your Divi child theme (optional)

Ultimate Guide To Creating A Divi Child Theme

WordPress allows you to provide a thumbnail for use as a screen capture or branding for your theme when viewing it in the WordPress dashboard.

To create a thumbnail for your child theme, first create an image (WP recommends a size of 1200px wide on 900px) and save it with the file name screenshot.png (the file name should to be exactly as WP recognizes it). Then add it to the child theme folder next to the two files already present.

Here is a miniature Divi Child that I created:

Ultimate Guide To Creating A Divi Child Theme

Here are the three files that your child theme folder should have:

Ultimate Guide To Creating A Divi Child Theme

Download and activate your child theme

After creating your child theme folder, your style.css file and your functions.php file, your child theme is ready for download and activation.

At this point, make sure your Divi theme has been downloaded so that your child theme works after activation.

If you added the child theme folder and files directly to the WordPress Themes directory, it is not necessary to download the theme in WordPress. It's already there. All you need to do is go to the WordPress dashboard and navigate to Appearance> Theme hover over your child theme, then click the Enable button.

If you have just created the child theme folder and files on your computer, you will need to first compress it (ZIP) so that it is in the correct format for uploading to WordPress. Mac and Windows both have a native ZIP feature. Once zipped, downloading and activating a child theme is not different from a normal theme, just download it via page Appearances> Themes in your table WordPress and activate it.

Ultimate Guide To Creating A Divi Child Theme

And then activate the theme as usual.

Ultimate Guide To Creating A Divi Child Theme

In order to test if your child theme is working properly, add some CSS in the style.css file of your child theme and save your changes. You should see these changes on the live site. You may need to open your page in a private browser in case it is cached.

Modification of the file Functions.php of Divi

The Functions.php file is where the main functions of Divi are stored. In order to add custom functions for our child theme, we have created a functions.php file in our child theme folder. However, this file will not completely replace the functions of the parent theme. It will add new functions as does the style.css file for the parent style sheet.

Since it is a php file, it is important that all your PHP code is wrapped in the appropriate php tags. But since you have already added and modified the functions.php file when creating the child theme, you can add new functions directly after the code already present.

<? php
function my_theme_enqueue_styles () {
wp_enqueue_style ('parent-style', get_template_directory_uri (). & # 39; /style.css&#39;);
}
add_action (& # 39; wp_enqueue_scripts & # 39;; & # 39; my_theme_enqueue_styles & # 39;);

// add a new code here

Modification of the model files of Divi

You do not have to edit only the style.css and functions.php files. You can add and edit any of the files in your parent theme, including template files or PHP files. It is there that you can completely restructure and adjust any part of your theme (do it with great care). Unlike editing the functions.php file, the template files must be completely replaced by a new one. This is because the original file of the parent theme (Divi) is ignored and the new one is used instead. To edit a template file, you must first replicate the old file before you start editing it. To do this, simply copy (not cut!) And paste the original theme file into your child theme folder making sure that the file name and location are exactly the same. For example, if we want to modify the file Divi / includes / navigation.php we would copy and paste this file into divi-child / includes / navigation.php .

Ultimate Guide To Creating A Divi Child Theme

As long as the name and location are exactly the same as in the parent theme, WordPress will use the child theme file instead of the old one.

CSS / custom code migration to your new child theme

After creating your Divi child theme, you will want to make sure everything is in one place. So, if you've already added CSS or custom code to Divi, you'll migrate it to your child theme. For example, if you have custom CSS under Divi> Theme Customizer> Extra CSS all you need to do is move (cut and paste) the CSS into the style.css file of your child theme.

Ultimate Guide To Creating A Divi Child Theme

Update your child theme

Divi and WordPress improve and adapt continuously. So, it can happen a while (after many Divi updates) that some of the Divi theme files change. And, if you have a child theme replacing the file that has been modified, your child theme may break in a certain way. This is because you are using obsolete code in your child theme and it needs to be updated to match the new code used by Divi. So, if you've been using a child theme for a while and things are starting to break, you may need to update your code.

Final Thoughts

I'm sure there are several successful ways to create a child theme. But since many WordPress themes are configured differently, I thought that it would be very helpful to focus on creating a child theme specifically for the Divi theme. For developers, it may be helpful to know the best practices for queuing parent and child style sheets for better performance. For beginners, you do not necessarily have to understand how everything works to create a child theme with this tutorial or with a plugin, and that's ok too. And, you may realize that a child theme is not necessary because the built-in style settings of Divi are all you need. Independently, I hope this post will serve you well.

I look forward to hearing from you in the comments.

Cheers!

Load More Related Articles
Load More By Amit Ghosh
Load More In WP Tips

Leave a Reply

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