28 May 2009

What is a WordPress Child Theme?

One of the more complex issues with WordPress occurs when you need to customize the look and the feel.

This is complex because, in the past, a blog owner needed to understand some of the PHP code in a WordPress theme before they could begin to make any custom changes. The process usually involves finding a theme that you like, and then changing as little as possible for the desired look.

Using WordPress Child Themes makes the customization process much easier.

I found out about this feature while doing some research on WordPress Theme Frameworks, which will be a topic for a future date. The process to setup a Child Theme is simple.

Step 1 – create a directory in the /Theme/ directory of your blog with the name of your theme (i.e. – /themes/mytheme/).

Step 2 – in your new directory, create a file called ‘style.css’

Step 3 – add the following lines of code to your newly created style.css file:

<pre class="css" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">/*
Theme Name: Rose
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
<strong>Template: use-this-to-define-a-parent-theme--optional</strong>
Version: a-number--optional

Note the line in bold text. This is the key. Change the value for Template from “use-this-to-define-a-parent-theme–optional” to the directory name of the WordPress theme you will be using as a template — or Parent Theme. So if you are using a Theme such as Arthemia as a Parent theme, the Template line would look as follows:

<strong>Template: arthemia</strong>

Step 4 – Now we want to import the styles from the Parent Theme by adding only 1 line to our Child Theme style.css.

@import url(../arthemia/style.css);

If you have a look at your blog now, it should look exactly like your Parent Theme. What you’ve just done is created a safe work space to make changes to the Parent Theme without touching any of the original theme files.

Now you are ready to begin adding CSS styling to your style.css file to customize your Child Theme. Any style declarations that you make to the style.css file in your Child theme will over ride those from the Parent Theme.

If you still need to make changes to the theme files, simply copy the Parent Theme template file to your Child Theme directory and make the edits. WordPress will look in the Child Theme directory first for template files. If an alternate version of a template file exists, WordPress will use that template file instead of the file in the Parent Theme directory.

For more on this topic, have a look at the WordPress Codex. We would also like to thank the people over at ThemeShaper for the inspiration behind this article.

One Comment on “What is a WordPress Child Theme?

30 May 2012 at 02:01

Nice post . Thanks for, posting on this blog mate! Ill message you soon. I didnt know that.

Leave a Reply