WordPress Child Theme: The Complete Guide to Creating & Using Child Themes

WordPress child themes. They might sound (and seem) intimidating at first, but once you learn the ins and outs (as well as the beauty) of WordPress child themes, you are going to have a lot of fun. In this post, we will break down the WordPress child theme into its various parts. To put it in another way, we will learn:

  • What is a WordPress Child Theme
  • Merits of WordPress Child Themes
  • Demerits of WordPress Child Themes
  • How To Create A WordPress Child Theme
  • WordPress Child Theme Resources

Do enjoy and wow us with your opinion in the comment section below!

What Is A WordPress Child Theme

So, what is a WordPress child theme?

A WordPress child theme is basically a WordPress theme that “borrows” template files and functionalities from another WordPress theme known as the parent theme. Don’t punch anything yet, I will explain everything in detail I promise.

ASIDE: A parent theme is a typical WordPress theme such as our top selling Total WordPress Theme, the default Twenty Fourteen theme or whichever theme you’re using on your website.

The most basic WordPress child theme is simply a folder that contains a special style.css file. Don’t worry it’ll all make sense once I explain. One of the questions that’s probably going through your head right now is: Why would one want to use a child theme while there are plenty of parent themes?

The answer is quite simple. Most parent themes get updates now and then. So, if you take a parent theme and customize the code (and style), you will lose all these changes next time you update the theme. This is where WordPress child themes come in. A WordPress child theme gives you the power to customize your parent theme without running the risk of losing your changes when you update. Of course, you can choose to do away with the updates if you don’t mind exposing your website to hackers.

Moving on…

A few paragraphs ago, I mentioned that child themes “borrow” template files and functionality from parent themes. How does this happen? Think of child themes as shadow themes; they mimic their parent themes. It’s all like creating a copy of your parent theme without actually copying anything. Sounds like magic, right?

Press the freeze button. How do you create a copy of the parent theme without actually copying anything? The secret to understanding child themes lies inside the special style.css file we mentioned earlier. Actually, the secret is a single line found inside the style.css. Which line you ask? More on that in a moment. Since we will create a child theme later in this post, I will just introduce a few basic concepts to reveal the line I’m talking about and give you a better understanding of child themes.

To build a child theme, you must create a folder (for the child theme) in your WordPress themes directory. You can name the folder whatever (or after your theme).  Next, you must create a style.css with the following code:

/*
Theme Name : The name of your child theme (e.g. Total Child Theme)
Theme URI: http://www.example.com (Your child theme's URL)
Description: A brief description of your child theme
Author: Your name goes here
Template: Your parent theme directory name (e.g. Total, twentyfourteen, etc)
Version: 1.0.0
*/

You must save this style.css in your child theme’s folder. Now, go back to the sixth (6th) line in the code above. You will see:

Template: Your parent theme directory name (e.g. Total, twentyfourteen, etc)

This line tells your child theme from which parent theme to borrow functions and template files. This simple line links your child theme to the parent theme, acting as a conduit through which the child theme receives template files and functionalities from the parent theme. This means your must have the parent theme installed on your WordPress platform.

Suffice to say, without this line, you don’t have a child theme. You just have a folder and a typical style.css file.

In summary, the template line inherits (most of) your parent theme when you activate your child theme. All the changes you make to your child theme will not be affected if/when you update the parent theme. How do you like that explanation? Are you following or isn’t it clear enough? If you are with me, let’s move on to the advantages and disadvantages of WordPress child themes.

Merits of Using WordPress Child Themes

Success

SECURE UPDATES
WordPress child themes merely borrow functions, templates and styles from the parent theme. This allows you to customize your website without touching the parent theme. Therefore, whenever the developers update your parent theme, you can safely upgrade your website without losing custom changes.

WORDPRESS CHILD THEMES ARE EASILY EXTENSIBLE
WP child themes give you a lot of flexibility. You can create new template files that were not part of the parent theme. You can add new functions, styles and so much more. Additionally, there are many commercial and free theme frameworks with extensible options to get you started.

WORDPRESS CHILD THEMES ARE FALLBACK SAFE
Every developer is human, and we all know that to err is human. Everybody makes mistakes and everybody forgets. That said, you will be in the soup if you forget to code for something when using a parent theme. Things are a bit different with child themes. If you forget some code, WordPress will automatically load an alternative (or the original) from the parent theme. Of course, this is only true if the code exists in the parent theme.

WORDPRESS CHILD THEMES ARE CHEAPER AND FASTER TO DEVELOP THAN PARENT THEMES
Since you are not creating a theme from scratch, developing WordPress child themes saves time and money compared to parent themes.

Demerits of WordPress Child Themes

THERE’S A LEARNING CURVE
If you’re a newbie, you need time to learn the workings of parent themes and WordPress (as well as a bit of code) in general to enjoy the full potential of child themes. All the same, you must earn your stripes. After all, you will be coding away like the pros in no time!

A FEW THINGS BREAK/ARE LEFT BEHIND
If you had built your website around the parent theme, you will be forced to tweak a few things (e.g. menus, widgets and/or theme options) when you shift to a child theme.

Seeing that the merits of WordPress child themes outnumber the demerits, are you excited to create (or continue creating) your first child theme?

How To Create A WordPress Child Theme

I want to assume you are proactive and have created a folder and “the special” style.css file for your child theme. If you just skipped to this part (or were eagerly waiting for this section), please open your WordPress themes directory (…/wp-content/themes) and create a folder where you will store your child theme.

