Divi child theme is the extension of the parent Divi theme which includes its very own style, functions, and designs that are sole of the Divi theme. It is known to be a very possible way to add some of the advanced customizations to the theme.
The child theme does not have its functions it takes them from the parent theme. This means to work the child theme, the parent theme has to be installed.
It has some advantages as it gives you a better way to organize all the customized CSS/code in one place, which makes it easy to merge with others. Along with that, it helps to protect the code from clients who somehow get access to custom code from the theme customizer and settings.
There are two kinds of Divi Child Themes:
- Blank child themes
- Pre-designed child themes.
For the Divi child theme, there is the requirement of a parent theme as well for the proper working of the Divi child theme. On the basic level, a child theme needs three things;
- A child theme folder is in WordPress. It will be a folder that will hold your child’s theme files.
- A style.css which is used to store the child theme.
- A functions.php file is needed in the first level to keep together the wp_enqueue_scripts which will enqueue the parent theme.
There are various files that you need to create the Divi child theme:
It requires three files for its proper work;
- functions.php
- style.css
- screenshot.png (1200px by 900px saved in PNG format)
style.css
The first thing you do when you create the Divi child theme is that you make the “style.css”.
This gives you the advantage of keeping together the information about your child’s themes such as author, name, description, and much more information. Another advantage it gives is to keep together the CSS style to give a customized look to your website.
In all this, the name of your theme is displayed in the directory.
style.css
/*
Theme Name: Divi Child
Theme URI: https://www.duogeeks.com
Description: Divi Child Theme
Author: Duogeeks
Author URI: https://www.duogeeks.com
Template: Divi
Version: 1.0.0
*/
/* -- You can write the CSS below -- */functions.php
It is a template that is used by every WordPress theme. It is like a plugin which by itself gets in two things first the admin dashboard and the other one is the front-end page of the WordPress site.
In short, this is the home for the PHP code which is used for the additional functionality of the child theme.
functions.php
<?php
function divi__child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );
//you can add custom functions below this line:Screenshot.png
It is the image that is visible in the theme directory. The size of the image is 1200 by 900 pixels.
Uploading and activating the child theme
Once you can create the style.css, and function.php then you have to try and start uploading the child theme you have made and also activate it. You also have to see that the Divi theme is uploaded because then only the child theme will be able to function once it gets activated.
There are two ways:
If you have created your child’s theme folder directly in WordPress then there is no need for the whole process you can simply go to the WordPress dashboard navigate to the Appearance > Theme and click the activate button.
Another way is to create your child theme folder and all the files on your computer, firstly you have to compress it in (ZIP) to be in the proper format so that it can upload in WordPress.
Once your folder is zipped, then you have to upload it and activate it and this process is the same as the normal theme, just click Appearance > Theme in the WordPress dashboard and then activate it.
For the checking that your Divi child theme is working, you can add CSS in your child theme style.css file and save it.
15 best Divi child theme you can get it for free now.
Editing the Divi’s function.php file
It is the place where all the main functions are stored in the Divi. To add some more functions, you need to create a functions.php file in the folder. And you have to see that it does not on the parent theme. It just adds some of the new functions to it.
Edit The Template File
You can edit the style.css and functions.php as well as you can edit the parent’s theme. Template files are replaced totally with the new one. To edit it, firstly you have to replicate the old one before editing it for a new one. To do that you simply have to copy and then paste the original file in the child folder by seeing that the location and name of the file are the same.
Migrate the Current custom CSS and code to a new theme.
Once the Divi child theme is made just make sure that everything is in one place. If you have the CSS or the code in Divi migrate it to the child theme by the option of (cut and paste).
Update The Child Theme
Updates are coming regularly in everything. Once in a while your Divi child theme will also ask for the update and it will change some of the Divi theme files which may lead to the break of the child theme. All this happens because of the old code in the child theme which is required to be updated.
Final Thoughts
The creation of the Divi child theme is easy and also has many benefits. It doesn’t let you lose your customization. This means a new child theme can be created without losing the old child theme.
It is considered the hardest way of creating a Divi child theme.
A few of the benefits it gives are:
- You do not lose customizations with the Divi updates.
- Easy to make.
- Child themes can be reused as well as sold.
We hope that you liked this and we wish that we were beneficial to you in many ways. If you are looking for a Divi web designer for your next Divi website design or if you want white-label service, we are the right choice.
