In: , , , , ,
On: 2008 / 04 / 11 Viewed: 64075 times
Shorter URL for this post: http://ozh.in/hk

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() :

PHP:
  1. wp_enqueue_script('prototype');
  2. wp_enqueue_script('myscript', '/wp-content/plugins/myplugin/myscript.js');
  3. wp_enqueue_script('theirscript', 'http://theirsite.com/script.js');

Even simpler, if your script needs, say, Scriptaculous to work, just use:

PHP:
  1. 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":

PHP:
  1. $mypage = add_management_page( 'myplugin', 'myplugin', 9, __FILE__, 'myplugin_admin_page' );
  2. add_action( "admin_print_scripts-$mypage", 'myplugin_admin_head' );
  3.  
  4. function myplugin_admin_head() {
  5.     // what your plugin needs in its <head>
  6. }

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

Metastuff

This entry "How To: Load Javascript With Your WordPress Plugin" was posted on 11/04/2008 at 10:35 am and is tagged with , , , , ,
Watch this discussion : Comments RSS 2.0.

41 Blablas

    Pages: [5] 4 3 2 1 » Show All

  1. 41
    Theo Ephraim Canada »
    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.

    PHP:
    1. add_action("admin_init", "hookAdminInit");
    2. function hookAdminInit(){
    3.   $editing = (substr($_SERVER['SCRIPT_NAME'], strlen($_SERVER['SCRIPT_NAME'])-8) == 'post.php' &amp;&amp; $_GET['action']=='edit' &amp;&amp; current_user_can('edit_post', (int) $_GET['post']) );
    4.   if ($editing){
    5.     wp_enqueue_style('myplugin', plugins_url('css/myplugin.css',__FILE__) );
    6.     wp_enqueue_script('myplugin', plugins_url('js/myplugin.js',__FILE__), array('jquery') );
    7.   }
    8. }

    Please let me know what you think. Thanks.

Pages: [5] 4 3 2 1 » Show All

Leave a Reply

Comment Guidelines or Die

  • HTML: You can use these tags: <a href=""> <em> <i> <b> <strong> <blockquote>
  • Posting code: Post raw code (no <> &lt; etc) within appropriate tags : [php][/php], [css][/css], [html][/html], [js][/js], [sql][/sql], [xml][/xml], or generic [code][code]
  • Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar.
  • Spam: Various spam plugins on patrol. I'll put pins in a Voodoo doll if you spam me.
  • I will mark as Spam test comments, all comments with SEO names (ie "My Cool Online Shop" instead of "Joe") or containing forum-like signatures.

Read more ?

Close
E-mail It