Understanding WordPress Child Themes

After using WordPress for any length of time you’ll undoubtedly come across “child themes” sooner or later. You might have even heard that you should be using them on your site, but not quite sure how to go about this or why it’s important anyway.

This post explores everything you need to know about WordPress child themes and whether they are right for you!

So what’s all the fuss about child themes? Short answer is they prevent you losing any customizations when your original theme is updated. Basically, child themes give you a safe environment to modify your site without affecting the original theme. The two are completely separate. This means that using a child theme allows you to easily extended another theme without touching any of the original code!

The All Important Parent Theme

If you can have a child theme then it stands to reason a parent theme is perfectly valid too! When we refer to the parent theme it’s simply the original theme that you installed and activated. i.e. the theme that you are trying to extend via a child theme.

With a child theme activated you can update your parent theme whenever necessary safe in the knowledge that your site modifications (made via a child theme) won’t be affected.

A child theme has a very strong dependency on the parent theme, and cannot exist on its own. The child theme contains ONLY the files needed to extend the parent theme and nothing more. Most of the theme files needed to render your site will always reside in the parent theme. In fact, a child theme isn’t really a theme at all in the true sense of the word because of this reliance on the parent theme.

file-explorer

Which Theme Do I Activate?

There is often some confusion about what theme needs to be activated when using child themes. This could just be down to the familiarity of activating a parent theme once you have installed it.

You can have as many themes installed on your WordPress site as you like but only one can be active at a time. Even though a child theme is entirely dependent on the parent theme, it is the child theme that is activated.

child-theme-active

You can of course reactivate the parent theme at any time without any adverse effects but you won’t see any modifications made to the child theme.

Do I Really Need A Child Theme? I Only Need To Make A Few Changes!

If you only need to add a couple of styles here and there then it seems like overkill to have to resort to a child theme, and you’d be right! In this case you can use a custom CSS text box to add styles that will be added directly to your website header after the parent theme styles.

Some theme companies (including WPGO themes) have this feature built-in but if your theme doesn’t support adding custom CSS then you can use a plugin instead such as Jetpack to achieve the same thing.

minn-theme-options

However if you find yourself adding a lot of CSS and perhaps also need to add some PHP or JavaScript then a child theme is almost certainly the way to go. You can simply copy over the CSS code to a child theme.

Also, child theme CSS is added to the header via a style sheet, similar to the parent theme, so if you don’t like styles being outputted directly to the header then this is another reason to consider switching to a child theme.

Enough Already! How Do I Create a Child Theme?

You can create a child theme using one of the following methods:

  1. Download a ready-made sample child theme from the company you purchased your (parent) theme from.
  2. Create it manually and add it to an archive (e.g. zip file).
  3. Use a plugin to create one for you.

The first two methods require you to upload the child theme zip file to your website which you can do via Appearance > Themes. If you create a child theme via a plugin then it will do so for you directly on the server which is pretty convenient!

As a matter of course here at WPGO themes we include a sample child theme for EACH of our themes, which has been fully tested, to get you started customizing your site. If you are using one of our themes then this is probably the easiest of the three methods listed above as the sample child theme is already setup to extend a specific parent theme. If your theme purchase doesn’t include a child theme then you will have to create one manually or use a plugin to do it for you.

Three of the most popular plugins for creating child themes are:

Disclaimer! I haven’t used any of these plugins myself (I always use hand crafted child themes). There are probably other plugins out there too which are just as good! Let me know in the comments if you have come across any that have proved useful to you.

If you need to create a child theme yourself then fortunately the process is pretty easy. Create a folder using the name of the parent theme as a base, appended with “-child”. For example the parent Minn folder is called “minn-wpgothemes” and we name the child folder “minn-child-wpgothemes”. We also like to add our company name to further qualify the folder name to help prevent duplicate folder name conflicts. Inside this folder create a text file and name it style.css. This file will contain all the custom CSS rules to override the parent theme styles.

To let WordPress know that this is a child theme make sure you have the header of the child theme style sheet similar to the following:

/*
Theme Name:     Minn Child Theme
Theme URI:      http://www.wpgothemes.com/themes/minn
Description:    A child theme of Minn.
Version:        0.1
Author:         David Gwyer
Author URI:     http://www.wpgothemes.com
Template:       minn-wpgothemes
*/

@import url("../minn-wpgothemes/style.css");

/* Add your custom css below this line. */

This is the style.css of the Minn child theme. Most of the information is optional but you MUST include the Theme Name and Template fields at an absolute minimum. The Template field is simply the directory name of the parent theme you wish to override. Below the header you typically add an import statement to include all the parent theme styles. Then, below the import statement add your custom styles.

If you think that including all the parent theme styles, and then adding even more styles to override them, is a bit inefficient you don’t have to use the import statement. Instead you can copy all the parent theme styles into the child theme and then modify them however you want rather than override them. However, the most common method used in child themes is to use the import method so that you always get the latest version of the parent theme styles as and when the parent theme is updated. If you are using the import rule though make sure no CSS styles are added above it. ALL child theme styles need to be added below it.

Once you’re ready you can zip up the child theme folder and install it and activate as you would for any other theme.

By the way, you can add new styles to your child theme via Appearance > Editor after you upload the child theme, you don’t have to add them all beforehand.

Let’s Start Customizing!

