design@brightcherry.co.uk
Call us on   01279- 729075

I’ve had a few people ask me how they can link an image into a theme. Apparently they’re having problems finding the relevant path, no matter how many directories they go in and out of E.g “../../../images/mainimage.jpg”

The Problem

As a result, you’re left with something like this:

Missing image

It sounds like an unbelievably simple problem, but I think it’s it’s actually quite a common hurdle for many people who are just starting to develop WordPress themes. So for example, let’s say you’re creating a theme, and you want to display a logo. First you’d upload the image into the image folder, and then you’d type something like this:

1
<img src="blog/wp-contents/themes/mytheme/images/mainimage.jpg" title="" alt=""

Of course, if you try that path, it won’t work, no matter how many directories you escape. The problem is that the WordPress htaccess file is redirecting the directory and making it impossible for you to get the file.

The solution is simple

1
<img src="<?php bloginfo('template_directory'); ?>/images/mainimage.jpg" title="" alt="" />

Yup, it’s as easy as that.

All you need is

1
<?php bloginfo('template_directory'); ?>

This blog post was written on 19 Sep 2008 by Maruf, and has 66 Comments so far

  1. Nicholas Reed
    25/09/2008

    Hey man, you just saved me, I’ve just started developing a theme and this is exactly what I needed, spent about 30 minutes on it!
    thanks dude.

    is that you in the picture, your pretty good looking.

  2. Maruf
    25/09/2008

    Hey,

    Glad I could help.

    And yup, that’s me! Thank you very much! :)

  3. Debbie
    16/10/2008

    Thank you! That is soooo helpful.

  4. Rhianon
    26/10/2008

    THANK GOD. I spent 2 days googling for a way to solve this (and i’m usually pretty good at google-fu). THANK YOU.

  5. Long Hoang
    16/12/2008

    Thanks!

  6. Steve
    18/02/2009

    Thanks – I love it when people post little, simple things like this, amazingly helpful.

  7. carlosvm
    23/03/2009

    Thanks!!

  8. andiszek
    01/04/2009

    thanks a lot, your tip just saved me. i was playing around with my first WP project on Localhost and the images would not show up.

  9. cynthia
    07/04/2009

    So awesome! I was having issues with things not showing up. Will definitely keep a bookmark of this, lol.

  10. Rizwan
    02/07/2009

    I was getting frustrated with images not showing up in certain pages. Now I know what the correct way to reference an image is. Thanks.

  11. Jon
    17/07/2009

    I stumbled on this while doing subpages, and almost ended up using not-so-nice absolute urls. Thanks a bunch on his tip!

  12. Oliver
    21/07/2009

    Thanks for the tip!

    One thing though, how would I link to images in the theme files which were outside of the theme directory?

    for example an image which is at

    /images/someimage.png

    With the url:
    http://www.example.com/images/someimage.png)

  13. bulvadesign.com
    06/08/2009

    Thx a lot man. Very helpful for WP newbee like I am.

  14. arnaud
    31/08/2009

    Try : folder_image();
    it works better ;o)

  15. Référenceur Freelance
    17/09/2009

    Thanks Maruf, just writting my first theme and this saved me some digging around.

    Arnaud, your solution doesn’t work for me :)

  16. cristian
    13/10/2009

    i really really love your post. you saved me a lot of time. i might have never figured this out.

  17. Letsnurture
    16/10/2009

    Hi great solution.

    I’m fledgling to word press. And what all I’m doing is customizing a new theme.

    Till now i had been using the static path to my current theme everywhere.

    Thanks,
    Sachin Pethani
    http://www.letsnurture.com

  18. Gary
    18/11/2009

    Thanks a lot mate. You made my day.

  19. wes
    19/11/2009

    Like many of these posters, I thank you. Keep up the good work!

  20. Alan
    10/01/2010

    Thanks so much. I spent hours a few weeks ago trying to figure it out and eventually just started using empty divs with CSS images and accessing all of my html images through the website URL. ha! Newbies.

  21. Andy
    12/01/2010

    Man, you dont know how much time it took me to find this information on the net. I couldnt figure out the he** was going on, i appreciate the post, good stuff man!

  22. Carole Hayes
    27/01/2010

    I swear, my blonde hair goes straight into the center of my brain sometimes, because this is working for everybody else, and I can’t get it to work for me!

    Can you please help me figure out what I’m doing wrong??

  23. Carole Hayes
    27/01/2010

    Okay, my husband figured it out!

    It was a punctuation error…. I think there was an extra quote or something equally stupid.

    Thank you for putting this out there for those of us who are clueless about such things! : )

  24. Vanessa
    29/01/2010

    Thank u! u save my life!

  25. Karlos
    04/03/2010

    Awesome awesome awesome :)

    Just started re-designing my blog, decided to go for a completely new template build, rather than template “hack” – this simple trick saved me heaps!

    LEGEND! ;)

  26. RiaanWest
    09/03/2010

    Thanks for this man, helped me a lot!

  27. Daniel
    20/05/2010

    Any idea what to do for swap out mouseover images? (onmouseout=”MM_swapImgRestore()”) Obviously the java doesn’t like the PHP call. Can I just not use a swapImgRestore in WordPress? Is there a better way to do pre-loading (cached) mouseover in WordPress? Thanks for your tips and help!

  28. Dave
    07/06/2010

    This just saved me a lot of head scratching. Thanks!

  29. Rhys
    04/07/2010

    spent way too long tring to figure this one out! Nice post, thanks alot!

  30. daniel
    06/07/2010

    Any ideas on the java/mouseover thing? Dreamweaver utilizes a java script for mouseover events. The PHP path won’t work in a Java script, so you can’t have mouseover events in WordPress using the method you suggest.

  31. Mazy
    17/07/2010

    Love you man!

  32. Solutions in Design
    20/07/2010

    Hey thanks a lot man!!! Nice site design by the way.

  33. Jared
    22/07/2010

    Thank you for the clear and simple solution sir.

  34. No
    31/07/2010

    Just what I was looking for :) Thx !

  35. HipHopZen
    06/08/2010

    Thank you!

    Have a good karma.

  36. jesuda
    21/08/2010

    Thanks dude.. very quick fix

  37. Fernanda N
    24/08/2010

    thank you so much!
    i’ve been looking for this code for days and finally found it here! thanks for the tip! =D

  38. 15/12/2010

    Ahhh, better than advil. Thanks for relieving my pain!

  39. Dan
    20/12/2010

    Thanks a lot! This is exactly what I was looking for.

  40. HDDesigns
    31/12/2010

    Not working in stylesheet file.

    body {
    background-image:url(“/images/bodybg1.png” title=”” alt=””);
    background-repeat: repeat-x;
    background-color:#1f1f1f;
    }

    Any help will be appreciated…
    Thanks

  41. Maruf
    04/01/2011

    Hey HDDesigns,

    Remove the “title” and “alt” tags from the background-image property. They’re not valid!

    So it should be:
    background-image:url(“/images/bodybg1.png”);

    Regards

  42. thank you for this code.

  43. rafat
    17/01/2011

    Thks a Ton dude

  44. 08/02/2011

    THANK YOU x 1,000,000,000,000! I’m new to working in WP and it has been an uphill climb

  45. Tracy
    17/03/2011

    oh my god i love you! i have been pulling my hair out for hours trying to figure this out!

  46. Kristy (Malaysia)
    04/04/2011

    Thank you! I was searching for this and it really helps!!

  47. Kristy (Malaysia)
    04/04/2011

    Oh, I hit a road block. I am using a twentytenchild template and have customised the loop.php. But no matter what I do, bloginfo(‘template_directory’) displays the main twentyten url for images. I don’t get it cause the other files work fine. Any ideas?

  48. 19/04/2011

    Exactly what I needed. Thanks a lot for the info!

  49. 19/04/2011

    If you’re working with child themes you must change ‘template_directory’ to ‘stylesheet_directory’.

  50. Gregg
    04/07/2011

    Thanks so much! Much head-to-desk thumping avoided!

  51. 12/09/2011

    Thanks! Works perfectly. Now I know how to do it the right way. ;)

  52. 30/09/2011

    i spent the whole day finding for answer! really it took me all day! thanks to you i found the answer!… i dont know the keyword to use to search the answer … magically i thought of searching wordpress image path.. and then i found your blog… im very relieved

  53. Vasim Padhiyar
    01/11/2011

    Thanks mate

  54. GraphicSamurai
    31/01/2012

    This is a great tip thanks man! i was wondering, I noticed that this does not work in posts or pages. I am designing a theme and would like to call to images in the theme directory from posts and pages so when someone uses the pre-made theme, they can just copy and paste some pre-made pages I have that come with the theme. Any idea on how I can do this?

    Regards,
    GS

  55. nicole
    11/04/2012

    How would you make this a clickable image with a target_blank? I can only get the image to show if I use this code in a div:

    If I add the icon images to the images folder within the child theme and integrate the code that you suggest the image does not show. I have also changed “template” to “stylesheet” per your suggestion under one of the comments above, but still nothing will show up.:

    <img src="/images/gplus-icon-small.png” title=”” alt=”Add MySite on Google+” />

    I would just use the first piece of code I posted above where the image does show, but I’d like for everything to be contained within the images folder of the theme itself. Also, I need for this image to be a link that opens with a target=”_blank”, but it doesn’t seem to make a difference where I place this code as it still doesn’t work.

    Help? Ideas?

  56. 11/05/2012

    Hah! This article is so old, but you still helped me out with this one. Wow, there is no where on the internet that explains this as simply as you did. I was having a lot of trouble thinking of what to search for in Google to find the answer to this, but apparently you explained in simple enough terms that I was able to find it, even when I wasn’t sure exactly what to look for.

    Thank you!

  57. 28/07/2012

    i have to load an image online from a site using WORDPRESS function anybody is here to help out me in this regard

    thnx in advance

  58. sabbirshuvo
    20/09/2012

    Thx for the tip. its working.

  59. 18/10/2012

    Wow! You saved me! I’ve spend 2 days trying to figure this out and for some reason I cannot access the WordPress Website for help – thank you so very much!

  60. Jon
    30/10/2012

    Especially liked the comment relating to child themes, which is what I am trying to do. It worked! Thanks!

  61. 17/01/2013

    Thanks, quick and easy. Much appreciated!

  62. Neo
    12/06/2013

    I love you haha i’m searching 4 this in the Codex and find nothing, thank you.

  63. Rod
    19/06/2013

    Thanks Man! works great

  64. 13/08/2013

    thank bro

  65. Julie
    28/10/2013

    Thanks for this – I’m sure this info is in the Codex but finding anything in there is a pain in the arse lately! You picked out just the one line I needed :)

  66. 14/11/2013

    Thank you!!! You have saved me a lot of time… :)

Learning & sharing

This is where we store some of our Web Development thoughts, tips and tricks for both our own uses and for others to learn from. Sharing is caring.

Please feel free to contrinute to our blog posts; perhaps even teach us a few tricks of your own. We'd love to hear your thoughts.

Social

Feel free to share this blog post and/or subscribe to our RSS feed :)