How I used a WordPress Child Theme To Redesign My Blog

Posted on July 2, 2008 by Ian Stewart

Problem: You want to take advantage of WordPress Parent-Child Themes but you want more control than is usually afforded through CSS alone. What about adding a Favicon? Or a link to a custom stylesheet for IE fixes.? Or editing the menu? How do you do that without messing around with the original Parent Theme?

Solution: You do what I did. I had this exact same problem redesigning ThemeShaper to take advantage of my WordPress Theme Framework, Thematic. I’ll tell you how I solved it and give you a better idea of the power of the functions.php file in WordPress Child Themes.

When you’re done reading this post you should be well on your way to taking full advantage of the power of WordPress Child Themes and redesigning your blog the smart way—leaving the original parent theme files untouched.

And if you haven’t heard about WordPress Child Themes before, make sure you take a look at my post on How To Protect Your WordPress Theme Against Upgrades. I go through a quick primer on them and how to get started using them (along with some useful tips on using Plugins).

First, Make a Functions.php File

Currently, only two overriding files are recognized in WordPress Child Themes, style.css and functions.php (unless my proposal for 2.7 makes it in). You can do a lot with CSS alone but with functions.php your theme can interact with WordPress just like a plugin.

First things first: make a file in your Child Theme folder called functions.php and add the PHP opening and closing tags to the first and second line (<?php and ?>) using your favorite text editor (I use Smultron). Make sure you don’t have any extra lines before or after these tags. We’re going to be inserting the following snippets of code on the lines in-between these tags. Now you’re ready to make your WordPress Child Theme sing.

… not literally, of course. That would be annoying.

How To Add a Favicon To Your WordPress Child Theme

It seems that lately no blog is complete without it’s own favicon, that odd little doo-dad that shows up in the address bar of your browser. Making one is another story entirely but here’s how I added one to my Child Theme by adding in a <link> tag to wp_head in the Parent Theme.

function childtheme_favicon() { ?>
    <link rel="shortcut icon" class="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico">
<?php }

add_action('wp_head', 'childtheme_favicon');

Take a close look at that function and action in the example above. We made a new function, childtheme_favicon; added some code inside it—the sort of thing you’d see in any old WordPress theme—wrapped in braces and PHP tags ({ ?> and <?php }); and then used add_action to add it in to wp_head, found in the header.php of all good WordPress themes. You can do a lot with this technique. In fact, we’re going to use it in the next example.

How To Add a Custom Stylesheet To Your WordPress Child Theme

Here I’ve used IE Conditional Comments to load a separate stylesheet that will deal directly with some of IE’s, er, pleasant quirks. All you need is a stylesheet called ie.css in your Child Theme directory and, well, to be frank, a lot of patience for dealing with Internet Explorer.

function childtheme_iefix() { ?>
    <!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" class="<?php echo bloginfo('stylesheet_directory') ?>/ie.css" />
    <![endif]-->
<?php }

add_action('wp_head', 'childtheme_iefix');

If you follow the basic idea here you can do more than just cram your theme into Internet Explorer’s constricting mold. Throw in some WordPress conditional tags and you can start to do something really fancy; loading custom stylesheets for different sections of your site and making your theme look different on every page.

How To Customize Your WordPress Child Theme Menu

My last item here will only work with Thematic and The Sandbox (or any Parent Theme that filters it’s menu). Sorry, that’s just the way it is. Luckily, this technique is super-powerful and a real life-saver when it comes to creating a custom Child Theme that you can actually use on your site.

What we’re going to do is create a custom menu for our Child Theme that only shows the pages we want to see. Even better, I’ve got two ways for you to do it.

Custom Menu One: Modify The Page Output

Our first method involves limiting the pages output by wp_list_pages. It’s pretty simple (and will sound more complicated than it actually is). What I’ve done here is copy the original sandbox_globalnav function from sandbox-functions.php in the Thematic library directory and made it into a new function called childtheme_menu. Then I made one small change to the innards of it: I told WordPress to include only pages of a specific ID. Take a look at the code below.

