One of the most frequently asked topics within the various Divi-related FaceBook groups revolves around child themes. In the following blog post, I’ve tried to sum up the valid points about child themes into one concise article. Here, I’ll cover topics to best solve any queries that may arise regarding what a child theme is, when one should be used, why it is necessary for web development projects with Divi, as well as how one can be made or where one can be purchased.

Although the content in this blog post is geared towards using a child theme in conjunction with Divi by Elegant Themes, the concept of the parent-child relationship is pretty universal and does translate to other standard themes available either on the WordPress repository or through various WordPress theme stores.

For new users, the idea of using a child theme might take a little while to get used to, but once the core concepts sink in, the ins and outs of using a child theme will become second nature. Before proceeding with this article, it is good to note that using a child theme with Divi is deemed as best practice, so familiarizing yourself with these concepts will definitely stand you in good steed as you continue along your web dev career.

Sure, if you’re not intending to change the core theme files, add loads of custom CSS, and are happy with the default “Made by Elegant Themes” credentials in the bottom bar of your footer, you don’t really need to worry about using a child theme. If you’re simply looking to style out a footer section with relevant credentials in the bottom bar, the Aspen Footer Editor might be a great plugin for you to utilize. If, however, you are looking to make some pretty gritty changes to your website, a child theme is essential.

To keep this blog post as simple and straightforward as possible, I’ve broken down the content into the following sections:

1. What is a child theme?
2. Why do I need a child theme?
3. Use a child theme generator
4. Use a plugin
5. Purchase the Aspen Roots Child Theme
6. Create your own child theme
7. How do I create a child theme?
8. How do I install a child theme?
9. Premium child themes

So, let’s dive in!

“A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.” – WordPress Codex

Right, okay. Let’s unpack this a bit further.

Any theme that you purchase via a theme marketplace (such as Envato Market or Theme Forest) or from a vendor (i.e. Elegant Themes), would be deemed as a parent theme. If you’ve signed up for a membership with Elegant Themes (welcome to the family) and have downloaded and installed Divi (welcome to the world of easy, breezy web builds), then Divi itself will be the parent theme. A child theme can either be created (more on this later) or bought from a premium child theme developer (also, more on this later).

A parent theme is intricately developed by a team of code geniuses and comes fully packaged with all of the relevant code and WordPress-ready functionality.

A child theme is a separate entity to the parent theme that can be created or purchased via third-party developers.

A child theme uses a series of various .php functions and WordPress optimized commands and hooks to call on the full functionality of the parent theme. This process is called enqueueing the parent theme, which basically means that the child inherits its exact same functionality and essentially “piggybacks” off of it. When WordPress runs, it looks first to the files present in the child theme and executes the code it finds. If the files are not present in the child theme, it executes the content found in the parent theme. With this, if you made changes to the header.php or footer.php file within a child theme, WordPress would execute the code found in the child theme. The only file that WordPress doesn’t prioritize child over parent for, is the functions.php file. In this regard, WordPress executes the code found in both files.

Using a blank child theme (comprised of a series of TextEditor files) which merely enqueue the relevant functions, and ensures that the WordPress website runs as per normal. Web designers and developers are able to take this step further. They are able to give the child theme a multi-layered identity by adding code or script into the various TextEditor files that make up the child theme. These edits might include CSS styling for aesthetic customizations, or see the addition of various PHP functions or .php files to include special functionality to the website.

Although the child theme is given the space to take on a life of its own, it still only exists because of the parent theme, and only works if the relationship is set up correctly. This is why enqueueing the relevant functions must be done so with care, or, left to those who are better skilled in the field.

So, why actually bother creating and running a child theme in the first place?

Creating and running a child theme gives you the space to make pretty nifty changes to your website (be it aesthetically or function-related). Technically, these changes can be made to the core files of the parent theme, but this is extremely risky as:

• You might break something in the code, and
• Theme updates will wipe out all of your edits.

Making use of a child theme ensures that you can make site updates in a 100% fool-proof and safe manner. And too, enjoy some time-saving conveniences for your later web builds.

 

Code Breaks

A WordPress theme lies within the wp-content > Themes folder on either your local host server or live server (accessible via FTP). From the WordPress backend, the same files are accessed via the Appearance > Editor console on your WordPress dashboard. If you’ve ever looked at Divi’s core theme files, you’re bound to notice the millions of lines of code. For really advanced WordPress users, editing this code might (at a push) be relatively easy, but for the general populace (who aren’t code savvy, and who WordPress and Divi were made for), these lines of scrolling code are just simply overwhelming.

