Harness The Power of WordPress Child Themes

14 May 2009 ~ 22 Comments

How long does it take you to build or modify a wordpress theme? Do you sometimes get frustrated by the time it takes for you to finish a theme even if you’ve already created a handful of them? Did you ever wish there was an easier way? Actually there is, and the answer is by using WordPress child themes.

Picture yourself modifying an existing WordPress theme in minutes or better yet, build a fully functional WordPress theme in five hours or less.

In this article, we are going to see how child themes can help us in taking over the world and speeding our theme development in WordPress.

Wordrpress Child Theme

A WordPress child theme is just like any other WordPress theme. You can put them inside your blog’s theme directory (/wp-content/themes) and then activate them in the admin panel. They also have folders for your images, scripts, a screenshot and a CSS stylesheet.

The only difference is that child themes basically doesn’t require any theme files (header.php, index.php, footer.php, single.php, etc.). This is another reason why you don’t need to be a PHP master in order to develop themes in WordPress.

Now let’s create our child theme.

Choose Your Parent Theme

Before we create our child theme, we must first establish our parent theme. And for that, we’re going to use Kubrick as our parent theme. You don’t need to downlad it because it’s already the default theme in your WordPress installation and it’s located in /wp-content/themes/default/.

Establish Your Child Theme

Like I said, a child theme is just like any other WordPress theme so we’re going to create a new folder inside our themes directory and name it (for the lack of a better name) “koobreek”. After that, create a style.css file and save it under “koobreek”.

Child Theme Stylesheet Comments

This is the part where all the magic happens. Open up style.css inside “koobreek”. Then copy the following into style.css and save the file. Please pay special attention to line 8.

/*
Theme Name: Koobreek
Theme URI: http://wordpress.org/
Description: This is a child theme of Kubrick
Version: 1
Author: Raymond Selda
Author URI: http://www.raymondselda.com/
Template: default
*/

Now you have created a WordPress child theme using Kubrick as your parent theme. Take note of line 8 because it is the folder name of your parent theme. Now activate your child theme in your WordPress admin. If everything checks out, you should be presented with only the markup (XHTML) with no styling whatsoever.

XHTML Structure

Importing Styles From Parent Theme

Now unless it’s CSS Naked Day, you might want to dress up your markup with some CSS. I want this to be basic and simple as possible so for this tutorial we’re going to import the styles from our parent theme by adding a single line of code to our child theme’s style.css file.

/*
Theme Name: Koobreek
Theme URI: http://wordpress.org/
Description: This is a child theme of Kubrick
Version: 1
Author: Raymond Selda
Author URI: http://www.raymondselda.com/
Template: default
*/

/* Import Parent Theme Style */
@import url(../default/style.css);

It should look exactly the same as the parent theme but you’ll notice that the background image for the content is missing.

graphic-missing

If you look in Firebug you will notice that a rule is being generated from the header.php inside the parent theme. Also the path for the missing background graphic is pointing at the child theme’s image folder which is not existing at this stage.

There’s a couple or more ways to remedy this but for simplicity’s sake we’re just going to copy the parent theme’s image folder into the child theme. Refresh your browser and it should look exactly like the parent theme.

Koobreek Stage 1

Overriding Styles Of Parent Theme

Now let’s modify some of the styles of our child theme. Place this code into your child theme’s style.css file.

Change the font to Arial.

body {
	font-family:Arial, sans-serif;
}

Change headings into Arial with a normal font weight.

h1, h2, h3 {
	font-family:Arial, sans-serif;
	font-weight:normal;
}

Change the graphic header

I edited the blue header graphic and changed it to black. I then saved the new header inside the child theme’s images folder. We then place this code to override the parent theme’s styles.

#header {
	background: #000 url('images/kubrickheader.jpg') no-repeat bottom center;
}

Change header styles in articles

.post h2 {
	letter-spacing:-1px;
}

.post h3 {
	font-weight:bold;
}

Change style of sidebar and its headings

#sidebar h2 {
	font-family:Arial, sans-serif;
	text-transform:uppercase;
	font-weight:bold;
	color:#333;
	border-top:1px solid #333;
	padding-top:3px;
	font-size:12px;
}

#sidebar ul {
	font-family:Arial, sans-serif;
	font-size:11px;
}

After writing some of our own styles, we end up with something like this.

Koobreek Stage 2

Overriding Parent Theme Templates

What if you need to make some changes to how the elements are structured inside the template files?

Very easy. Just copy the template file you need to edit from the parent theme folder into your child theme. This will override the parent theme’s templates. This has been made possible as of WordPress 2.7.

I don’t like where the metadata for the post is positioned. I want it beside the post date sitting below the post title.

To do that, we copy the index.php from the parent theme into the child theme folder. Open up the child theme’s index.php and replace line 17 with the code below.

<small><?php the_time('F jS, Y') ?> by <?php the_author() ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></small>

Then delete line 23 because the code that we need is already in line 17. Refresh your browser and you should see the post’s metadata below the title along with the date.

Koobreek Stage 3

Conclusion

We have created and modified a new theme without touching a single line of code inside the parent theme’s files. All of the changes have been made inside the child theme’s folder. Feel free to download Koobreek :-).

