There still seems to be a lot of confusion in the Divi community about using a Divi Child Theme, I often see questions like What is a child theme? Do i need a child theme for Divi? How do i add a child theme? in the various online Divi communities, so here is a rundown on the what, why and how of child themes for Divi.
What is a Divi Child Theme?
A Divi child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. The child theme files will override any files that are also found in parent theme, allowing you to change how your website looks and functions without having to edit any of the parent Divi theme files.
Why would i want to use a Divi Child Theme?
The Divi theme is updated by Elegant Themes fairly regularly to improve functionality, security and/or design. If you edit any of the files in your Divi theme directly, those edits will be lost if you then update your Divi Theme.
A child theme allows you to make any file edits you need to change the functionality and design of your site without touching the parent Divi theme. With a child theme, you can update Divi (parent) theme as it is updated by Elegant Themes and not update your child theme so it stays safe with your edits.
Do I really need a child theme if I am just adding some CSS into a few modules or the ePanel custom CSS box?
No, you do not need a child theme if you are just making changes to the settings in Divi, or adding some custom CSS into the Divi builder or Theme options custom CSS box, as these will remain even after you update Divi. Any customization you make via the theme cutomizer and module customizer will also remain after an update.
But, it is very quick and easy to add a child theme and it does no harm in having one on the off-chance you may need it in the future. For most sites I will use a child theme from the start as I tend to play with the theme files code, but I also have quite a few basic sites that do not have any child theme as I knew they would never need one.
How do i make a Child Theme for Divi?
A child theme must have the following 2 files to work;
functions.php that links the Divi child theme to the parent theme (Divi) with the following code;
style.css where you put your custom CSS edits with the following code.
/* Theme Name: Bare bones for Divi Author: Divi theme examples Author URI: http://www.divithemeexamples.com Template: Divi Version: 1.0 */ /* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */
These 2 files go in a folder (your child theme) that can be zipped up and uploaded via appearance > themes just like you did when you uploaded the Divi theme. Once you activate the child theme you will notice that nothing happens, because this is still a blank child theme.
As you add custom CSS into your child themes style.css and these will override the styles in the parent theme. So, for example, if the parent theme style.css says the header is blue, but in the child theme style.css you say the header is red, then the header on your site will be red.
If you need to edit other files from the parent Divi theme, just copy the whole file over to your child theme and edit the file in your child theme.
As you can see in the image below i have done this so I can customize the code in the footer.php.
Is this the same as the Divi child themes is see on Divi Theme Examples?
Yes, The premium child theme listings on Divi Theme Examples or from the various child theme developers are all essential the same as the example above, just with more custom files added. These child themes already have custom CSS added to style.css to change how your Divi site looks and works. They may also have footer.php. header.php and other files added too to customize the layout and functionality, but it is the same principle of using a child theme to change the way your Divi website looks and functions.
For the best collection of amazing child themes head over to the DIvi Theme Examples child theme directory which lists 100’s of pre-made child theme templates for Divi.
Is there an easy way to create a child theme?
As you can see above, creating a child theme to store your Divi customisations is just a matter of creating 2 files, but if you want an even easier way to add a child theme to your Divi site then you can download the Bare Bones child theme. All you have to do, is upload it to your theme dashboard (appearance > themes) and activate. You now have a child theme.
Does Divi Theme Examples use a child theme?
Yes, this site has a child theme running because there are edits to various .php files within the site along with a custom style.css stylesheet for all my added CSS. Whilst i like the idea of adding custom CSS into the various modules, for me it makes more sense to have all my CSS in 1 file, in 1 location so it is easy to find and edit.