Select Page

How to create a DIVI Child Theme

What is a DIVI child theme?

In wordpress, a child theme helps the developers to modify the parent page without loosing the edits during the future updates.

There are rare cases when a wordpress theme doesn’t require some modifications to adquire the desired website, in order to improve the feel and to extend the functionalities web developers create a child theme where they have free hands to modify, add or to remove things. This is the case for DIVI.

Does DIVI require always a child theme?

No, we don’t need always to create a child theme within DIVI because it comes with a powerfull builder that enhance the developer flexibility to build almost everything we want without creating a child theme. And also there are powerfull plugins that can handle amost evetyhing what DIVI can’t.

But there are some specific situations when a DIVI child theme fits better than using an external plugin. This article is about this specific situations. It’s about when you simply want to create a shortcode without using a plugin or when you just need to install GTM and place the code exactly before the openning HEAD tag.

How to create a DIVI child theme in a easy way?

  1. Create a folder in your computer called divi-child
  2. Inside the new folder is mandatory to create a new file called style.css
  3. Copy the following code and paste it into style.css at the very top
/*
Theme Name: DIVI - Child Theme
Version: 1
Description: Smart. Flexible. Beautiful.
Tags: responsive-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: divi-child
Template: Divi */
  1. Create a new file called functions.php
  2. Fill the new file with the bellow code
function divi_child_theme_enqueue_styles() {
    wp_dequeue_style( 'divi-style' );
    wp_enqueue_style( 'divi-parent-style', get_template_directory_uri() . '/style.css', array(), et_get_theme_version() );

    //array('divi-parent-style') - Ensure that the child file is loaded last.
    wp_enqueue_style( 'divi-child-style', get_stylesheet_uri(), array('divi-parent-style'), filemtime( get_stylesheet_directory() . '/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'divi_child_theme_enqueue_styles', 20 );

By using this function load our style.css file after the parent’s style.css file, in this way we are sure that the css syntax from the child style.css file will ovewrite the parent code.

DIVI CHILD THEME

  1. Copy the divi-child folder and paste it into the following path wp-content/themes
  2. Access https://yourdomain.com/wp-admin/themes.php and activate the new child theme there.

What about now?

Now you have a divi child theme that can be used to create a powerfull website without any limits. Use it wisely, a child theme is the recommended way by WordPress to enlarge a theme but some future update may require some changes, so keep an eye on DIVI changelog and adapt your code accordinatly.

 

Are you stuck?

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.