Adding javascript into an admin page is a critical part of plugin coding. Critical, because it is both trivial and probably reason #1 why it will conflict with other plugins if not done properly. When their plugin needs javascript, Good Plugin Coders™ have to make sure of the following points:
- add javascript only once: if you need prototype.js, don't add it if it's already included
- add javascript only on your plugin page: don't load yourscript.js in every admin page (with hook 'admin_head') including on other's plugin pages.
Doing so is hopefully very easy :
Add javascript only once
Need to include a javascript library or an external script? Don't ever use some straight echo '<script src="prototype.js"></script>';. The script might have been already loaded already, so there's no point in adding it again. Moreover, it can break everything: just add prototype after jQuery and you're ready for some trouble.
Instead, use wp_enqueue_script() :
-
wp_enqueue_script('prototype');
-
wp_enqueue_script('myscript', '/wp-content/plugins/myplugin/myscript.js');
-
wp_enqueue_script('theirscript', 'http://theirsite.com/script.js');
Even simpler, if your script needs, say, Scriptaculous to work, just use:
-
wp_enqueue_script('myscript', '/wp-content/plugins/myplugin/myscript.js', array('scriptaculous') );
Usage:
wp_enqueue_script( [string: handle], [optional string: src], [optional array: dependencies], [optional string: version number])
There are a number of predefined script handles: 'jquery', 'prototype', 'scriptaculous' and a bunch of others. Please refer to wp_enqueue_script() on the Codex for more details.
Add javascript only to your page
Never ever simply hook into 'admin_head' to add your script: not only you will be adding it to every admin pages (the Dashboard, Comments, etc...) but also to every other plugin pages. Seriously, half of the support question I've had with Who Sees Ads were because of WP-ContactForm adding its crappy javascript everywhere it could, including my plugin page.
Instead of testing current page URL in order to determine if it's your plugin page with a smart strpos() over $pagenow or $_SERVER['REQUEST_URI'], you should use hook 'admin_print_scripts-(page_hook)'
Example with a plugin that would create an admin page under "Manage":
-
$mypage = add_management_page( 'myplugin', 'myplugin', 9, __FILE__, 'myplugin_admin_page' );
-
add_action( "admin_print_scripts-$mypage", 'myplugin_admin_head' );
-
-
function myplugin_admin_head() {
-
// what your plugin needs in its <head>
-
}
This snippet from Andrew Ozz on the wp-hackers mailing list.
Complete Example
This simple plugin will create an admin page under "Settings" in which a CSS and a JS file will be loaded. Check other pages of the admin area: they won't be affected.
Download load-js-example.
Summary
Be nice to other plugin coders. Add your javascript properly and only where needed. Thanks :)
Pages: « 1 [2] Show All
replied, on 03/Jun/08 at 7:15 pm # :
Matt » This doesnt make a difference
thought, on 04/Jun/08 at 5:18 pm # :
I did some more tinkering and found that if I merged my 2 functions so that I had on action adding the admin pages and with this function the action calls to the scripts were made that things worked very nicely.
Great tip and thanks for your help.
wrote, on 16/Jun/08 at 3:03 am # :
Are all these tips deprecated in WP 2.5.1? I've struggled for 17 hours straight, but the only thing that works is the hook 'admin_head'.
"admin_print_scripts-$mypage" results in absolutely nothing, and the same with "wp_enqueue_script". Most plugin authors seem to use the plain 'admin_head', and it seems they have a really good reason - to actually get the plugin to work.
I've spend considerable time googling for any tutorial, or any readable and clear documentation, and there is none - which also seem to indicate that the advice given here isn't really supported by WP.
thought, on 16/Jun/08 at 9:10 am # :
Tom Stone » I really can't imagine how it's possible to waste 17 hours on this. I've updated this page with an example plugin doing just what's explained here, no more, no less. You could have found similar examples in literally *hundreds* of plugins.
thought, on 16/Jun/08 at 1:20 pm # :
Weeell, I might have exaggerated a bit. I guess it really only was 15 hours. And it is my second plugin experiment ever.
I'm very grateful for the download, which is the first really clear example I've seen. While there might be hundreds of plugins out there, doing it right, only two in my plugin-folder use "admin_print_scripts-", the rest adds everything to all admin pages.
I'm not sure, but looking at your example, gives me the feeling that I might have attempted it in the wrong order, and that I tried to add something to the head too late, when the head was already assembled. Just guessing.
As it turned out, the jquery color-picker I wanted to add didn't work in the admin page, so those hours was spent in vain in any case. Still, with your example, I now have a headstart, if I attempt something similar again.
Thanks!
wrote, on 30/Jun/08 at 3:59 pm # :
Good tutorial. Everything works in wp 2.5
thought, on 01/Jul/08 at 9:00 pm # :
I want to put java script in a page created by my plugin.
pingback on 07/Aug/08 at 11:27 am # :
[...] make the wp-config.php including fully WP 2.6 compliant, and I would make sure the javascripts are correctly added, those are my thoughts when looking at this plugin. I will definitely give this plugin a real [...]