Maruf scribbled this post.
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:
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'); ?> |
comments
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.
Hey,
Glad I could help.
And yup, that’s me! Thank you very much!
Thank you! That is soooo helpful.
THANK GOD. I spent 2 days googling for a way to solve this (and i’m usually pretty good at google-fu). THANK YOU.
Thanks!
Thanks – I love it when people post little, simple things like this, amazingly helpful.
Thanks!!
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.
So awesome! I was having issues with things not showing up. Will definitely keep a bookmark of this, lol.
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.
I stumbled on this while doing subpages, and almost ended up using not-so-nice absolute urls. Thanks a bunch on his tip!
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)
Thx a lot man. Very helpful for WP newbee like I am.
Try : folder_image();
it works better ;o)
Thanks Maruf, just writting my first theme and this saved me some digging around.
Arnaud, your solution doesn’t work for me
i really really love your post. you saved me a lot of time. i might have never figured this out.
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
Thanks a lot mate. You made my day.
Like many of these posters, I thank you. Keep up the good work!
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.
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!
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??
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! : )
Thank u! u save my life!
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!
Thanks for this man, helped me a lot!
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!
This just saved me a lot of head scratching. Thanks!
spent way too long tring to figure this one out! Nice post, thanks alot!
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.
Love you man!
Hey thanks a lot man!!! Nice site design by the way.
Thank you for the clear and simple solution sir.
Just what I was looking for
Thx !
Thank you!
Have a good karma.
Thanks dude.. very quick fix
thank you so much!
i’ve been looking for this code for days and finally found it here! thanks for the tip! =D