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.

 

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.

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.

 

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