WordPress bloginfo – template_directory vs stylesheet_directory

In a previous post I talked about WordPress Child Themes. One question I have seen asked a lot is when to use bloginfo(‘template_directory’) and when to use bloginfo(‘stylesheet_directory’). Template directory will return the directory of the active template – not the active theme. When creating a child theme you declare the parent theme by setting “Template: ” in the style.css comments. With this in mind it makes sense that bloginfo(‘template_directory’) will return the directory of the parent theme. Stylesheet directory returns the directory of the active stylesheet, which is in the child theme. When writing a child theme you should (almost) always use bloginfo(‘stylesheet_directory’) so that you get the directory of the theme you are working in.

Recently I got a project to create a seasonal (holiday) child theme for a site. I noticed the parent theme made frequent use of bloginfo(‘template_directory’). I wanted to replace images hard-coded into the parent theme’s template (such as logo, social media icons, etc). As mentioned above, template directory returns the directory of the parent theme, even when using a child theme. I could duplicate the template (header.php in this case) in the child theme directory and then modify it accordingly but that poses a few issues. What if the parent theme is modified in the future? The parent theme is a custom theme and I am not replacing it indefinetly. When Spring comes back around and the parent theme is activated (and possibly modifed) I don’t want to have to duplicate and modify these templates every time the child theme is re-activated.

The goal: update bloginfo(‘template_directory’) to bloginfo(‘stylesheet_directory’) without duplicating the parent theme’s template files in the child theme. The WordPress Codex has a list of available filters. Luckily for us bloginfo is on the list of filters. Unlucky for us there is a lack of documentation and example code at this time but we can get some clues from the descriptions of the bloginfo and bloginfo_url filters.

The bloginfo filter description says:

applied to the blog option information retrieved from the database by the bloginfo function, after first retrieving the information with the get_bloginfo function. A second argument $show gives the name of the bloginfo option that was requested. Note that bloginfo(“url”), bloginfo(“directory”) and bloginfo(“home”) do not use this filtering function (see bloginfo_url).

The important part here is the argument $show which can receive a value of “directory”. It also says “directory” is handled by the bloginfo_url filter so let’s check that out.

applied to the the output of bloginfo(“url”), bloginfo(“directory”) and bloginfo(“home”) before returning the information.

Now that we have a few basic clues let’s write the function and hook it to the bloginfo_url filter.

[code language=”php”]
<?php
/* start if replace_template_directory_with_stylesheet_directory function does not exist */
if( !function_exists(‘replace_template_directory_with_stylesheet_directory’)):
/* declare replace_template_directory_with_stylesheet_directory function function with two variables, $text and $show
* $show is the parameter passed to bloginfo
* $text is the value returned from the database
*/
function replace_template_directory_with_stylesheet_directory($text, $show){
/* if $show equals “template_directory” then modify $text to be the value of bloginfo(‘stylesheet_directory’) */
if( $show == ‘template_directory’ )
$text = get_bloginfo(‘stylesheet_directory’);
/* return the value of $text */
return $text;
/* end replace_template_directory_with_stylesheet_directory */
}
/* end if replace_template_directory_with_stylesheet_directory function does not exist */
endif;
/* hook replace_template_directory_with_stylesheet_directory function into the bloginfo_url filter */
add_filter(‘bloginfo_url’, ‘replace_template_directory_with_stylesheet_directory’, 10, 2);
?>
[/code]

Note: This should be placed in your child theme’s functions.php file. Having trouble seeing it here? The code is also a gist on github.

In my sample project social media icon images in the parent template template have an image source like this

[code language=”php”]
<?php bloginfo(‘template_directory’); ?>/images/icon.png
[/code]

which returned something like this

[code language=”php”]
http://www.domain.com/wp-content/themes/parent-theme/images/icon.png
[/code]

after our filter those paths now look like this

[code language=”php”]
http://www.domain.com/wp-content/themes/child-theme/images/icon.png
[/code]

Mission accomplished. Just note that you will need all images (or other resources called with template directory) used by the parent in your child theme directory. For this project that is exactly what I wanted since I was replacing logos, icons, etc. with holiday-themed versions. WordPress filters are very powerful. This is just one example but if you are editing files directly I challenge you to find a filter and make changes that way.