• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Books
    • Content Strategy for WordPress (2015)
    • WordPress for Web Developers (2013)
    • Beginning WordPress 3 (2010)
  • Blog
    • Content Modeling for WordPress
    • WordPress Hidden Gems
    • Web Design
  • Work
    • MLIS Class Projects (2019-2022)
    • Portfolio (2002-2019)
    • Services
    • WordPress Plugins
    • WordPress Themes
    • Presentations and Interviews
    • on GitHub →

Stephanie Leary

Writer, WordPress consultant, recent MLIS grad

  • About
    • Press Kit
    • Presentations and Interviews
  • Contact Me

WordPress Hidden Gems: JavaScript Libraries

September 28, 2010 Stephanie Leary Leave a Comment

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].

WordPress javascript, jquery, js, prototype, scriptaculous, swfupload

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

My Books

I’m a front end developer at Equinox OLI, working on open source library software. I was previously a freelance WordPress developer in higher education. You can get in touch here or on LinkedIn.

Copyright © 2023 Stephanie Leary · Contact