Creating & using “Child Themes” in WordPress

This is well beyond the “WordPress 101” help, but if you find yourself liking most of a theme and just want to change a few aspects of it, then a “child theme” is for you!

Why create a child theme?

Why not just change the theme and be done with it? Well… to get to the point quickly, themes can be updated. If a conscientious theme author updates their theme to stay compatible with an updated version of WordPress (which is a GOOD thing!), and you choose to update your installation of their theme, any customization you’ve made to that theme can get inadvertently overwritten. Oh no!

Here’s where a child theme will really work well. You can update the parent theme, without worry of losing the style changes you’ve employed.

Let’s take Twenty Ten as an example. It’s a very versatile theme – custom header images ~ custom background color and images – all without having to learn to dig in the source code. Woo hoo!

Now… say you want to change any font size or color – or perhaps change the header or footer information… Time for us to create a child theme.

Step 1:

In your theme directory (folder), create a new directory for your child theme. You may name it whatever you like.

Step 2:

Save a file called “styles.css” into that directory.

Step 3:

Add the following code to the header comments of your styles.css. Substitute the words “parent-theme” for your actual parent theme name.

Template: parent-theme

This line will follow the “Theme URI” line, such as the example below:

/*
Theme Name: Your Theme Name
Theme URI: http://wordpress.org/
Template: twentyten
Description: This child theme supplements the default WordPress theme, TwentyTen.
It is created so the style can be updated, without losing the formatting changes chosen
by the designer if the TwentyTen theme were to have an update.
Author: Your Name
Version: 1.0
Tags: custom child theme for yourSite.com

Please note: This child theme depends on the original theme.
You must have TwentyTen in your themes directory for this to work.
*/

Step 4:

Within the child “styles.css” file, after the header comments, import the styles.css from the parent theme. Once again, substitute the words “parent-theme” for your actual parent theme name. I tend to add a comment line below the import line, to let anyone looking at the CSS file know that the styles listed below are overriding the parent.

@import url("../parent-theme/style.css");
/* Overriding the default styles from the parent Template */

Step 5:

Add any specific css that you wish to add, or change to the parent theme. Anything you place within the child style.css file as well as within it’s directory will automatically override the parent’s settings. So, if you place a footer.php file within the child directory, it will automatically override the footer.php file within the parent directory. This allows for great customization possibilities!

Have fun with your semi-custom theme editing!

For more in depth information, here are some helpful links.

http://codex.wordpress.org/Child_Themes

http://op111.net/53

Leave a Comment