Search code examples
cssstylesheetwordpress

wordpress plugin development - using images - path not found

I'm writing a plugin for wordpress and am having trouble with images. If I have my plugin in wp-content/plugins/my-plugin/ and in there, a folder images/test.png - how do I reference that image in my code? I don't want to have to put the images in to the theme, as when other users come to get my plugin, the image won't work!

so my structure is

myplugin/plugin.php (which includes several files...)
myplugin/pluginstyle.css
myplugin/includes/page.php
myplugin/images/test.png

I have the style sheet working nicely, but when I try and use an image as the background for an element it doesnt work.

How do I reference the image in my plugin?

test output from page.php

<div class="test"><p>hello</p></div>

css

.test { background: url(../images/test.png) repeat-x; }

where am I going wrong? Is there a method which I should be using? Thanks for any help!

Solution

  • WordPress' PHP constant WP_PLUGIN_URL contains the absolute URL to your plugins folder. So, to get the url, use WP_PLUGIN_URL . '/myplugin/images/test.png'. In the stylesheet, image paths are always relative to the stylesheet itself. using

    .test { background: url(images/test.png); }

    should work, as long as it's in an external stylesheet. If it's inline, you should use the absolute URL.