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. 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?

  2. 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.

  3. 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.

  4. 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.

  5. 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
    http://www.alistercameron.com

    Mob. 04 0404 5555
    Fax 03 8610 0050

  6. 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? ;)

  7. 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.

  8. 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.

  9. Pingback: CodeScheme » WordPress theme framework

  10. Pingback: WordPress Weekend Resources - July 4, 2008 | Theme Lab

  11. 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') )

  12. Pingback: Redesign Your Wordpress Blog The Smart Way | CSS-FAQ

  13. 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.

  14. 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
    http://www.alistercameron.com

    Mob. 04 0404 5555

    (Fax removed at Ian’s request!!! Ha ha)

  15. 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: http://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: http://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
    http://www.alistercameron.com

    Mob. 04 0404 5555
    Fax 03 8610 0050

  16. 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.

  17. 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.

  18. My very first look at parent-child theme. Now I know what function.php is meant for =)

    Currently, I just have the custom tags lying in header.php …

  19. @Alister » Thanks for the extensive comments. The OO is (currently) completely over my head but I’m interested. Plus, blog more already. :)

    @Allan » I’m going to fool around with that code and see what I can do with it. Thanks for pointing that out.

    Lots of awesome comments on this post. Thanks a lot everyone.

  20. Pingback: More on Child Themes

  21. Pingback: Multiple Thesis Uploads for WPMU installation. - DIY Themes Forums

  22. Pingback: 10 design tips for your custom wordpress theme built with thematic

  23. Ian, I just wanted to say you have done a magnificent job building Thematic. If is one of the most well coded themes I have seen and I have seen many. That it is a theme framework as well only makes its potential stronger and much more interesting. I will keep this short because I want to write you a longer message to discuss some things about the fundamentals of Thematic with you and this comment box isn’t going give me enough room for it. Nonetheless, please look for my email shortly and accept my profound thanks and congratulations for your diligent and elegant work.

  24. Pingback: A Super Theme: Thematic, The WordPress Theme Framework | WP Remixx

  25. Pingback: Five clean, minimalist themes for WordPress - op111.net

  26. Pingback: IAMWW » Calf-Point WordPress Theme

  27. Pingback: How to make a “child theme” for WordPress. A pictorial introduction for beginners - op111.net

  28. Pingback: Josh Pesavento » Blog Archive » New theme!

  29. Pingback: New theme | Only Network

  30. I just started playing with child themes and something very funny is happening to me…

    After I activate the child theme, the theme declaration at the styles file (the comments defining the theme info) are disappearing.

    Has anyone seen something similar?

  31. so child themes are for circumventing the theme-modified-and-broke problem (or my-mods-got-wiped-when-i-updated). unless the theme has a built-in styling options.

    but from the name, “child theme”. i assumed it would take/overide-with any template files in the child theme… just like your trac ticket said. hope it gets through! (how do i vote for it?)

  32. Pingback: My first WordPress child theme -OR- quirks in WordPress style.css parent references

  33. Pingback: Introduction to WordPress Child Themes | BrokerAgentTech.com

  34. Pingback: Who told you that it should be easy…? - Moonlit Minds

  35. Pingback: The Problem with Child Themes | Pat Dryburgh

  36. Pingback: Changes… again! | Moonlit Minds

  37. Pingback: Finally pink

  38. de says:

    I apologize if this question is way off base for this post, I will try to make my point quickly. It was always my intention to create a customized theme, I’ve done that with thematic. It has also been my intention to integrate zenphoto into my wordpress blog.
    With my theme near completion I began looking at what needs to be done to integrate the image gallery, the problem is that the instructions are likely intended for a non-childtheme.
    So to the point, would I be able to add a link to my wp menu that would take visitors to my zp gallery and then bring them back to the blog if I import the wp menu to the gallery? That seems more like custom option 2 but it looks like I need to do more research. Second question, where can I read more on this. I like your writing style but if you haven’t written the post then I probably need to find it somewhere else.

    thanks

  39. Pingback: WordPress themes for developers | geek ramblings

  40. Pingback: Installing Wordpress Child Themes and Customizing the Byty Theme | Cozmoslabs

  41. Pingback: Redesigning Pop Critics with a WordPress child theme: Part 1

  42. Pingback: Why New York Tech Scene

  43. Pingback: Parent/Child Themes in WordPress: The Future of WordPress Themes « Lorelle on WordPress

  44. Pingback: Thematic - A problem with php

Comments are closed.