In many of our Divi tutorials we say to paste a snippet of code here or there. Most of these tutorials involve code, like CSS, jQuery, or PHP. We created a guide on Where To Add Custom Code In Divi, which is super helpful, but some of you were asking for a child theme for eitehr Divi or Extra in order to take advantage of the features or functionality in the tutorials. We decided to give you a free Divi child theme or Extra child theme for you to download and use on your site!
▶️ Please watch the video above to get all the exciting details! 👆
Free Child Theme For The DIVI Theme
There is a lot of debate and discussion around child themes for Divi, whether they are truly needed or not. Technically you can add CSS and some script code to Theme Options, but there are a lot of technical reasons why a child theme is better, such as hierarchy, loading order, and cache. Basically, it’s always best to use a child theme if you are adding any code to Divi. Otherwise, when Divi updates the code would be overwritten, so this solves that. We have a full guide and video if you want to learn more about Child Themes vs. Layout Packs. This would actually give you much more understanding of what a child theme does and why you need one.
Free Child Theme For The EXTRA Theme
Nobody seems to care about the Extra theme from Elegant Themes anymore, and I personally don’t much either. Some would even argue that Elegant Themes has forgotten it, and in some ways they have, and it makes sense. But we had a request for a child theme for Extra since the code inside the Divi child theme file is slightly different and they are not interchangeable, and are pleased to be filling this unique market gap. So if you are using the Extra theme and need to paste some snippets from our tutorials or elsewhere, just head on over to the page and download your child theme.
What’s Included
Both versions of the child theme have the same included files.
Style.css
This is the stylesheet where you can add any and all CSS snippets. We often refer to the Divi Theme Options, but placing the CSS here is the best place!
scripts.js
This file is where you can add any JavaScript or jQuery snippets. You could add these to Divi Theme Options Integrations tab, but this is better!
functions.php
This is the file where you can add custom functions and and other PHP snippets. Use this file carefully and follow instrutions on the tutorials.
screenshot.jpg
This is the thumbnail image that displays in the WordPress themes area. Feel free to edit or replace this with the same size image if you prefer.
Muchas Gracias!
You’re welcome!
Hi. Thank you so much for this. I’m curious if installing the child theme prevents me from getting the benefits of new updates to the main Divi Thime.
Hi Karisa,
Having the child theme on your website has no cons but only pros and now answering your question, no the child theme will not prevent you from getting any benefits of the new updates. 🙂
I think your method of loading the child theme style.css has a fault in it. The Divi parent theme does indeed enqueue the child theme file, but it does so using the parent theme version. Look at their functions.php:
function et_divi_enqueue_stylesheet() {
$theme_version = et_get_theme_version();
….
wp_enqueue_style( ‘divi-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(), $theme_version );
and in et_get_theme_version():
if ( is_child_theme() ) {
$theme_info = wp_get_theme( $theme_info->parent_theme );
}
$theme_version = $theme_info->display( ‘Version’ );
WP and ET both document having the child theme explicitly enqueue both parent and child and using the child theme version on its file.
I spent several hours hunting this down. 🙂 The wrong version, of course, makes it hard to get an old version of the stylesheet out of cache. Back in the 90’s, I managed the largest cache on the net and I’ve completely forgotten how annoying it is to have stale content out there.
Hey George,
I have read your comment and I have tested the different enqueue approaches with different levels of cache but I didn’t find a considerable amount of difference in them. It would be great if you propose the code that you feel can make a difference and I’ll test it on my end and will get back to you on that.
Let me know how it goes.