Include Common JavaScript Libraries in Your WordPress Theme

Nov 12, 2008 by Matt | Posted in WordPress 13 Comments

I bet you didn’t know that WordPress already includes several common JavaScript libraries, ready to be called upon with a simple template tag. Libraries such as

  • jQuery
  • Scriptaculous
  • Tiny MCE
  • Thickbox

Want to use jQuery in your theme, for a tabbed box, an AJAX something, or some sort of DHTML effect? You can add it in with a single template tag in your header.

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

That was easy, wasn’t it? The wp_enqueue_script function can be used in plugins as well, so plugin authors, pleasestop bundling jQuery and Scriptaculous with your plugins. It’s not necessary.

The function can also be used to add your own scripts to a blog (whether you’re doing so from a them or plugin). The syntax is

<?php wp_enqueue_script('handle', 'src', 'dependencies'); ?>

“Handle” is a unique name you give to the script, “src” is the the script’s URL, and the optional last argument allows you to specify dependencies (i.e. scripts that must be loaded before the current one). For example, to load the jQuery UI Tabs package, which naturally requires jQuery, you would use something like this:

<?php wp_enqueue_script('jquery-ui', 'http://example.org/wp-content/themes/my_theme/jquery/jquery-ui-tabs.js', 'jquery'); ?>

The function will also ensure that the same script will not be loaded twice, if I’m not mistaken. Which means if you include jQuery in your theme, and you install a plugin that tries to load jQuery, it will only be loaded once.

  • http://omninogin.com Thaya Kareeson

    This post was right on time.  I was upgrading my WP Greet Box plugin to do some AJAXy things and I was wondering if there was a way to use WordPress’s jQuery library.  Thank you!

  • http://omninogin.com Thaya Kareeson

    You should also mention that the wp_enqueue_script should be added to the “init” hook like soadd_action('init', 'mfDevLoadScripts');function mfDevLoadScripts() { wp_enqueue_script('jquery');}If you try to use it in wp_head or later, it will not work.

  • http://www.webmaster-source.com Matt

    @Thaya, Really? I can put it in the theme as I did above in the post, and it works fine. I haven’t tried using wp_enqueue_script in a plugin yet though (neither WP125 nor GoCodes use much JavaScript), so I haven’t experienced your init vs. wp_head problem. It makes sense though…

    So it seems from a theme standpoint, you can use wp_enqueue_script right in your header.php template like an ordinary template tag, while from a plugin, which obviously requires being bound to a hook, you have to use init.

  • http://stevenclark.com.au Steven Clark

    Matt, OK you got me this time. Something I didn’t realise about WordPress. Thanks, this will come in very handy.

  • http://www.webmaster-source.com Matt

    @Steven, let’s hope I can do it again… :D

  • http://nurudin.jauhari.net/ Jauhari

    Just Perfect for me… thanks for this ;)

  • http://www.growlingranger.com/?r=1 Richard Shepherd

    Help. I’m going nuts trying to get this to work. Here is my code as it appears at http://www.growlingranger.com/?r=1 (the r=1 bit is important):

    jQuery(document).ready(function(){
    jQuery(document.body).click(function () {
    jQuery(“#Redirect”).slideUp();

    });

    });

    And that doesn’t work at all.

    Replace

    with
    <script src=”/javascript/jquery-1.2.6.min.js”>

    and it does.

    This happens before , and before the WordPress Flickr Manager calls these three lines:

    Thanks for any help and advice you might have!! :)

  • http://www.growlingranger.com/?r=1 Richard Shepherd

    Sorry, my code was eaten up because I forgot the tags. Please see the source code of http://www.growlingranger.com/?r=1 for the problem code.

    • http://www.webmaster-source.com Matt

      It seems to be working for me. I click the close link and the div slides up and disappears. Are you still having a problem?

  • http://www.growlingranger.com/?r=1 Richard Shepherd

    It works with a direct link to the .js file (which is what you can see) but if I change that direct link to <?php wp_enqueue_script(‘jquery’); ?> it doesn’t work.

  • http://www.webmaster-source.com Matt

    Hang on a minute…did you copy and paste the line of code from the post here? If you did, that could be part of the problem. WordPress has a tendency to change single-quotes to curly-single-quotes, which may cause problems code-wise. Try using wp_enqueue_script again, but retype the quotes yourself.

  • http://www.growlingranger.com/?r=1 Richard Shepherd

    Dagnammit! That didn’t work. The quotes appear fine.

    If the code reads:

    <script src="/javascript/jquery-1.2.6.min.js"></script>
    <script>
    jQuery(document).ready(function(){
    jQuery(document.body).click(function () {
    jQuery("#Redirect").slideUp();
    });
    });
    </script>

    It works fine, but if it reads

    <?php wp_enqueue_script('jquery'); ?>
    <script>
    jQuery(document).ready(function(){
    jQuery(document.body).click(function () {
    jQuery("#Redirect").slideUp();
    });
    });
    </script>

    It doesn’t work at all. And, to confirm, this comes before the

    < wp_head(); ?>

    line of code. Any other suggestions? Thanks!

    • http://www.webmaster-source.com Matt

      I don’t know. It certainly is strange. I’ve never seen something like it before. But if you include the script manually, instead of with wp_enqueue_script, it works, doesn’t it? Maybe you should just leave it be since it works?