Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme.Learn More

WordPress Child Theme Complete Guide

January 25, 2018

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.

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.

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.

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.

Demerits of WordPress Child Themes

While in general child themes are awesome and we recommend that everyone using WordPress activate a child theme on their site if they plan on making any potential tweaks in the future, they are some things you should keep in mind.

There is a Learning Curve

Child themes are primarily for extending or customizing the functionality of your parent theme which means if you aren’t a developer there isn’t much you’ll be able to do with your child theme and you’ll want to learn some coding to take full potential of your child theme. So 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!

Things Break or Are Left Behind

If you had built your website around a parent theme, you will may have to tweak a few things (e.g. menus, widgets and/or theme options) when you shift to a child theme. Some themes save settings in the database based on the theme name so when you switch to your child theme it may look like you have lost all your parent theme settings (Customizer settings) but don’t worry they are safe in the database but you will need to switch back to your parent if this is the case so you can copy your settings and migrate them over. In our Total theme we provide a useful Import/Export panel right in the dashboard so you can copy your theme Customizer settings prior to switching to your child theme and migrate them over.

Additionally if you are using your child theme to provide additional function to your site rather then using a plugin if you ever switch your parent theme you may have to move some these tweaks over to a new child theme, rename your current child theme or move the tweaks into a custom plugin.

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 via FTP/SFTP (…/wp-content/themes) and create a folder where you will store your child theme.

Note: 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 found in the parent theme.
  • To edit template files, copy them to your child theme first, and then edit them from there. But not ALL files can be copied over to your child theme and modified, you can only copy over template files. So if the theme has certain files inside for an includes, inc, functions or other folder which hold custom classes and functions you may not be able to copy those over and modify them. For those cases you may want to be looking at using filters or action hooks to modify the default parent theme functions.
  • You can add custom template files to your child theme for more functionalities
  • Use your child theme’s functions.php file to add custom functions and make use of parent theme or WordPress filters. 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.

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 🙂

wordpress-child-theme-guide
Article by Freddy WPExplorer Author
Published on: April 2, 2014
Last updated on: January 25, 2018
Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

14 Comments

  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..

  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:

      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 😉

  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:

      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.

  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 Avatar AJ Clarke says:

      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.

  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?

  7. Bilal says:

    Thanks a lot 🙂

  8. Aj kuly says:

    Thank you for this article 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.