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 :)
Related posts
Shorter URL
Want to share or tweet this post? Please use this short URL: http://ozh.in/hk
Pages: [5] 4 3 2 1 » Show All
replied, on 20/May/10 at 12:33 am # :
So this may sound stupid, but I've been searching now for a couple hours and can't figure it out.
What is the RIGHT way to add CSS and JS to the header of the admin pages ONLY when displaying the page/post editing forms. Basically my plugin adds an extra meta box to the editing tools and they require some custom javascript/css files. I've really really digged and cant figure it out.
After searching lots of places, and digging through the wordpress core, here's what I've come up. It works, but I REALLY hope I'm just overlooking something.
Please let me know what you think. Thanks.