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: Word is Born. » Free Wordpress Child Theme: Boumatic

  2. Pingback: Website Re-design | Hardian Nazief

  3. Pingback: A Collection of 15 Useful WordPress Tutorials for 2008 » Papertree Design

  4. Pingback: WordPress News: WordPress 2.7 New Login, WordCamp Australia, WordPress 2.6.5 Security Update, BuddyPress, and More | The Blog Herald

  5. Pingback: 2009 Redesign | Sea Slugs! Anime Blog

  6. Pingback: 20 Expert Wordpress Tips for Pro-Developers | StylizedWeb.com

  7. Pingback: Theme Playground | Who’s Who in WordPress (50+ people you should be following)

  8. Pingback: What ? A new theme ?

  9. Pingback: Arras.Theme Update: Single Post | zy.sg personal.portfolio.iv

  10. miguel says:

    to use the custom menu, I only need to add that code do the functions.php in the child theme? or I need to change something in the header?

    cause ive changed my functions.php and its not showing up.

    any clue?

    really BIG thanks.

  11. Pingback: Child Themes | The Daily Flash

  12. Pingback: ||–::DaKi::–|| » Blog Archive » Who’s Who in WordPress (50+ people you should be following)

  13. Thank you for this great lesson.
    A question, please: no conflict with plugin and his css?
    Thanks

    p.s. “Subscribe without commenting” what plugin is?

  14. Alexa says:

    Hi – I didn’t discover this until I have made changes to the parent theme. Can you tell me the easy way to take basically the entire theme I have now and make it the Child Theme? Then, I can reinstall the parent clean – I have the files as actually an update was just released and that’s what made me realize my mistake. I am using the premium theme Mimbo Pro 2.0 and they pointed me to your site.

    I just need what’s currently live to become the child theme, then I’d be able to move forward with updates. Thanks for the help – Alexa

  15. Pingback: diigo 04/10/2009 (a.m.) | synapsenschnappsen

  16. Pingback: Wordpress-only 04/11/2009 | synapsenschnappsen

  17. Pingback: Wordpress Theme Frameworks And Starting Resources | 1stwebdesigner - Love In Design

  18. OMG! Setting up a wordpress blog! I decided to install wordpress on my clara hosted server. I wanted a little more flexibility when editing the CSS than i got by setting up a simple free online wordpress blog. Soooo!……eventually i install wordpress open up the interface…setting up the mysql using the wordpress website info is useless…had to go here for coherent instructions http://www.everydayiselectionday.com/2008/07/22/a-beginners-guide-to-installing-wordpress/ The interface all looks very similar….but then…..where is all that ease of use functionality that you get when you sign up for a free blog….GONE! Editing is much more convoluted and involves knowledge of a lot of CSS. What happened?….i even struggle for 8 hours to add a home button to Thematic….Problem is i know this stuff is fairly easy to edit….but no one online is explaining it well enough….for instance i found you code for adding a home button to the functions.php in child theme folder. When i went to add it it was already in there? I didn’t put it there….So now what…so it’s in there already….i still don’t know how to add a home button…..This must one of the simplest things to do….but it’s impossibly hard to find any kind of jargon free explanation. WordPressed?….Depressed!

      • Thanks Ian, actually i ended up making quite a lot of headway today. Initially it’s quite daunting but I’m getting there. Before I embark on trying to find a solution to another problem I have encountered maybe i could ask your advice. I’ve added a ‘home’ button to thematic and when it’s selected it shows all my blogs. Over in the sidebar i have categories/topics buttons. When i click on a topic i get a list of blogs posted in that topic. I would like to see the images associated with these posts but i don’t?

        My question is….is it possible?

        Here is a link to the blog so you can see what i mean…click on ‘Maisie loves’ in the sidebar. http://www.maisiefantaisie.co.uk/blog/wordpress/

      • Hi ,

        im new to child theme actually its my first time to know this. I’m just wondering who to insert certain codes like javascript (adsense ) in your child theme since all i’m seeing is that you just have to create a style.css / function.php

        sorry if my question doesn’t make anysense.

      • Well…..I’ve been looking through the forum and found the advanced-excerpts plug-in which solved my problem nicely. While I’m here I’d like to say thanks for a really stylish blog…….in my opinion it’s wordpress theme I’ve seen. Thanks.

  19. Pingback: links for 2009-05-06 « sySolution

  20. Pingback: 20 Expert Wordpress Tips for Pro-Developers « Internet Turnkey Websites

  21. Pingback: Creating WordPress Child Themes

  22. Pingback: Announcing the relase of CULT[i]VATE child theme for Hybrid — WPCult

  23. Pingback: 13 Tips for Working with WordPress on Client Sites

  24. Pingback: Enlaces en mi del.icio.us, 15 06 2009 | Vectoralia

  25. Trevor says:

    Hey, I have no problem changing the css to customize. But I don’t know much about php. So I’m a little confused about updating the functions.php file. Any tips on where I can go to learn to (ex.) add a Login link to the header, or ul of images in the sidebar that link to Facebook, flickr etc… That type of thing. I can do it in a regular theme when I can just jump in the actual header.php file or sidebar.php file, but using a child theme and a separate functions.php file is where I get stumped. Any help would be appreciated.

    TIA

  26. Okay – I am sold. I have a customized theme (we’ll call it ORIGINAL) done WITHOUT using the child theme approach. How do I back out of ORIGINAL and make my theme a child (DERIVATIVE), without starting over? Could I just change the name of ORIGINAL to SOMTHINGELSE, then create a folder called ORIGINAL, and put the style.css file in that folder?

  27. Pingback: Shakthisoft.net » Blog Archive » Wordpress Themes demystified

  28. Pingback: Removing the Date from Older Posts in WordPress — Good Karma Host

  29. Pingback: Wordpress Themes demystified @ I , Me and Shakthi

  30. Pingback: 8款WordPress主题框架和初学者资源 | 帕兰映像

  31. Pingback: Da importância de conhecer bem o WordPress » Comunidade WordPress-BR

  32. Pingback: Child themes logic flaw or at least I think so | Frank P. Walentynowicz

  33. Hi Ian, I’m currently doing a lot of reading about ‘Theme Framework’ and ‘Parent-Child Theme’ thing … I came across hybrid and eventually found thematic (weird huh, whilst Thematic was born first?).

    Tell me, if I have a lot functions written, should I create another framework?
    If all developers create framework, who will do the design?

    Pleasure to read your stuff Ian, thx

  34. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design

  35. Pingback: 译文:怎样为WordPress制作一个子主题 – 帕尔得

  36. Pingback: Using Child Themes – November 12, 2009 « Portland WordPress User Group

  37. Pingback: Screaming Monkeys Presentation: The Advantages of WordPress as a CMS « Aspiring Indie Portfolio

  38. Pingback: How I used a WordPress Child Theme To Redesign My Blog | WordPress News

  39. Pingback: How To Modify WordPress Themes The Smart Way (by Ian Stewart) « My Graphic Friend's blog

  40. Pingback: Wordpress主题框架 | 伟景博客-膜技术|水处理|节能减排|循环经济|Wordpress|留学生活

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s