[How To] Load Javascript in WordPress

If your WordPress plugin or theme uses JavaScript, it is essential to know how to include it so that you don’t break other JavaScript libraries or plugins/themes that use JavaScript.

The straight forward way to load JavaScript is of course to embed a script tag with the JS file as a src attribute:

<script src="my-plugin/js/jquery.js"></script>

Of course you can load your own custom JavaScript that way, but don’t do that if you are loading a JavaScript library! Check the list of JavaScript libraries supplied by WordPress. Do not include a library with your theme/plugin if WordPress already brings it along!!!

WordPress offers a nice and easy way to load JavaScript libraries, the wp_enqueue_script() function. If you are including a JavaScript file that depends on e.g. jQuery, you can just tell WordPress and it will load jQuery for you!

Example from my jQuery Colorbox plugin:

wp_enqueue_script('colorbox', plugins_url('js/jquery.colorbox-min.js', __FILE__), array('jquery'), '1.3.6');

I tell WordPress to load the Colorbox JavaScript library that depends on jQuery. WordPress makes sure that the jQuery library is loaded before my JavaScript is loaded so everything will work as expected.

wp_enqueue_script description @ WordPress
JavaScript libraries supplied by WordPress

[development] jQuery cheat sheets

It is always difficult to remember the syntax of APIs. This is where cheat sheets come in handy.

These are three jQuery cheat sheets that I found on the web:

Future Colors.ru jQuery cheatsheet
Future Colors.ru jQuery 1.4 cheatsheet

(by Future-Colors.ru)

Impulsestudios.ca jQuery cheatsheet
Impulsestudios.ca jQuery 1.4 cheatsheet

(by Impulsestudios.ca)

Woorkup.com jQuery 1.3 cheatsheet
Woorkup.com jQuery 1.3 cheatsheet

(by Woorkup.com)

[plugins] jQuery Colorbox 1.3.3

Gerade habe ich jQuery Colorbox 1.3.3 bei WordPress.org freigegeben.

I just uploaded jQuery Colorbox 1.3.3 to WordPress.org.

From the changelog:

  • CHANGE: fixed settings page, options can be saved now
  • NEW: added settings deletion on uninstall and “delete settings from database” functionality to settings page
  • CHANGE: moved adding of CSS class priority lower, hopefully now the CSS class is added to pictures after other plugins update the HTML
  • CHANGE: updated the FAQ

More information here.

Download here.