Code is written in such an intricate manner that something as simple as adding a punctuation mark in the incorrect place will completly throw the entire operation off, rendering your theme – and website – broken. If you are keen to tinker around with code (be it CSS or PHP related), using a child theme will grant you this space, without creating any vulnerabilities in the core (parent) theme’s files.

Theme Updates

At various stages along the way, development agencies will decide to update their themes. These may be massive theme version updates, or smaller ones (such as bug fixes). At times of theme updates, the development company will reassess the current version of the code for the theme, and make relevant changes or additions where deemed fit. If you have made changes to the theme’s core files, as soon as the update is complete, you’re 100% guaranteed to lose any changes that you’ve made. The only way to reinstate them is to go back through all of those lines of code and manually edit them again.

Child themes totally solve this dilemma. If updates occur to the parent theme, your child theme (running as a separate entity) will not be affected. As your child theme would have enqueued the parent theme, the relevant updated code will still reflect in the parent theme but will not overwrite any changes set within the files of your child theme. And, as it’s always good to keep your theme, plugins and WordPress versions up to date, avoiding a theme update is really not good practice.

Convenience

In each of Divi’s General and Advanced Design settings, you’re able to set various aspects of each module. This is great for the majority of users who require an easy insert and edit option, but sometimes, keeping track of the small nuances set within each individual model can be a bit of a pain. For small CSS tweaks and tiny chunks of JavaScript functioning, you could make use the Divi Theme Options console, but using a child theme and the respective files (header.php, footer.php, style.css etc.) makes this process even easier.

Not only will this save quite a bit of time in design and development, but using a child theme for styling and similar will also save in page load time as your website won’t have to make database requests for code snippets. Also, you’ll also be able to save and reuse the files for later web dev projects.

Let’s say, for example, you have a particular fondness for a certain blog design or typography grouping that you’d like to carry over to a future project. Simply save that portion of the style.css file on your computer and reuse it later. Also, as editing the bottom bar of the footer section of the website does require a bit of elbow grease with a footer.php file, instead of rewriting these code lines every time, simply save a file and copy it over when necessary.

In summary, making use of a child theme will not only save you time and protect your website, but it’ll also allow you to prevent making a bunch of totally avoidable mistakes.

Are you sold on the idea yet? Great!

The next portion of this blog post covers how you can either create your own child theme (either via a generator or by yourself) and where you can purchase premium child themes.

 

Setting up a child theme for your Divi website is really simple. You could either use a child theme generator for a blank child theme, use a plugin, purchase the Aspen Roots theme by Aspen Grove Studios or set up your own one. Each of these methods will suffice for building websites with Divi.

1. Use a Child Theme Generator

Divi Space has a great child theme generator that is incredibly easy to use. Free to use, all you have to do is enter your details in the text area boxes provided and voilà, everything (including a footer.php file with your relevant credentials) will begin to download. Once complete, simply upload the .zip file to your theme console on the WordPress dashboard, following the install and activation of the parent (Divi) theme.

Other Divi child theme makers are available from Monterey Premier or Divi Theme Examples.

2. Use a Plugin

To make the process even easier, you could create a child theme by using a plugin. We recommend using the Child Theme Generator plugin. After download and install, Child Theme Generator will appear as another menu item within the Settings tab on your WordPress Dashboard. Once here, simply give your child theme a new name and description and click “Create Child”. Once complete, you’ll have a blank child theme running on your Divi website.

3. Purchase the Aspen Roots Child Theme

If you’re looking for a blank child theme that offers a tremendous amount of added value, have a look at the Aspen Roots child theme.

Developed by Aspen Grove Studios, Aspen Roots is a blank child theme available for both the Divi and Extra themes. Aspen Roots not only has the relevant child theme files (style.css, functions.php, footer.php etc.) but also includes the following premium features: the Aspen Footer Editor (to remove and replace the default “Made by Elegant Themes” footer text with your own credentials), a 404 template builder (to style out an attractive error/redirect page), as well as a login customizer (which allows you to design the default WordPress admin login page).

Available for only $ 21.00, purchase the Aspen Roots child theme for Divi or Extra via the Aspen Grove Studios shop.

Note: When purchasing Aspen Roots, the download will include two .zip files (one for Divi and one for Extra). When installing the theme, make sure that you select the correct file for either your Divi or Extra website.

4. Create your own Child Theme

It’s really easy to create a child theme from scratch, so if you’re interested in exploring and understanding what goes into a child theme (i.e. which file serves which purpose etc.), it might be a good idea to try out the process and gain even more knowledge for your web development practices.

