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!

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

  1. Pingback: links for 2010-01-09

  2. Pingback: 10+ Awesome Things I Learned at the Wordcamp Atlanta 2010 « Compassion in Politics: Christian Social Entrepreneurship, Education Innovation, & Base of the Pyramid/BOP Solutions

  3. Hey Ian, I’m a little late getting to this post but found it very helpful. I just want to say I am glad your Trac proposal made it through. Excited about the possibilities by using Child themes.

    By the way, looks like WangenWeb has moved.

    -Josh

  4. Pingback: 20款 WordPress的主题框架及初始资源 | 异次元的乱七八糟

  5. Pingback: WP references / tutorials « Feet up, eyes closed, head back

  6. Pingback: Da importância de conhecer bem o WordPress

  7. Pingback: Child-Themes für WordPress – Eine Einführung (Work in Progress) | Netzgeist V3.1

  8. Pingback: my wordpress.org report « P&I WEB Spring 2010

  9. amber says:

    Thanks for the resource!

    I was a little lost at the very start point for creating child themes, but I worked out;

    If I read this other tutorial first at this address: op111.net/53,
    then read this one on this page, I was sorted out!
    Thanks!

  10. Bronwyn says:

    Please fix your code sample for the IE-only stylesheet! It has a couple small but critical errors that I just spent about an hour tracking down and fixing. If the pattern and number of spaces, dashes etc. in the conditional comment tags is wrong, other browsers will use the IE stylesheet too. Here is a sample that works:


    function childtheme_iefix() { ?>

    <link rel="stylesheet" type="text/css" href="/ie.css" />

    <?php }

    add_action('wp_head', 'childtheme_iefix');

  11. Pingback: 100+ Resources for WordPress Theme Developers | BloggingBlogging.com

  12. Pingback: Child-Theme Challenge | ClassiPress

  13. Pingback: 10 amazing wordpress themes for church websites on studiowhiz.com

  14. Pingback: Those Darn Kids: WordPress Child Themes - CogDogBlog

  15. happy to find your posts about child themes! I am now working with my first child theme for twenty ten and your help saves me a lot of time! cheers

  16. The one thing that bugs me with Child Themes is the fact it reads the Child Theme first and this has some unpleasant side-effects. The main thing that’s bugging me there is when I register a sidebar in a child theme it will put that one ahead of the ones the parent theme has. Upon activation that will mean all the widgets that were in the sidebar of the parent theme will all of a sudden appear in the newly registered one.

    It couldn’t hurt when WP would incorporate something like a slowdown function for these kind of things.

    And of course something like a overwrite function so you can redeclare a function with the same name but slightly altered.

Comments are closed.