Child Themes: The efficient way to modify WordPress themes

Ever had to modify a WordPress theme, and struggled to find your way around the CSS or template files? Or, have you ever had to update a theme, just to lose all you modifications? Use child themes to modify your blog design.

OJ blog redesign

For the recent redesign of the theme used here on the Online Journalism blog, a child theme was developed. I thought I would talk a little bit about why, I think child themes should be your preferred way to modify themes for your blog.

Child themes depend on ‘Parent Themes’. Some go as far and call them ‘Theme Frameworks’; themes specifically developed with child themes in mind. In this article we won’t distinguish between parent themes and frameworks, they are the same thing.

How they work

The parent theme act as base for the child. The parent theme is a ‘complete’ theme, child themes can be nothing more than a single css file, and in most cases, will be no more. Everything that is not specified in the child theme, will be taken from the parent. You can think of a child theme as an add-on or a plugin for the parent.

An example:

Let’ say you like the look of the Kubrick theme, but want to have the link colours match your brand, and hide the meta info at the bottom of each post. You could start looking through the main css file in Kubrick and change all the values, then hope you will remember to change them again if the Kubrick theme is updated. You could also create a child theme like this:

Create a new folder in /wp-content/themes/ called ‘child theme’ (or whatever you want to call your theme)
Create a stylesheet called style.css and add the following lines at the top
/* Theme Name: Child Theme Description: This is a child theme of Kubrick Version: 1 Author: Your name Author URI: http://www.example.com/ Template: default */

It should be pretty self-explanatory, the last line is the most important. ‘Template: default’ defines the parent theme folder, not the parent theme name. Remember that the parent theme has to be present in the ‘/wp-content/themes’, but not activated. You will activate you child theme.

Now you simply start adding to you newly created style.css file. start by changing the link colours like this: ‘a:link, a:visited { color: #000 }’

Hide the meta data by adding the following: ‘.postmetadata { display: none }’

Save the file and upload the new theme folder to your WordPress blog and activate you child theme.

Using Child Themes for larger projects

As was the case for the Online Journalism Blog, a few more modifications were needed. I used the Thematic Framework to build the child theme for this blog. If you want to overwrite specific template files, like the archive.php file, you simple add the file in your child theme, and it will take priority over the one found in the parent theme.

By using a solid parent as the base for a child theme, you’ll know that all the heavy lifting has been done. You can concentrate on the look and function of your theme. All the popular themes are SEO optimized and work well with widgets etc., so you don’t have to re-code everything again and again. And if you do a lot of theme developing, you’ll learn to code new themes very fast once you know the structure of a theme framework.