If you have an IDE (integrated development environment) or source code editor installed on your computer, all you need to do is create and save a few files. Two of the standard editors are Brackets and Sublime which are free for download, easy to use and include color cues to make code easy to script up and identify. Alternately, you could use the standard TextEdit (Mac) or TextEditor (PC), just be sure to be a bit careful with your code as small errors could cause the files to perform incorrectly.

Creating a child theme is very easy so much so you can copy and paste from our example below:

• Create a theme directory in your website’s directory
• Create a style.css with your child theme’s information
• Screenshot

If you’re working on a local host server, navigate to the relevant folder in your directory: wp-content > themes. Here, you’ll see a folder containing all of the Divi files (installed as the parent). If you’re working on a live server, set up the folder and files and use an FTP client once complete. Create a new folder in the themes folder and name it something client-related, possibly include “child-theme” at the end of the name.

Create a theme directory

First and foremost, go to your theme directory and create a folder for your child theme. You can name it anything you wish. For simplicity, we will name our divi-child.

style.css

Create the theme stylesheet named “style.css”. Copy the code below and paste into a new IDE or TextEditor file and rename the theme name and author information based on your needs.

/*
Theme Name:   Divi Child Theme
Theme URI:    https://yourwebsite.com
Description:  Child theme, based on Divi
Author:       Your Name
Author URI:   https://thisauthor.com // Your web address
Template:     Divi
*/

Be sure to change the various details and replace with your own. The most important things to note are the “Theme Name” and “Template” sections. The Theme Name (the actual name of your child theme) becomes the display name within the Appearance > Themes of the WordPress theme selector, and Template (which must always be labeled here as ‘Divi’) tells WordPress which theme it should use as the parent.

functions.php

Open up your IDE or TextEditor (I’m using sublime). Starting with the functions.php file, either visit the WordPress Codex and copy the first PHP code block (the shorter one), or, copy the code from below. This will enqueue the parent (Divi) theme.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Paste the code into a new file and make sure to relabel the correct paths to both the parent and child theme folders. Save the file as functions.php within your child theme’s folder.

Once you have amended all of the above details to fit your deliverables, save the file as functions.php within the child theme folder.

screenshot.jpg

It’s recommended to add an image of your or your client’s logo (or similar) into the child theme folder. Save the image (880 x 660px) as “screenshot.jpg” and include it with the functions.php and style.css in the folder. When your child theme is installed and activated, this image will display as the graphic in the Appearance > Themes section of the theme selector.

 

 

For a more detailed description and step-by-step guide explaining the process of making a child theme, read the following blog post by Elegant Themes.

* Just a quick note, the Elegant Themes blog post makes use of the @import method placed within the style.css (just below the WordPress standardized stylesheet header) to enqueue the parent theme. As suggested by the WordPress Codex, the @import method is no longer deemed as best practice due to page load time, and users are advised to create and make use of a functions.php file. When you get to this step, create a functions.php and copy the relevant code as listed above.

If you get stuck or have further interest in the topic, visit the WordPress Codex and read through the literature on Child Themes.

Now that you’ve created a child theme (either via an online generator, plugin or with your own bare hands), you’re ready to install it. Whether you’re working off of a local or live server, the process will be the same.

Take all of the files in the child theme folder (functions.php, style.css and a screenshot) and compress the folder into a .zip file. Ensure that you already have the WordPress instance set up and running, and install the Divi.zip file (as downloaded via the Elegant Themes member area) via the Themes > Add New section of your WordPress dashboard. Once installed, click Activate. Now, Divi is running as the parent theme.

Next, return to the Themes > Add New section of your WordPress dashboard and select the .zip file of your child theme. After install, activate your child theme and you’re good to go!

Thanks to the nature of the Divi community, there are a number of incredible designers and developers that are creating ready-made child themes for Divi. If you’re looking to bypass the entire design process of a web build then purchasing a ready-made child theme would be perfect for you.

Not only do the premium Divi child themes help you save plenty of time, but all of the legwork is already done for you. From UX planning to aesthetic design, font selection and more, all of the bells and whistles are already crafted, and all that’s required is for you to add your relevant text and image content.

We recently published a list of The 30 Best Divi Child Themes so have a look through our collection of child themes (images included in an easy-to-preview lightbox gallery) and view the respective demo sites.

Aspen Grove Studios has a number of Divi child themes that are ready to go, so if you’re starting your next web dev project and are looking for a super quick and easy build, have a browse through our child themes, and be sure to check out our child theme bundle.

We hope that you’ve enjoyed reading this blog post. If you have any queries or comments, please feel free to share them below. We love hearing your feedback!

Thanks for reading!