Using WordPress’ wp_enqueue_script() In Themes And Plugins

Sep. 10, 2008

2:02 pm

Man, the WordPress Codex is deep. I've spent more hours than I'd like to admit plumbing its depths, and I still get the sense I haven't seen more than a tenth of what it has to offer.

Here's a function straight from the codex that'll be a big help to theme and plugin developers: the wp_enqueue_script() function.

What's it for?

Glad you asked. If you find yourself building WordPress themes and plugins that're heavy on the JavaScript, this guy's gonna be your new best friend. For starters, instead of having to package your theme with its own copy of jQuery or Scriptaculous, you can use wp_enqueue_script() to include the most recent version of the library WordPress has available wherever you need it. Calling the function thusly will print a link to the script right before the end of your document's head:

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

But what if I prefer to include jQuery with my plugin anyway?

Nothing's stopping you. But consider the possibility that the people who use your plugin or theme are likely to at some point install some other WordPress add-on that also uses jQuery or Scriptaculous. The big benefit to using wp_enqueue_script() is that WordPress keeps track of what JavaScript is already being included on the page. No library or script will be included more than once. This can help cut down on collisions that might break your theme or plugin.

Cool. What else can it do?

Aside from JavaScript libraries, this function also gives you access to a bunch of other handy scripts already used by WordPress core, mostly in the admin interface. Check out the Codex page for a complete list. Even more helpful: you can register your own script – either something you wrote or borrowed from someone else – and declare any libraries on which it depends. Calling the function like this:

  1. <?php wp_enqueue_script('dropdowns', '/wp-content/plugins/fancydropdowns/js/dropdowns.js', array('jquery'), '1.0' ); ?>

would automatically pull in links to both your script and the jQuery library. All you're giving it is what you're calling your script, the path where it can be found, its dependencies, and your script's version number, in that order.

I don't pick apart a ton of WordPress plugins, but having looked at the internals of a crazy number of themes in the last year, I can tell you that a bunch of them could benefit from this handy function.

Comments

May 11, 2009

4:20 am

I am not really sure if best practices have emerged around things like that, but I am sure that your great job is clearly identified. I was wondering if you offer any subscription to your RSS feeds as I would be very interested and can’t find any link to subscribe here
Regards,
Toto Toilets

Toto Toilets (#)

May 14, 2009

7:32 pm

Thanks for clarifying the use of wp_enqueue_script. I had to search several sites to see how to implement it properly with jQuery and my custom scripts. And yes the WordPress Codex is really deep, but I think it could use more examples sometimes as how to use a piece of code, such as wp_enqueue. I was also wondering if you found that your custom scripts say: myJqueryCode.js needed to be placed directly after the header function, wp_head(); in the file header.php file.

Peter (#)

May 15, 2009

12:51 am

I must admit that this is one great insight. It surely gives a company the opportunity to get in on the ground floor and really take part in creating something special and tailored to their needs.
Regards,
bbq grills smokers

bbq smokers (#)

May 19, 2009

5:23 am

Admiring the time and effort you put into your blog and detailed information you offer! I will bookmark your blog and have my children check up here often. Thumbs up!
Thanks,
Video marketing services

Video marketing (#)

June 15, 2009

3:00 am

Do you have any thoughts on putting the js library/s (along with any other scripts) in the footer.php so that they are the last thing to load on the page? There are some that say this makes the page display quicker, especially if you have lots of js. You still have to wait for a complete load before the js is functional though :)

gyro (#)

June 16, 2009

5:36 am

Dude.. I am not much into reading, but somehow I got to read lots of articles on your blog. Its amazing how interesting it is for me to visit you very often.
Webkatalog ohne Backlinkpflicht

Webkatalog (#)

July 11, 2009

11:51 am

It’s for a login/logout button, I have the logout button only showing up when you login with the is_user_logged_in codex but I need the opposite to have the login button disappear when you login.

perfect golf swing (#)

August 8, 2009

12:44 am

I got to read lots of articles on your blog. Its amazing how interesting it is for me to visit you very often.

Houston Courier Service (#)

August 14, 2009

3:40 am

thanks man for the tip.
And interesting blog.

resveratrol supplements (#)

August 26, 2009

10:54 pm

Your post is proved very much helpful to me...Really a informative one and I have learned so much from this article..

Thanks for posting such a nice and helpful post

make money taking surveys (#)

November 13, 2009

10:55 am

Finally, just what I was looking for! Thanks bunches :)

Bridges To Recovery (#)

December 12, 2009

2:46 am

Informative article helps people to get their related information. This is also looking informative and worthy, best cellulite creams

Kamruzzaman (#)

February 4, 2010

2:42 pm

Thanks for this. I think I should also check out the Codex page, for more info..

CheerUp (#)

February 22, 2010

9:11 am

this angries up my blood.

Bob (#)

March 11, 2010

3:45 am

This is a real beauty of his own art world.

mikimoto pearl necklace (#)

March 27, 2010

4:06 pm

Your post is proved very much helpful thanks. Really a informative one and I have learned so much from this article.

Thanks for posting such a nice and helpful post

traffic ultimatum (#)

March 27, 2010

5:09 pm

Your post is very much helpful to me. Really a informative one and I have learned so much from this article.

Thanks for posting such a nice and helpful article.

the instant money code (#)

March 28, 2010

6:41 am

great tutorial. thanks.

bekircem (#)

March 31, 2010

9:49 am

Thanks… :)

Online-İzle (#)

March 31, 2010

11:33 pm

I prefer to include jQuery with my plugin

True Blood (#)

Whaddya think?