0

I'm getting some 404 errors on image paths in this plugin I'm building.

I'm trying to build a plugin that has some Javascript and images (like a close icon and a progress bar) that I want to load on the frontend. I found the proper technique to enqueue jQuery, and then the proper technique to register and enqueue my jQuery script I made. The only trouble is that the jQuery needs to load an image like a close icon and a progress bar. I am told that I can't rely on relative paths in various blog situations, and also put the image in the same directory as the script. Everything fails to load those images -- I get 404s because WordPress gets the paths wrong.

Sure, I can specify something like...

jQuery('#test').css('background','transparent url(wp-content/plugins/myplugin/closer.png) 0 0 no-repeat');

...but the wp-content/plugins/myplugin/closer.png path is unreliable in some ways that people setup their blogs.

What's the technique to get my front-end jQuery component to load these images without 404 errors and without hard-coding a path? I mean, does WordPress automatically inject some kind of path global constant in jQuery that I can pick up and use?

1

The answer is to use wp_register_style() and wp_enqueue_style() before I do wp_register_script() and wp_enqueue_script() so that I can use relative image paths to the CSS file. I then move the url() stuff from jQuery and into the CSS file with this relative path.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.