function childtheme_menu() {
	$menu = '<div id="menu"><ul>';
	// Note the include below. It only shows pages with those IDs. Change the ID number to whatever you like.
	$menu .= str_replace( array( "\r", "\n", "\t" ), '', wp_list_pages('include=24,27,28&title_li=&sort_column=menu_order&echo=0') );
	$menu .= "</ul></div>\n";
    echo $menu;
} 

add_filter( 'wp_page_menu', 'childtheme_menu' );

Did you see the include=24,27,28 in the code? That’s all there is to it. You can read more about what you can do with wp_list_pages in the WordPress Codex.

Custom Menu Two: Make It Totally Custom

In the following example I’ve again filtered sandbox_globalnav but this time I’ve adapted some code from Building a Dynamic WordPress Menu to create a completely custom menu. This gives you total control over your blog’s menu and—besides being my preferred method of WordPress menu creation—is the method I used on this very blog.

function childtheme_menu() { ?>
<div id="menu">
<ul>
	<li class="<?php if ( is_page('about') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a class="<?php echo get_option('home') ?>/about/" title="About This Blog">About</a></li>
	<li class="<?php if ( is_page('advertising') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a class="<?php echo get_option('home') ?>/advertising/" title="Advertise on My Blog">Advertise</a></li>
	<li class="<?php if ( is_page('contact') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a class="<?php echo get_option('home') ?>/contact/" title="Contact Me">Contact</a></li>
</ul>
</div>

<?php }

add_filter( 'wp_page_menu', 'childtheme_menu' );

More On WordPress Parent-Child Themes

I’ve not come across a lot of info on WordPress Parent-Child Themes so I’m guessing you haven’t either. To correct that, here’s some more information on WordPress Parent-Child Theming and what you can do with it (I’ll keep adding to the post as I find more info—feel free to alert me in the comment section). Have fun!

How To Modify WordPress Themes The Smart Way—My comprehensive post series on WordPress Child Themes.
The WordPress Codex—Specifically, the section that talks about defining a parent theme
Designing For The Sandbox—Scott Wallick, creator of The Sandbox, on what you can do with a Child Theme (he calls them Templates)
How To Protect Your WordPress Theme Against Upgrades—My post on WordPress Child Themes
Child Themes in WordPress 2.7—My Trac Proposal for WordPress 2.7 that outlines the current benefits of Child Themes and how they can be made even better
Creating WordPress Child Themes—from WangenWeb

124 thoughts on “How I used a WordPress Child Theme To Redesign My Blog”

Jeffro2pt0 on July 3, 2008 at 4:02 am said:

I’ve never heard of parent-child themes before. If I get this straight, could I use one theme for my main site and actually define other themes for various parts of the parent theme? Would this be a cool way to use more than one theme at a time on a wordpress powered site?
Ian Stewart on July 3, 2008 at 5:06 am said:

A Child Theme inherits all the template files of the Parent Theme—except for style.css and functions.php, which take precedence over the original. In my case here I’m using a Child Theme called Hanzo that modifies my theme Thematic. When I update Thematic in the future (or like I just did—using the trunk version) I don’t have to worry about any changes made to the Parent Theme overwriting my modifications. Check out the links at the end of the post for a better idea of what you can do with Parent-Child themes.
Justin Tadlock on July 3, 2008 at 4:04 pm said:

Man, I gotta catch up with you on this. I’ve started building my framework based on a couple of my themes’ functions, but it’s slow-going right now.

I’m really just waiting for your Trac ticket to make it into core. Then, I’ll be set.
Ian Stewart on July 3, 2008 at 4:06 pm said:

I really think that trac ticket is going to make life way easier for people like you and me (and a whole lot of other people). I wish I knew how to solve the new custom page templates problem though.
Alister Cameron // Blogologist on July 3, 2008 at 7:19 pm said:

