WordPress- Get Image Path Relevant To Theme
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'); ?> |
brightcherry.co.uk
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
Ahhh, better than advil. Thanks for relieving my pain!
Thanks a lot! This is exactly what I was looking for.
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
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
thank you for this code.
Thks a Ton dude
THANK YOU x 1,000,000,000,000! I’m new to working in WP and it has been an uphill climb
oh my god i love you! i have been pulling my hair out for hours trying to figure this out!
Thank you! I was searching for this and it really helps!!
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?
Exactly what I needed. Thanks a lot for the info!
If you’re working with child themes you must change ‘template_directory’ to ‘stylesheet_directory’.
Thanks so much! Much head-to-desk thumping avoided!
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
Thanks mate