ASIDE: You can access the themes directory via your File Manager in your cPanel. Alternatively, you can use a FTP client such as FileZilla if you have FTP accounts enabled.

Next, open your favorite text editor (mine’s Notepad++) and create a style.css file with the following info:

/*
Theme Name : The name of your child theme (e.g. Total Child Theme)
Theme URI: http://www.example.com (Your child theme's URL)
Description: A brief description of your child theme
Author: Your name goes here
Template: Your parent theme directory name (e.g. Total, twentyfourteen, etc)
Version: 1.0.0
*/

It’s the same code we used earlier.

Upload your style.css file to the child theme’s folder. At this point, your style.css file is empty (apart from the above lines, which do nothing in terms of styling), so don’t expect your child theme to look anything like your parent theme. To overcome this hurdle though, you can import your parent theme’s style.css by creating a new empty functions.php file inside the child theme folder and adding the following PHP code:

function total_child_enqueue_parent_theme_style() {
	
	// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
	$theme   = wp_get_theme( 'Total' );
	$version = $theme->get( 'Version' );
	
	// Load the stylesheet
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css', array(), $version );
	
}
add_action( 'wp_enqueue_scripts', 'total_child_enqueue_parent_theme_style' );

Make sure to change where it says “Total” to be the name of your parent theme. This will allow your child theme to dynamically update the version number appended to the parent style.css so when the parent theme is updated if there were any changes to the style.css file in the parent theme it will let the browser and your CDN (if using one) re-cache the stylesheet and prevent your site from having CSS issues when viewed.

Customizing Your Child Theme

child-theme-customizations

Now come the fun part. You most likely created your child theme to make customizations, so dive in!

  • To customize your child theme, just add your styles to the style.css file you created. They will override corresponding styles in the style.css file found in the parent theme
  • To edit template files, copy them to your child theme first, and then edit them from there
  • You can add custom template files to your child theme for more functionalities
  • Copy functions.php to your child theme to add new functions. Don’t add new functions to the functions.php file in your parent theme

WordPress will load the template files and styles in your child theme first, but if something is missing, it will load the corresponding files in the parent theme. Oh yeah, child themes are fallback safe, but I bet we said that already.

And that’s it 🙂

WordPress Child Themes Resources

Would you like to learn more about child themes? I prepared the following resources just for you:

Conclusion

Child themes are very powerful as far customization and extensibility go. Moreover, they provide good learning grounds for anyone looking to learn WordPress theme development. They are simple and fun to create and give you plenty of options to turn your WordPress site whichever way you like.

Design away and have fun, and don’t leave before sharing with us in the comments below. We love and value your feedback 🙂

Freddy
Post Author: Freddy

Freddy is a WordPress theme reviewer at WP Theme Raves, published WordPress blogger, web dev and founder of Vista Media Enterprises, an online business dedicated to WordPress users looking to boost conversion rates via content marketing.

Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
Got something to say? Join the discussion.
  1. Tolya Toki says:
    Thanks for good overview. But after activating child theme my top and footer menus disappeared. What may be wrong there, maybe you have an idea? I'm newbie with WP..
    • AJ Clarke says:
      AJ Clarke
      That's just what happens in WordPress. You just have to go to Appearance->Menus and re-define your menu locations.
      Admin
  2. Jeremy Weld says:
    Being new to WordPress... I just installed your Total theme. I then uploaded the child theme zip that was included in the package. It looks just like the Total parent theme. Must I add all that code you show above to make it work? I want to have my theme updated but at this point I have no intention of modifying the theme. Should I use the child theme that was supplied? Thanks for your advice
    • AJ Clarke says:
      AJ Clarke
      The child theme should look exactly like the parent theme Jeremy. The whole point of the child theme is so you can make edits to the parent theme and still be able to update the Total theme without overriding your changes. Please make use of the correct means though when seeking support for Total so it's quicker, thanks ;)
      Admin
  3. chadrogezChad says:
    I am not seeing the two folders (includes, inc) within the root of the Total theme folder? Will that cause any issues not copying theme over? The includes folder found here …wp-content/themes/parenttheme/includes The inc folder found here …wp-content/themes/parenttheme/inc
    • AJ Clarke says:
      AJ Clarke
      Sorry Chad, ignore all that, I deleted it from the guide. Your child theme shouldn't have anything by default but a style.css and a functions.php file. You can see the example Total child theme on my github page.
      Admin
  4. Nate says:
    "ASIDE: You can access the themes directory via your File Manager in your cPanel. " This gives me more information than the many other sites I've read on this topic. Can you share where I can find the cPanel in order to find the File Manager? (First time with WordPress and I'm a little lost). Thanks!
  5. John says:
    thank you for the informative article! What happens if I begin editing a parent theme and then decide I want to create a child theme because I forgot to load one. (this actually happened to me)...so what I did was uninstall the Parent theme, I then reinstalled a new one, I then installed the child theme and activated that one so that I may work on it instead of the parent theme. Is it normal that once I installed the child theme, I still see all the changes I had made to the parent?
    • AJ Clarke says:
      AJ Clarke
      Hi, Yes you will still see all the changes you made to the parent theme until you re-install the parent theme or update it.
      Admin
  6. Bilal says:
    Thanks for sharing nice information. I just want to ask that once we have a theme update so should we update our child theme or parent theme. I think if we update the child theme then it will be updated in parent theme or the opposite of it?
    • AJ Clarke says:
      AJ Clarke
      You need to update the parent theme. Your child theme is for YOU only you should be the only person to update/edit it.
      Admin

Leave a Reply