Ian,

WP deprecated bloginfo(‘stylesheet_directory’) in 2.3.1

And as a consequence, we have no WP variable to tell the difference between the child theme and the “foundation” theme, as we once did.

How do you get around this, or are you asking WP to put stylesheet_directory back in??

Cheers,

-Alister

—
Alister Cameron // Blogologist
www.alistercameron.com

Mob. 04 0404 5555
Fax 03 8610 0050
Ian Stewart on July 3, 2008 at 7:32 pm said:

You know, I totally forgot about that. I wonder what’s happening with that.

Anyway, <?php bloginfo('wpurl'); ?>/wp-content/themes/your-child-theme-directory-name-here/whatever.something should work too.

Alister, you put your fax number in your blog comments? Isn’t the fax machine deprecated?
Lloyd Budd on July 3, 2008 at 10:03 pm said:

This is a brilliant article, but it seem like it may be missing the most important detail. How you identify the “parent theme”. Your article ends with ” Designing For The Sandbox—Scott Wallick, creator of The Sandbox, on what you can do with a Child Theme (he calls them Templates)”. It seems more correct to say that Template is what WordPress calls them. It is the Template parameter in the style.css that you use to identify the theme the current theme inherits from.
Ian Stewart on July 3, 2008 at 10:12 pm said:

Well…

The WordPress codex explains the Template parameter thusly, “Template: use-this-to-define-a-parent-theme–optional” and then goes on to say…

Hey, waitaminute it actually says Child Theme in the codex now…

Note that specifying a parent Theme will inherit all of the template files from that Theme — meaning that any template files in the child Theme’s directory will be ignored

When did that happen? I swear it didn’t say that before. I was all ready to argue my case, pointing out how Template would be a confusing term and how if you’re defining a Parent for your theme that makes your theme a Child.
Ian Stewart on July 3, 2008 at 10:15 pm said:

… and I’d pointed out how to define a parent theme earlier. Which is a bad blogging mistake, assuming continuity in readership. Thanks for pointing that out, Lloyd. I’ve amended the post.
Pingback: CodeScheme » WordPress theme framework
Pingback: WordPress Weekend Resources - July 4, 2008 | Theme Lab
John on July 4, 2008 at 7:16 am said:

Hi Ian,

Great post! I really like your idea of “theme frameworks” btw, and have put in my vote on Trac.

Just a few coding things I noticed — as an FYI, this code is redundant:

echo bloginfo('stylesheet_directory')

The bloginfo function already echo’s the result (the get_bloginfo function returns it, however), so there’s no need to add an extra echo statement in there.

Also, I think this code would need to be outside the function declaration instead of inside it:

add_filter( 'sandbox_menu', 'childtheme_menu' );

@Alister: Thanks for pointing out the stylesheet_directory deprecation; I didn’t know that. No problem, we can just use this code instead:

echo dirname( get_bloginfo('stylesheet_url') )
Pingback: Redesign Your Wordpress Blog The Smart Way | CSS-FAQ
Ian Stewart on July 4, 2008 at 7:36 am said:

Thanks for catching my coding gaffes, John. And for the vote of support on the Trac proposal.

I’ll take your advice and clean up my code.
Samir on July 4, 2008 at 2:45 pm said:

Hi,

Very good post i may need this in my development too.Tanks a bunch for the knowledege.

Regards,
Sam.
Alister Cameron // Blogologist on July 4, 2008 at 8:59 pm said:

My feeling is that in future — as rightly predicted and advanced by Ian — the notion of parent/child themes will settle down as a ‘standard’. Now, if that is true, I think the child theme deserves its own bloginfo variable/s.

I would want to suggest that John’s

echo dirname( get_bloginfo('stylesheet_url') )

is just too obscure. I am no programmer but I personally think that what’s being discussed here regarding bloginfo speaks to a bigger issue with WordPress as a whole: there is no structured approach to WordPress variables, and no standardization on how to call them up.