Plenty of information about child themes can be found at ThemeShaper and ThemeHybrid. I hope child themes will help speed up your workflow and make theme development more enjoyable.

Do you use any theme frameworks when you develop your WordPress themes? What is your favorite? Post them in the comments below.

22 Responses to “Harness The Power of WordPress Child Themes”

  1. Steven Bradely 15 May 2009 at 1:06 am Permalink

    Both Thematic and Hybrid are excellent frameworks. I started learning about frameworks/child themes last summer and have been making more use of them since. They make so much sense for theme developers. I’m currently working on my own framework, using both of the above as a model.

    One question with them is how easy they will be for non-developers. Will your average WordPress user understand they need to install two themes and then activate the child theme? It’s certainly not anything difficult to do, but it might trip some up. I would have preferred child themes to be located in a folder inside the parent theme. I think that would have made the whole concept simpler as it would mean one theme to upload.

    By the way nice post. I do see frameworks and child themes as the way forward in themes. They make so much sense for development and the potential confusion using them seems minimal.

  2. Marty Thornley 15 May 2009 at 3:47 am Permalink

    Hey Raymond,

    That was a great walk through of how to approach child themes. I have been hearing about this for a while, mostly in relation the popular theme frameworks. But I never exactly understood what it was, thinking that it was specific to certain themes that were somehow made to have child themes added on.

    I only recently saw something about the template line in style.css and realized you could do this with any theme but your walk through made it very clear.

    There is an up side and a down side to this for me. On one hand, making a child theme would be great for those already using that parent theme. On the other hand, OI don’t know that I would want to find and install two theme folders. I also don’t think I would want to tell people they have to rely on another theme for mine to work.

    I recently developed my own take, hoping that my future themes could be created with as little work as possible, yet still be a contained single theme. It is very early on and I haven’t really started getting it out there, so any feedback is greatly appreciated.

    You can read about it and download it here: BlogStarter Theme.

  3. Raymond Selda 15 May 2009 at 2:17 pm Permalink

    @Steven: Thanks for the comment. You’re right. Theme frameworks will definitely help theme developers but theme developers should always place themselves in the user’s position and make it as simple as possible for the users to modify their themes. Having child themes inside the parent theme would really be a good idea.

    I’m also looking for Thematic and ThemeHybrid as inspirations but I’m also interested on how they approached their business models. Ian (Thematic) directly sells his child themes based on Thematic and Justin (ThemeHybrid) gives all of his themes for free but offers paid theme support.

    @Marty: Thanks for the comment. I actually did some research and chose Kubrick as the parent theme so you don’t have to download a separate theme in case you needed to try out creating your first child theme. I also tried to explain it as simple as possible.

    Installing two separate themes is a little sacrifice we all have to face. It all depends on what parent theme you choose. Try to also educate the users the need to install tried and tested theme frameworks. Ian and Justin have worked hard on building their frameworks and both of them have a wonderful community backing up their themes. Free and open source themes are great because it only gives the community the opportunity to only enhance the product.

    In my opinion the pros only outweighs the cons on using child themes. Just like Steven said, the potential confusion on using them is minimal.

  4. seks izle 9 August 2009 at 10:38 pm Permalink

    Thanks for the essay.

    Can I put this essay to my general content site?

    Thank you so much again.

  5. ข่าวรถยนต์ 1 October 2009 at 11:36 am Permalink

    Thanks for the essay.

  6. webtha 10 October 2009 at 11:39 am Permalink

    Thanks for shared.

  7. topofbusiness 10 October 2009 at 11:50 am Permalink

    Wow, very cool info

  8. the real roxanne 11 November 2009 at 6:38 pm Permalink

    I have a blog using the same them. Bookmarked this page and I will definitely be coming back to use these codes.

  9. Dave 22 March 2010 at 5:31 pm Permalink

    This is really an excellent post!

    I’ve been looking for something like this for a while.

    I know absolutely nothing about coding and I’ve managed to get it working from this. Well, I know a little bit, but I mean LITTLE.

    I’ve now got a child theme that I can make changes to. I then preview the changes, rather than activating the theme. This way I don’t affect my live site.

    Really really awesome, can’t thank you enough.

    I know a few people who would like this post too.

  10. Helen 3 November 2010 at 6:58 pm Permalink

    Thought you might like to know that over a year on this post is still being read and used. I’m now the proud creator of a child theme – thanks! Really didn’t think it would be that straightforward.

  11. kadee 25 November 2010 at 12:59 am Permalink

    This post is really timely for me because I’m taking the plunge and in the process of moving my blog from Blogger to a self-hosted WordPress site (really wish I would have gone with WP in the first place…lesson learned!). Your plug-in suggestions will come in handy down the line. As always, appreciate the recommendations. :)

  12. arp 6 February 2011 at 10:26 pm Permalink

    There is an up side and a down side to this for me. On one hand, making a child theme would be great for those already using that parent theme. On the other hand, OI don’t know that I would want to find and install two theme folders. I also don’t think I would want to tell people they have to rely on another theme for mine to work


Leave a Reply