Creating A WordPress Child Theme Using Elegant Themes

Most website developers would agree that the best solution for customizing a WordPress theme is to create a custom child theme, on top of your main WordPress website template.

A child theme allows you to add as many customizations as you want to your website without worrying about your data or code changes getting wiped-out after your next theme update.

When it comes to WordPress themes, Elegant Themes is one of the best low-cost WordPress theme providers out there. While their themes are generally easy to setup and install, they can be a little tricky when creating a child theme as they require some additional code that is not normally needed with themes from other companies or developers.

So the tutorial below is the best (and easiest) way I know of to create a custom WordPress child theme for a theme from Elegant Themes.

Note: For this post, I use Divi from Elegant Themes as the parent theme for the site.

 

Step 1: Go to File Manager

The fastest way to create a child theme is to use File Manager inside cPanel (or your hosting’s equivalent).

 

Step 2: Go to Themes Folder

First, access the wp-content folder. This is where all of your main WordPress files are stored.

Then go to the Themes folder, where you will find all of the WordPress themes you have installed.

 

Step 3: Add/Create A New Folder

Here is where you create a new theme folder to store all of your new child theme files. You can name the new theme folder whatever you wish.

 

Step 4: Add/Create A New “style.css” File

Your new theme name should now appear in your Themes folder. Click on your new theme folder to proceed adding files to it.

The most important file of a new child theme is the style.css file. So create a new one inside your child theme folder.

 

Step 5: Setup/Edit Your New CSS File

Here is where the fun starts, but first you need to edit your new style.css file.

The style.css file is where your child theme pulls all of the theme information from. The top section (highlighted green in the image below) is the File Header section. This is where all of your child theme development and version information will go.

For more File Header options and Header-Names, visit the official WordPress File-Header page.

The section underneath the File Header, highlighted in yellow above, is where you can put all of your new CSS code. Any CSS code you put on here will override (and be in addition to) your parent theme’s CSS. Aren’t child themes awesome!

For those people looking to copy and paste, here is a nice style.css template to work from:

/*
 Theme Name:     New Theme Name
 Description:    Custom WordPress Child Theme for Divi.
 Author:         Your Name
 Template:       Divi
 Version:        1.0.1
/*
 
@import url("../Divi/style.css");
 
/* = Child Theme Customization Starts Here
------------------------------------------------------- */

/* changes font size for all */
body { font-size:16px; }

 

Important Notes for CSS File

The Theme Name, Description, Author, etc. can be named whatever you like, just make sure to make the Template option the exact name of the parent theme your new child theme is pulling from. In this instance, we created a child theme for our Divi template from Elegant Themes.

Another important thing is to check the path of the @import function below the File Header. This function imports the main website template’s CSS (Divi) to work off of.

Note: The “../” means the previous folder (which would be the main Themes folder). So make sure the path to the main website template’s CSS file (Divi’s) is correct before activating.

 

Step 6: Create A New “functions.php” File

For some child themes you don’t need to add a new functions.php file. Usually, the child theme works fine by just pulling from the main template. With Elegant Themes however, you need to create a new functions.php file and add a small snippet of code to it.

Select functions.php and click Edit.

Add this snippet of code below then click Save.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );

function enqueue_parent_theme_style() {

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

 

Step 7: Verify Info and Activate Theme

You’re all done! Just need to verify your child theme information then activate it.

Start by going to Appearance > Themes in the backend of WordPress. You should see your new child theme.

Click on it to verify the information you put in the style.css file is showing up properly. Then click Activate.

Then go to Appearance > Editor to view and verify the child theme files. You should see your theme name in the top-right corner as well as all of the new child theme files underneath.

That’s it! Your child theme is now live and ready to go.

You can visit Appearance > Themes again to verify it if you can’t believe it.

 

I hope this guide was helpful, if you have any questions or comments feel free to leave them below.

Additional Child Theme & WordPress Related Resources

• Why You Should Be Using A Child Theme – by Elegant Themes founder Nick Roach
• How to Create A Child Theme Using FTP – Video by WPBeginner on YouTube
• Child Theme WordPress Plugins – Official WordPress plugin page