Creating A WordPress Child Theme

I get asked quite often about Child Themes by my fellow developers and designers. The idea behind them are pretty simple and a great solution if you are using a theme that can be updated through WordPress. Child themes work as a solution to update the original files without actually touching the theme files. By including a new file into the child theme, it will replace the parent file. For instance, by creating a new header.php we can can change the output of the source code for the parent header.php. If we don’t need to make any customizations to a template file, we simply leave that out of the child theme and WordPress will fallback to the parents file instead! This makes editing your theme very easy and allows you to future proof your theme for updates.

We’ll talk about what the requirements are and how child themes work. Let’s dig in!

The Requirements.

Each child theme resides in its own directory in your theme folder. To start we need to create a folder in there and call it what ever you want. Let’s say we’ll be creating a child theme for the Twenty Ten theme. Let’s call that, “MyTwentyTen“.

Great! Now we have an empty folder… no worries! Child themes need nothing more than a style.css! Create a style.css in the root of the child theme. Note: the file name “style.css“ is required. Now inside our style sheet we’ll add the following lines of code we call the Information Header. This code is absolutely required for all themes, just child themes have one extra feature..

/*
    Theme Name: Twenty Ten Child
    Theme URI: http://www.example.com/
    Description: Child theme for the Twenty Ten theme
    Author:  Your name here
    Author URI: http://www.example.com/about/
    Template: twentyten
*/
Go ahead and update the info to suit your needs. This doesn't only work for Twenty Ten! This can be applied to any theme you wish to customize! Here's a quick run down of what this code is doing * **Theme Name** - Theme name **(REQUIRED)** * **Theme URI** - The URL to the theme's website (optional) * **Description** - A quick over view of the theme, e.g. "My child theme for Twenty Ten" (optional) * **Author** - The theme authors name, this would be your name, not the parent theme's name! (optional) * **Author URI** - The URL to the author's website (optional) * **Template** - Folder name of the parent theme **(REQUIRED)** Right after the closing comment tag, we need to link the parents copy of the style sheet so our theme applies the right styles. Go ahead and add this code, of course if you are using a different theme, just update twentyten with the theme you are targeting
@import url("../twentyten/style.css");
This line here will import the all the styles found in the parent theme. If your theme has more than one style sheet (as some themes do), you'll need to add those too. Log into the admin area of your site and activate our child theme, everything should look exactly like the Twenty Ten theme! Our style.css should now look like this
/*
    Theme Name: Twenty Ten Child
    Theme URI: http://www.example.com/
    Description: Child theme for the Twenty Ten theme
    Author:  Your name here
    Author URI: http://www.example.com/about/
    Template: twentyten
*/

@import url('../twentyten/style.css');

Make our customizations! :D

We now have all the requirements in place, but the site doesn’t look any different! Don’t fret! Now we get into the fun part :)

Let’s start with customizing some styles. There are many adjustments we can make just by over writing some CSS! Let’s say we don’t like the placement of our H1 tag in the header of the Twenty Ten theme, which by default shows to the left. What if we want that to be right aligned? Simple! With some investigation we can uncover the css that is giving it’s placement and by updating those styles in our child themes style.css we can change all of that!

To save your self the time and risk of going insane, I highly recommend using FireBug if you use FireFox, or the Chrome Dev Tools if you use Google Chrome. These tools are great for inspecting the insides of your code (also known as the DOM), and with a few clicks of a button you can inspect what styles are effecting a particular element. This is a discussion of it’s own and I will not be covering these in-depth in this article.

Using the Chrome Dev Tools, I’ll _Inspect _the H1 tag to find what CSS styling is being applied.

As you can see, there is an ID selector called “site-title“. By creating a new ID selector in our child theme we can add to or over write these parent styles! Let’s open our child theme’s style.css and update some styles with the following code.

#site-title { float:right; width:auto; }

And that’s it!! We don’t need to copy in all the code, the CSS cascade effect will just update the properties we want to target the float property and the width property. In this code we tell the browser to align our H1 tag to the right and we “reset” the width to the width of the text.

A Few More Dirty Tricks…

So we now understand how to change the styling, but what if we want to add some code the header.php? This will need a little more comfort with HTML and/or PHP but the idea is just as simple.

Let’s open Twenty Ten’s header.php file (the parent), copy all the source code and close the document. Now, create a new header.php in the child theme and paste in the code you just copied. Once this file is created, WordPress will then start using the child theme’s header.php instead of the parent. Any adjustments you make will be reflected. If you break something, you now have a back up to fall back to on some degree :P

Let’s add some text in place of the description tag. Around line 66 (I was using version 1.3 when I wrote this) you’ll see a line of code like this

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

Update that code to look more like this

<div id="site-description">Welcome to my site!! W00t!</div>

Once you save your document refresh your browser window and it should be updated now!

What About Custom PHP Functions?

Now there is some little tricky-ness when it comes to using the functions.php file. When you create a child functions.php it doesn’t replace the parent’s functions.php :( If you duplicate all the code in the parent functions.php into the child’s, it will return PHP errors saying that you can’t re-declare some PHP functions. The parent function.php is always loaded first, so it is best to only place custom PHP code into a child theme’s functions.php.

A Quick Recap

So today we learned all about how to customize a theme without modifying the files by using a child theme. There is a lot of flexibility using this method to really change-up a theme. With just a bit of ingenuity you can really make a drastic change on a theme and still allow it to be updatable in the future :)