How I used a WordPress Child Theme To Redesign My Blog

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" href="<?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" href="/ie.css" />
    
<?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="current_page_itempage_item"><a href="/about/" title="About This Blog">About</a></li>
	<li class="current_page_itempage_item"><a href="/advertising/" title="Advertise on My Blog">Advertise</a></li>
	<li class="current_page_itempage_item"><a href="/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