If you have the Divi theme installed on your WordPress site, you can use the pre-designed layout packs and Divi Builder to build and customize your site quickly and easily. However, if you don’t know what a Divi Child Theme is and how to make a Divi child theme. Or whether you want to add custom CSS and PHP features to your site to give it a genuinely distinctive look and feel, you’ll need to make a Divi child theme. Don’t worry; we will cover everything in this guide.
A child theme is a sub-theme that inherits the parent theme’s appearance, feel, and functionality. The child theme’s files are maintained separately from the parent theme’s files, so you modify the child theme whenever you want. However, it does not affect your parent theme. So if you came here for anything specific, feel free to hop around and jump to a certain section. Otherwise, please read this full post and feel free to bookmark it or, better yet, share it.
Before we get started, the difference between a Blank Divi Child Theme and a Premium Divi Child Theme is confusing the Divi community. So we’ll go over both in this section, but keep in mind that they’re used for quite different reasons, even though they’re both called “Divi Child Theme.” This ultimate guide to Divi Child Themes will help you understand all about the Divi child theme benefits and features. We’ll also discuss when and why we create a child theme. So you can be assured that you will be well-versed in the subject by the end of this article.
So, let’s get started.
What is a child theme in Divi?
A Divi child theme is an extension of the parent Divi theme, which can have its functionality, styles, and design separate from the Divi theme. Because WordPress executes the child theme files before the parent theme, if you’ve modified your header, footer, sidebar, or other areas, WordPress will use those files instead of the parent theme. However, the Divi child theme needs the parent Divi theme to operate accurately.
Why Create a Divi Child Theme
There are significant benefits to developing a child theme. The first major point is that keeping your customizations in a separate folder from your Theme. After that, you’ll be able to update the parent theme without losing your custom modifications. It is especially critical when using a theme like Divi, which is updated frequently.
Second, you could quickly copy or move this child theme folder from one site to the next to speed up the development process. As a result, developing a child theme is especially beneficial for freelancers or companies who build WordPress sites for a large number of clients.
Third, building a child theme can make collaboration with other users much easier. Instead of being spread throughout the settings pages and the WordPress Customizer in your dashboard, you’ll have all your modifications in one organized folder with a child theme. As a result, it can significantly reduce the development time. Additionally, keeping changes in a separate folder prevents certain users, such as customers, from interfering with the code and configurations set in the Theme’sTheme’s setting pages and the WordPress Customizer.
Fourth, developing a child theme is similar to setting up a WordPress staging site in that it allows you to test with theme development in a low-risk setting. For example, let’s say you start customizing your child theme and something goes wrong, or you’re disappointed with the results. In that situation, you can turn off the child theme. There’s no need to worry about destroying your site or having to undo all of your modifications because it will return the parent theme, and your website is in the previous condition.
Files for Divi Child Theme
For any child theme, you need three files that help the Theme while operating. So it would be best if you created your own.
- style.css
- functions.php
- screenshot.png
In the following section, we’ll build each of these files and evaluate their functions. I strongly recommend you follow this tutorial step by step to understand what a Divi child theme is and how to create one.
style.css
The style.css file is the initial step in establishing a Divi child theme. This File has two purposes: it stores information about your child’s themes, such as their name, creator, description, and version number. The second purpose of the CSS styles is to change the appearance and quality of your website. Later in this article, we’ll discuss customizing your child’s theme.
The next step is to develop a stylesheet that contains all of the Divi child theme’s CSS. You’ll need to use a text editor for this. I’ll use Notepad++ editor for this demonstration because it’s one of the greatest HTML and CSS editors. Create a new text file and name it style.css as mentioned above. This header comment is essential for the CSS to operate normally. It includes basic information about the child theme, such as the fact that it is a child of the Divi parent theme.
In this header comment, you must specify the theme name and the template (i.e., the parent theme’s name). If you plan to publish or sell your child’s theme, you can provide additional information such as a description, author name, and version. For a Divi child theme, here’s an example of a complete header comment When you create your “style.css” file, copy and paste this code:
/*-------------------------------------------------------
Theme Name: WP FirstHand Child Theme
Theme URI: https://wpfirsthand.com/
Description: A child theme layout for Divi
Author: Wp FirstHand Author
Author URI: https://wpfirsthand/author.com/
Template: Divi
Version: 1.0.0
----------------- ADDITIONAL CSS HERE ------------------*/
The asterisks and slashes indicate that this code will be commented out in CSS, preventing WordPress from rendering it on the front end. We’ll go through how to create custom CSS later. But, for the time being, click Save to save this stylesheet to your child theme’s directory.
You’ll need to replace all of the information to suit your own. Then, in your theme directory, the name of the Theme will appear. Make sure you include everything listed above, and for the ‘Template:’ value, choose Divi or Extra. Your child theme will not operate if any of this information is incorrect.
functions.php
It’s now time to enqueue the stylesheets for your parent and child themes. First, the styling of the parent theme is sent down to the child theme. Otherwise, you’d just see a bunch of unstyled text when you activate your child theme.
Second, the CSS for the child theme loads before the parent theme’s, but it does not override it. That way, when you add custom CSS and make other changes to your child theme, these changes will either complement or replace the parent theme’s styles and functionality.
Almost every WordPress theme uses the functions.php File as a template. It works similarly to a plugin and is instantly activated in the WordPress admin panel and front-end sites. In addition, this File usually contains custom PHP code that is used to add more functionality to the child theme. Copy and paste the following code into your functions.php File using your text editor.
<?php
/*-------------------------------------------------------
* WP Firsthand Child Theme Functions.php
------------------ ADD YOUR PHP HERE ------------------*/
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 image that will appear in your themes directory is “screenshot.png.” WordPress recommends a PNG file with a resolution of 1200 by 900 pixels. It’s entirely up to you to come up with a design. For example, the elegant Themes’ Divi theme has a solid background with the Divi logo, whereas conventional WordPress themes have a layout snapshot. We use an example of a child Theme as screenshot.png, and in that image, we use the Wp FirstHand logo.
How to make a Divi child theme
There are two methods to build the files for your child theme:
- Method 1: Manually Creating the Directory
- Method 2: Uploading a Zipped File
Manually Creating the Directory
Create a Divi child theme folder.
To initiate, create a folder in which you may store all of your Divi child theme’s template files and assets. You can use File Manager to create this folder in your database. You can find this in your WordPress hosting provider’s control panel. Once you access the control panel, then click on the File manager.
It will redirect to the new page, and then you have to open the public_html folder, which is on the left sidebar.
After that, you need to Click the wp-content folder. Once the wp-content folder is opened, then click on the Theme folder and create a new folder named WPFirsthand-child. It will be the root directory of your child’s theme.
Once you build the root folder, create the functions.php, style.css, and a screenshot.png (briefly explained in the above sections). After completing these files, Upload these files using the Upload button at the top of the cPanel. It will appear the same as shown below.
Uploading a Divi Zipped File to WordPress
Make a folder on your computer to save your files. Create a text file named functions.php and a text file called style.css in this folder. Paste the function’s code into the functions file using a text or code editor.
Paste the code into the CSS file (using an editor like Brackets or Notepad++). To operate successfully, the CSS file must be stored with the .CSS extension. You may save it as a web file, and it will convert to .CSS if you’re using Brackets or a comparable tool.
Once you’ve finished preparing your files, zip up this folder and install it just like any other theme. Then, simply login to your WordPress admin dashboard and navigate to the Appearance on the left sidebar and click on Themes.
After that, a new page will appear in which your installed themes emerge, and you need to click on the Add New button. Next, click on the Upload Theme that appears on the top of that page and upload the folder you just made. Once it has been uploaded, activate it.
That’s all; your new Divi child theme is now operational. You may now customize it without worrying about losing your adjustments when the software is updated.
Conclusion
It’s simple to create a child theme for Divi and Extra, and it has a lot of advantages. When you update your parent theme, child themes prevent you from losing your customizations. You can switch to a new child theme without losing your current child theme’s design. You may also swap between them to change the appearance of your website while keeping Divi running.
