Get our posts emailed to you with our monthly newsletter, subscribe here.

Think of a WordPress child theme, as a theme within your theme, so a parent theme containing a child theme. This child theme will inherit all the functionality of the parent theme. It sounds a little confusing, but in this WordPress tutorial I’ll show you it’s actually pretty easy to create a child theme for your current theme and once you understand why you should create a child theme, its a real no-brainer and it really should be pushed as standard practice.

Why Create A WordPress Child Theme

Take the main parent theme you use on your WordPress site, when you create a child theme you will essentially be extending the functionality of the parent theme without crucially modifying the parent theme core code.

If at this point, your thinking why would I bother to do this, the answer would be by stopping parent theme edits, the parent theme remains intact and when updates are released for that theme you do not lose your changes when the update happens.

Creating a WordPress child theme is the smartest way to extend and modify your current parent WordPress theme and not loose your changes when a theme update becomes available.

How Create A WordPress Child Theme

When you want to create a WordPress child theme, simply locate your WordPress theme folder, for example wp-content/themes and inside create a new folder and name it my-theme-name-childtheme.

This new folder will be the root of your new child theme where you can begin creating or modifying files to amend your parent theme . You can get started by adding as little as a style.css file or as much as an entire new set of theme files, I should add – the only file actually required is a style.css file, more on that on a second.

How To & Why Create A WordPress Child Theme

The Required Files

As I chimed above, creating child themes is easy – the only required file you need to have in your new child folder is the style.css file. This file actually replaces the parent themes style.css styles completely and sends WordPress the information header which contains the details about the child theme.

Below you can see how the child theme style.css file should look, pretty much the same as the parent directory CSS header information, but with one difference. The only difference is the use of a new tag ‘Template’, this simply informs WordPress which parent theme the child theme belongs to.

How To & Why Create A WordPress Child Theme

Importing Your CSS

Above I mentioned that the child themes new style.css will completely replace the parent themes styles, if you would like to carry these over into the child theme which is mostly the case you simply import it into your CSS file as below:

/* 
Theme Name: DesignWoop Child Theme 
Description: Child Theme Description. 
Author: David Martin - @webadelic 
Template: designwoop 
Version: 1.0 
*/ 
@import url("../designwoop/style.css"); 

/* Amend the background color */ 
body { background-color: #000; }

Activating The Child Theme

After making these changes your theme will be future proof, when updates for your parent theme are downloaded you will not loose your changes and you will not need to waste your time manually merging your old files to the latest release.

When your ready to put your theme changes live, you will need to remember to activate it just like you would when you install a new WordPress theme. Head to your WordPress Dashboard -> Themes and activate your new child theme.

References

http://codex.wordpress.org/Child_Themes

http://codex.wordpress.org/Theme_Development#Child_Themes

Posted by David Martin

David Martin is a WordPress developer & entrepreneur from the UK. He owns DesignWoop, CardDsgn and WhoDesignToday. Catch up with David on Twitter.

2 Comments

  1. Actually this may differ for a custom theme according to my experience. First, I followed the WP codex to make a child theme and it didn’t work. Then, I finally figured out that I also needed to add the framework in the child theme folder and it works now.

  2. Yes, creating a child theme is a good practice and it doesn’t require that much work, I use this routine as well.

Comments are closed.