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
ThemeShaper 
124 responses
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?
A Child Theme inherits all the template files of the Parent Theme—except for
style.cssandfunctions.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.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.
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.
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
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.somethingshould work too.Alister, you put your fax number in your blog comments? Isn’t the fax machine deprecated? 😉
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.
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…
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.
… 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.
[…] the dreaded word “framework” creeps into the WordPress […]
[…] WordPress Parent-Child Themes – I have to admit this is something I didn’t realize you could do with WordPress. This tutorial goes over how to use a WordPress child theme to redesign your blog. If you have no clue what a WordPress child theme is (like I did) I suggest you check out this interesting article. […]
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') )[…] do you do that without messing around with the original Parent Theme? All about this ways in new article by […]
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.
Hi,
Very good post i may need this in my development too.Tanks a bunch for the knowledege.
Regards,
Sam.
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)
I still don’t get it. 😦
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
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.
Is it just
bloginfo(‘stylesheet_directory’)that’s deprecated? Because I didn’t find any place that said thatget_bloginfo(‘stylesheet_directory’)is.But: You can use
get_stylesheet_directory_uri()if you need the url to the style only theme, andget_stylesheet_directory()for the path.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 …
@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.
[…] How I used a WordPress Child Theme To Redesign My Blog The Smart Way […]
[…] number of child themes which largely make use of Thesis but with whatever customizations you want: How I used a WordPress Child Theme To Redesign My Blog The SmartWay __________________ Rick Beckman, a Kingdom Geek My custom.css for Thesis Thesis is worth every […]
[…] 2. Use child themes. This is how things really take off! Child themes in my opinion are the future. 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. From what I’ve head from WordPress version 2.7 it will be possible to overwrite all the template files with your own, making the update of your blog and customization so much easier. (For more informations about child themes visit here and here) […]
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.
[…] start your journey into Thematic click here. addthis_pub = ‘admin@wpremixx.com’; addthis_logo = […]
[…] themeshaper.com/functions-php-wordpress-child-themes […]
[…] Perassi has created Calf Point, a child theme of Sandbox based on Moo-Point. It was not possible to import the slightly changed menu but the CSS […]
[…] themeshaper.com/functions-php-wordpress-child-themes […]
[…] a simpler theme was needed for this site, so I found a fairly basic theme, then modified it using a child theme. The colours come from a photo of mine, and were extracted using the inspiration tool (you can […]
[…] problems. I’m not 100% certain I’ll be keeping this, but I wanted to experiment with child themes and see what benefits they […]
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?
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?)
@Gray: It’s been approved and should be in 2.7.
Hey good advice. I use SM Favicon Generator. This one works great and its fast.
[…] Part of the reason I used Thematic at CircuitDesign.info was because of its ability to do a child theme (See: How I used a WordPress Child Theme To Redesign My Blog The Smart Way). […]
Great post Ian.
We just released a “premium quality” GPL theme a few weeks ago. We have implemented this clever “Child Theme” concept to make it easy for our users to upgrade and customize. Very powerful stuff. I encourage you to take a look:
http://themes.jestro.com/vigilance/
[…] for users who wish to do slight customization without too much hassle you can take advantage of the many tutorials Ian has written on creating child themes. There are even many free child themes of Thematic available including […]
[…] Actually Sakeena is Sandbox’ child’s theme. (Well, I’ve got to know of “child’s theme” thanks to using MNML and visiting the authors blog ThemeShaper). In my opinion, if anybody is interested in the opinion of ordinary user, the concept of such themes is simply great. I have “overheard” that perhaps such themes will made into WordPress 2.7 – I will look forward to it! If you are interested in the concept, please read more on ThemeShaper’s blog. […]
[…] a lot of talk about child themes these days. As the designer of two child themes for the Thematic theme framework, I have fallen in […]
[…] How I used a WordPress Child Theme To Redesign My Blog The Smart Way introduction to functions.php of Child Theme. […]
[…] new theme is called PINKatic [download link], its a child theme of the Thematic theme designed by Pat […]
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
[…] also some child themes available for Thematic which show off how you can really change the layout of a site with nothing […]
[…] WordPress Child Themes are a new concept introduced not a long time ago that allow you to inherit all of the functionality of a parent theme and overwrite the css style, change the images and some parts of the html through the use of functions.php file. We won’t go in a lot of detail on how to create a Child Theme here, but if you are interested and want to find out more please have a look here, here and here. […]
[…] talking a lot lately about how child themes are changing the face of WordPress theme community. Ian Stewart has been letting us in on this little secret for […]
[…] – The current theme is Thematic. The theme has a great structure and it is really simple to create child themes to customize the look. If anyone has any suggestions or would be able to help with the design of […]
[…] How I used a WordPress Child Theme To Redesign My Blog The Smart Way […]
[…] am working on a Child Theme based on the ‘Thematic‘ framework for wordpress. For more information, see the […]