Adding an image to a child theme template (e.g. header/footer) in WordPress

Child themes in WordPress are great, because they allow you to modify a theme without making changes to the theme’s core code, which makes things much easier when the theme gets updated – you don’t have to redo all of your changes.

I wanted to add an image to a custom footer template in a child theme (created by copying footer.php from the parent theme). I’d created an images directory in my child theme and put my image there, but was struggling to generate the correct link to the image.

After a bit of searching, I found this suggestion:

<img src="<?php echo get_template_directory_uri(); ?>/images/image.jpg" />

However, this was pointing to the image directory in the parent theme, not the child theme. Further searching led me to this blog: How to load files within WordPress themes, which had the answer (and explains things in more detail):

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/image.jpg" />

The basic difference, when using a child theme, is this:

• Template refers to the parent theme
• Stylesheet refers to the child theme

More information on the get_stylesheet_directory_uri() function can be found here: http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

Note: an alternative is to use the bloginfo() function (echo is not needed), as follows:

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/image.jpg" />

However, it turns out that this is just an indirect way of calling get_stylesheet_directory_uri(), via get_bloginfo() in wp-includes/general-template.php. Both are included in the codex, so I don’t think it really matters which you use.

Another note: Dropping the _uri from the end of the function (i.e. get_stylesheet_directory()), will return the absolute server path to your child theme stylesheet directory, which can be used for including a another php file, e.g.

<?php include( get_stylesheet_directory() . '/includes/myfile.php'); ?>

More on this here: http://codex.wordpress.org/Function_Reference/get_stylesheet_directory