Enquiry Email Form

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:

<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

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

Yup, it’s as easy as that.

All you need is

<?php bloginfo('template_directory'); ?>
  1. Nicholas Reed

    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


    Glad I could help.

    And yup, that’s me! Thank you very much! πŸ™‚

  3. Debbie

    Thank you! That is soooo helpful.

  4. Rhianon

    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


  6. Steve

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

  7. carlosvm


  8. andiszek

    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

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

  10. Rizwan

    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

    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

    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


    With the url:

  13. bulvadesign.com

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

  14. arnaud

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

  15. Référenceur Freelance

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

    Arnaud, your solution doesn’t work for me πŸ™‚

  16. cristian

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

  17. Letsnurture

    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.

    Sachin Pethani

  18. Gary

    Thanks a lot mate. You made my day.

  19. wes

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

  20. Alan

    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

    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

    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

    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

    Thank u! u save my life!

  25. Karlos

    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

    Thanks for this man, helped me a lot!

  27. Daniel

    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

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

  29. Rhys

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

  30. daniel

    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

    Love you man!

  32. Solutions in Design

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

  33. Jared

    Thank you for the clear and simple solution sir.

  34. No

    Just what I was looking for πŸ™‚ Thx !

  35. HipHopZen

    Thank you!

    Have a good karma.

  36. jesuda

    Thanks dude.. very quick fix

  37. Fernanda N

    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. 20/12/2010

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

  40. HDDesigns

    Not working in stylesheet file.

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

    Any help will be appreciated…

  41. Maruf

    Hey HDDesigns,

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

    So it should be:


  42. thank you for this code.

  43. rafat

    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

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

  46. Kristy (Malaysia)

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

  47. Kristy (Malaysia)

    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

    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

    Thanks mate

  54. GraphicSamurai

    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?


  55. nicole

    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

    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

    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

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

  63. Rod

    Thanks Man! works great

  64. 13/08/2013

    thank bro

  65. Julie

    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 contribute to our blog posts; perhaps even teach us a few tricks of your own. We'd love to hear your thoughts.