WordPress- Get Image Path Relevant To Theme

Wordpress Tips & Code Snippets

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 spoke on 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 spoke on 25/09/2008


    Glad I could help.

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

  3. Debbie spoke on 16/10/2008

    Thank you! That is soooo helpful.

  4. Rhianon spoke on 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 spoke on 16/12/2008


  6. Steve spoke on 18/02/2009

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

  7. carlosvm spoke on 23/03/2009


  8. andiszek spoke on 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 spoke on 07/04/2009

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

  10. Rizwan spoke on 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 spoke on 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 spoke on 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


    With the url:

  13. bulvadesign.com spoke on 06/08/2009

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

  14. arnaud spoke on 31/08/2009

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

  15. Référenceur Freelance spoke on 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 spoke on 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 spoke on 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.

    Sachin Pethani

  18. Gary spoke on 18/11/2009

    Thanks a lot mate. You made my day.

  19. wes spoke on 19/11/2009

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

  20. Alan spoke on 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 spoke on 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 spoke on 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 spoke on 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 spoke on 29/01/2010

    Thank u! u save my life!

  25. Karlos spoke on 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 spoke on 09/03/2010

    Thanks for this man, helped me a lot!

  27. Daniel spoke on 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 spoke on 07/06/2010

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

  29. Rhys spoke on 04/07/2010

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

  30. daniel spoke on 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 spoke on 17/07/2010

    Love you man!

  32. Solutions in Design spoke on 20/07/2010

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

  33. Jared spoke on 22/07/2010

    Thank you for the clear and simple solution sir.

  34. No spoke on 31/07/2010

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

  35. HipHopZen spoke on 06/08/2010

    Thank you!

    Have a good karma.

  36. jesuda spoke on 21/08/2010

    Thanks dude.. very quick fix

  37. Fernanda N spoke on 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. media desginer spoke on 15/12/2010

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

  39. Dan spoke on 20/12/2010

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

  40. HDDesigns spoke on 31/12/2010

    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 spoke on 04/01/2011

    Hey HDDesigns,

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

    So it should be:


  42. positive affirmation spoke on 10/01/2011

    thank you for this code.

  43. rafat spoke on 17/01/2011

    Thks a Ton dude

  44. Jenn spoke on 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 spoke on 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) spoke on 04/04/2011

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

  47. Kristy (Malaysia) spoke on 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. Dennis spoke on 19/04/2011

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

  49. Yarin Kessler spoke on 19/04/2011

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

  50. Gregg spoke on 04/07/2011

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

  51. Pedro spoke on 12/09/2011

    Thanks! Works perfectly. Now I know how to do it the right way. πŸ˜‰

  52. lemon spoke on 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 spoke on 01/11/2011

    Thanks mate

  54. GraphicSamurai spoke on 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?


  55. nicole spoke on 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. Noah Whitmore spoke on 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. AliMohsin spoke on 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 spoke on 20/09/2012

    Thx for the tip. its working.

  59. Stephani M. spoke on 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 spoke on 30/10/2012

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

  61. Matt spoke on 17/01/2013

    Thanks, quick and easy. Much appreciated!

  62. Neo spoke on 12/06/2013

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

  63. Rod spoke on 19/06/2013

    Thanks Man! works great

  64. salman spoke on 13/08/2013

    thank bro

  65. Julie spoke on 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. Ben Hearn spoke on 14/11/2013

    Thank you!!! You have saved me a lot of time… πŸ™‚

Leave a reply

Your email address will not be published. Required fields are marked *