Smart javascript use when developing a WordPress plugin.

Recently after looking at some of the plugin’s available I noticed some people including their own version of jquery or prototype. This is not how the plugin API was intended. WordPress comes with a bunch of useful scripts you can use without having to include in your plugin directly. The function is called wp_enqueue_script(). Here is the usage.

 

<?php

wp_enqueue_script(
     $handle
    ,$src
    ,$deps
    ,$ver
    ,$in_footer
);

?>

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

So to include a copy of JQuery into your plugin all you have to do is add the following to your plugin.

<?php
	wp_enqueue_script('jquery');
?>

This tells WordPress to include jquery and will only include it if it hasn’t been included already which leads to a lower code footprint and better compatibility!

Of course your going to want to include that into wp_head. Here is the full code including the wp_head hook.

<?php
//function. Notice !is_admin this tells it to only include if its not admin
function sp_client_upload_init() {

       if (!is_admin()) {
	wp_enqueue_script('jquery');
        }
}
//hook to insert javascript into header
add_action('wp_head', 'sp_client_upload_load_css');	

?>

 

Here are the javascript files that are included with WordPress by default

Scriptaculous Root scriptaculous-root
Scriptaculous Builder scriptaculous-builder
Scriptaculous Drag & Drop scriptaculous-dragdrop
Scriptaculous Effects scriptaculous-effects
Scriptaculous Slider scriptaculous-slider
Scriptaculous Sound scriptaculous-sound
Scriptaculous Controls scriptaculous-controls
Scriptaculous scriptaculous
Image Cropper Image cropper (not used in core, see jcrop)
Jcrop Image copper
SWFObject swfobject
SWFUpload swfupload
SWFUpload Degrade swfupload-degrade
SWFUpload Queue swfupload-queue
SWFUpload Handlers swfupload-handlers
jQuery jquery
jQuery Form jquery-form
jQuery Color jquery-color
jQuery UI Core jquery-ui-core (Att.: This is not the whole core incl. all core plugins. Just the base core.)
jQuery UI Widget jquery-ui-widget
jQuery UI Mouse jquery-ui-mouse
jQuery UI Accordion jquery-ui-accordion
jQuery UI Slider jquery-ui-slider
jQuery UI Tabs jquery-ui-tabs
jQuery UI Sortable jquery-ui-sortable
jQuery UI Draggable jquery-ui-draggable
jQuery UI Droppable jquery-ui-droppable
jQuery UI Selectable jquery-ui-selectable
jQuery UI Datepicker jquery-ui-datepicker
jQuery UI Resizable jquery-ui-resizable
jQuery UI Dialog jquery-ui-dialog
jQuery Schedule schedule
jQuery Suggest suggest
ThickBox thickbox
jQuery Hotkeys jquery-hotkeys
Simple AJAX Code-Kit sack
QuickTags quicktags
Farbtastic (color picker) farbtastic
ColorPicker (deprecated) colorpicker
Tiny MCE tiny_mce
Prototype Framework prototype
Autosave autosave
WordPress AJAX Response wp-ajax-response
List Manipulation wp-lists
WP Common common
WP Editor editor
WP Editor Functions editor-functions
AJAX Cat ajaxcat
Admin Categories admin-categories
Admin Tags admin-tags
Admin custom fields admin-custom-fields
Password Strength Meter password-strength-meter
Admin Comments admin-comments
Admin Users admin-users
Admin Forms admin-forms
XFN xfn
Upload upload
PostBox postbox
Slug slug
Post post
Page page
Link link
Comment comment
Threaded Comments comment-repy
Admin Gallery admin-gallery
Media Upload media-upload
Admin widgets admin-widgets
Word Count word-count
Theme Preview theme-preview
JSON for JS json2

 

Recent Posts
Showing 3 comments
  • Anthony Brown
    Reply

    Don't forget to include your CSS and images when using jquery UI. It is not automatic.

    • David Lapierre
      Reply

      This Website Plugin is Great for those who are printer's or have a small business that needs there customers to send the documents that you need to securely send to a Vendor.

    • David Lapierre
      Reply

      This Website Plugin is Great for those who are printer's or have a small business that needs there customers to send the documents that you need to securely send to a Vendor.

Leave a Comment