Why not borrow some OO thinking here? I’d like to see all theming related variables in a “class” which the themer can extend to at will. No more of one set up variables for WordPress core, and then an “options” approach to theme-specific variables. Damn, I wish I could express myself properly in programming-speak.

What I want is proper object-orientation to WordPress data so that I can extend and customize thru my theme as I please. I know PHP is not Java and I know there are relatively few classes in WP, but I’d suggest that the most muscley bits of WP code are the ones that are written as classes, and since it’s in this whole area of templates, themes and such that most WP users DO want to customize and extend, why is it not precisely HERE that we design a more OO structure to it all so that there is a much cleaner and more structured approach to handling the data and the customization?

Maybe I’ll just go ahead and make a start myself…

Cheers,

-Alister

—
Alister Cameron // Blogologist
www.alistercameron.com

Mob. 04 0404 5555

(Fax removed at Ian’s request!!! Ha ha)
Jenny on July 4, 2008 at 9:07 pm said:

I still don’t get it.
Alister Cameron // Blogologist on July 4, 2008 at 9:17 pm said:

To Jenny and those who don’t get it…

Download and install the Sandbox theme. Then download and install any of the themes that were entrants in the sandbox theme competition at sndbx.org.

When these are installed, they “require” the sandbox theme. They indicate this (as Lloyd explains above), by using a “WordPress template declaration” at the top of their style.css file. It’s something WordPress looks for and knows what to do with.

Here’s what an example template declaration thingy looks like:

/* THEME NAME: Your Child Theme Name Here THEME URI: www.your-domain-here-if-you-promote-your-theme.com/theme-location DESCRIPTION: A description of your child theme. VERSION: your version number here AUTHOR: Your Name Here AUTHOR URI: your-domain-here.com/ TEMPLATE: sandbox (or vanilla, or thematic, etc) */

Stick that at the top of your theme’s CSS file. Stick that in a folder called, say, MyTheme, and when you look in the WordPress Admin’s theme page, you’ll see MyTheme as an theme choice to load. Assuming you have Sandbox in there, and you click MyTheme, it will load and will apply YOUR CSS file, instead of the default Sandbox one, altho it will use all the Sandbox theme/template files instead of yours. It will also override functions.php if you have a file by that name in your theme folder.

That’s brief, but I hope illuminating.

Ian, these two comments amount to more blogging on your site in one day, than on my own blog in the better part of two months!! Nuts.

Cheers,

-Alister

—
Alister Cameron // Blogologist
www.alistercameron.com

Mob. 04 0404 5555
Fax 03 8610 0050
Allan Cole on July 5, 2008 at 12:27 am said:

This will make life soooo much easier in the long run. I’m surprised this technique isn’t talked about more often.

I think I may know of a temporary work-around for the trac issue if I understand it correctly. I stumbled on an ancient plugin code over at wpelements.com that might do the trick. I’ve written about it here, but it basically gives you a way to redirect your post template files based on the post’s category or ID #. Not being a PHP expert I would assume that you could simply edit the return TEMPLATEPATH . to point to the child theme directory (if necessary). Also, I’m pretty sure you could get away with adding this tiny bit of code to the functions.php file itself rather than taking the plugin route. I could be way off with this as I haven’t had anytime to actually test this work-around out.

Lastly, Ian I love the new redesign (I suffered from redesign syndrome myself). Avenir is a lovely typeface, and it sits nicely inside of that 960 grid you have going on. PROPS.
Kristin K. Wangen on July 8, 2008 at 10:08 am said:

Is it just bloginfo(‘stylesheet_directory’) that’s deprecated? Because I didn’t find any place that said that get_bloginfo(‘stylesheet_directory’) is.

But: You can use get_stylesheet_directory_uri() if you need the url to the style only theme, and get_stylesheet_directory() for the path.

ThemeShaper

Home of the Automattic Theme Team