Nip over to Otto’s blog and read his post entitled don’t include wp-load, please which I’m in complete and total agreement with. I’d like to add to the solutions with the following method of adding data to your page for use by your plugin’s JavaScript: wp_localize_script.
WordPress has a useful function called wp_localize_script, which is mainly used to provide localisation (translated) strings for use in JavaScript, but which can be used to include all kinds of JavaScript data. You can download a demo plugin (v0.2, now includes Otto’s suggestion in the comments) which I’ve whipped up to demonstrate how to use this function. The demo plugin uses several really useful WordPress functions:
plugins_url (codex documentation) : This function provides a URL for a file or folder within your WordPress plugins directory, it’s best to use this rather than guess that the plugins directory is within the wp-content directory, which is within the main WordPress directory as this is not always correct.
wp_enqueue_script (codex documentation) : This function is super useful for including JavaScript files and libraries, particularly as you can specify your script is dependent on libraries like jQuery and ensure that your plugin only includes jQuery once (and that if other plugins use jQuery and wp_enqueue_script they will also only include it once… not including libraries multiple times saves an awful lot of bandwidth).
wp_localize_script (codex documentation) : If you’ve included a script using wp_enqueue_script then you can add arbitrary data and translated strings to it using this function, which is the crux of this demo.
The one assumption that my demo plugin does make is that the plugin is installed in directory within plugins, and that that directory is called demo-wpls… given this is so vital we ought to check it’s a correct assumption. My plugin function Update: Awesome suggestion from Otto in the comments below, no need for assumptions… this can only be good.dwpls_admin_notices checks the directory name and shows a notice in the admin area if the name is unexpected.
I hope that helps people wanting to use data from WordPress in their plugin’s JavaScript… good luck, and let me know how you get on.
You don’t need to make the directory assumption… Pass __FILE__ as the second argument to plugins_url(). Like this:
$js_url = plugins_url( '/main.js', __FILE__ );
The plugins_url function can use that __FILE__ parameter to determine the plugin directory for you.
Thanks Otto, that’s a great suggestion… incorporated!
Oh this looks super handy.
I (and probably many others) use the manual method of what this function does; which is to output some JavaScript to the header with variable definitions. It’s nice to have it all in one function and nicely localisable.