WordPress Hidden Gems: JavaScript Libraries

WordPress includes a number of JavaScript libraries because it uses those libraries in the administration screens. They’re available for you to use in your themes and plugins as well. The libraries include jQuery, Prototype, Scriptaculous, and SWFUpload. See the wp_enqueue_script Codex page for a complete list of the scripts available, along with their handles.

This code, added to your plugin or theme functions file, will add jQuery and its UI library:

<!--?php <br ?-->//Including jQuery
function scl_add_jquery() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery-ui-core');
}
add_action('wp_head', 'scl_add_jquery');
?>

Using jQuery in WordPress is a bit tricky. Most jQuery scripts rely on a dollar sign function. For example, $("div.main").addClass("wide"); would add the wide class to a div that already had the main class. However, several other libraries, including Prototype, use this same convention. Because WordPress also uses Prototype, the jQuery library is loaded in “no conflict” mode.

You have two options. You can use ‘jQuery’ in place of the dollar sign function (‘$’) throughout your script, or you can wrap your script in an extra function.

// using jQuery without a wrapper: replace $() with jQuery()
jQuery("div.main").addClass("wide");

jQuery(document).ready(function($) {
    // $() will work inside this function; otherwise use jQuery()
    $("div.main").addClass("wide");
});

Find all the WordPress Hidden Gems in [link id=”2675″]Beginning WordPress 3[/link].