It’s the moment you have all been waiting for. Customizing your site!

As mentioned above once a child theme is activated you can edit the code directly in the WordPress editor via Appearance > Editor.

minn-edit-styles

As an aside, I have often wondered whether parent themes should be editable in the editor by default as any parent theme modifications will be overwritten during updates. Should child themes only be editable via Appearance > Editor? That’s another post entirely but I’d be interested to hear your take on it in the comments.

Now that you have your child theme activated it’s time to get your creative boots on!

Using Chrome Developer Tools to Customize CSS

This is a great way to modify child theme styles. Browser inspector tools can save you a lot of time tracking down those pesky CSS selectors you need to modify the required elements. Most browsers include their own version of inspector tools but the one I use almost exclusively is Chrome Developer Tools for the Google Chrome browser.

chrome-inspector-tools

To modify the styles for a particular element simply right click it and select “Inspect element”, which will open the Chrome inspector window with information on the selected HTML element. What’s more is that you can experiment with styles and alter things like font sizes, colors, borders, margins and padding until you are satisfied with your modifications.

Altering styles via the inspector window are purely temporary and will NOT change anything permanently on your site. Refreshing your page will remove any alterations you just made.

After you have finished modifying element styles via the inspector window simply copy them directly to your child theme (remember, you can do this via Appearance > Editor).

I Want to Edit Code too!

It’s not just CSS that you can add to a child theme, you can easily add PHP code too. Simply create a functions.php file in your root child theme folder. This is a great way to add snippets of PHP code to modify your site. Keep in mind though that the code you are adding should be relevant to your theme and not grow too large!

General rule is if the code doesn’t really have anything to do with the presentation of your site then you might want to consider adding it to a plugin instead. Or, if your code modifications are becoming very large and unwieldy then it’s time to think about refactoring your code into a plugin so you can organize the code better and make it easier to share with others.

As well as adding code to the child theme functions.php file there is another way to modify the parent theme code which is incredibly useful. Any parent theme template file can be easily overridden in the child theme by simply copying the file to the child theme. That’s it! From then on the child theme version will always be used in preference to the parent theme template, leaving you free to modify the child theme version however you want.

It’s also possible to include theme template files that aren’t included in the parent theme. You would typically do this to target a more specific template. For example, say you wanted to have a custom category archive. If there isn’t a category.php template file in your parent theme then either archive.php or index.php would normally be used to render category archives.

All you have to do is to add a category.php file to your child theme and this file will then be used to display category archives. The simplest way to do this is to copy and rename an existing template archive file from the parent theme and modify it as necessary. Click here, to see more information about the WordPress template hierarchy.

Template_Hierarchy

A word of caution though when overriding theme template files. You need to keep in mind that when you override any parent theme template file the corresponding one in the child theme will always be used from that point onwards. If the parent theme template has had some bug fixes or new features added to this file then these won’t filter down to the child theme automatically because you are using a different (and now out of date) template to add your modifications to.

This is fairly easy to monitor though. All you have to do is to keep an eye on the parent theme changelog to see if there are any changes to the theme template files you are overriding. If there isn’t a changelog available, or it’s not very detailed then just check the parent theme once in a while and take a look at the files you are overriding to make sure you don’t need to update anything in your child theme.

This only applies to parent theme template files you are overriding though. If you are adding template files that aren’t included in the parent theme then you don’t have to worry.

Oops! I’ve Already Made Parent Theme Changes, What Do I Do Now?

If you have already modified the parent theme significantly then it’s still possible to switch to using a child theme, but you will need to follow a few steps.

Firstly, identify exactly what files you have been changed. Compile a list to make this easier.

If you’ve only changed the parent style.css file then here’s what you can do. The quick method is to just copy ALL your parent theme styles (as well as keeping the import command in the child theme style sheet) to the child theme and then restore your parent theme to the original state, or update to the latest version.

Then, you can either leave the child theme styles, or, the recommended way is to go through and compare your child theme styles with the parent theme and then remove anything from the child theme that is a duplicate of the parent theme styles. Depending on your modifications, and the length of your style sheet this could be a lengthy process but it works pretty well!

This highlights another good reason to use child themes. Separation of customizations from the child theme and main parent theme keeps things clean. Always having the original code available whether its CSS, or PHP code is extremely useful. So if you get too deep into customizations and mess things up you can quickly take a look at the original theme code to get your bearings. Otherwise if you hack away at the parent theme code then you won’t have any frame of reference when things go wrong!

There is a similar recovery process if you have made PHP code changes to the parent functions.php or theme template files. Copy your modified files to the child theme and then restore the parent theme files to the latest versions. Then go through the child theme file(s) and compare the code, leaving in only the code you modified. Any other code that is duplicated can be safely removed.

Also, it’s a great feeling to know that your precious customizations won’t be lost, or erased during theme updates. So make sure you back everything up first and start the process to move all your modifications to a child theme instead. You’ll be glad you did!

Did I Cover Everything?

I tried to cover all aspects of WordPress child themes in this post. If I missed anything just let me know via the comments and I’ll keep it updated. Feel free to leave messages about your own experiences of child themes, good or bad!

Child Theme Resources

About David Gwyer

Founder of WPGO themes and lead developer. I love creating themes that are intuitive and easy to use but deceptively powerful! I also enjoy tinkering around with plugins.

Leave a Reply

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