How to Include jQuery in WordPress

#confoo flickr pics from first day http://bit.ly/cQDocw 9 mins ago
More updates...

Hello! I'm Brendan Sera-Shriar A.K.A. digibomb, a freelance web designer from Montreal, Canada.

How to Include jQuery in WordPress

Jul 24, 2009

This is nothing new for WordPress, jQuery has been available and a part of the core since version 2.2. Since then we have seen many custom jQuery hacks and plugins make their way into WordPress themes, as well as the current WordPress Dashboard, which has become an almost all jQuery driven interface.

So, why am I written this post? At almost every workshop or class I teach on WordPress my students always ask the same questions “what is jQuery, and how can I add it to WordPress?” The answer is simple, jQuery is and easy way to add another layer of interactivity and creativity without having to worry about a lot of obtrusive Java or the bulkiness/complications that come with integrating Flash.

I’m not saying that jQuery is perfect, there is code that can conflict with WordPress or other jQuery additions, and not all JQuery versions are cross platform, however it is for the most part the best solution. In terms of an alternative for Flash, it can be very useful. Flash is not bad, but it is not always the answer either. If you require/desire some simple interactivity such as: sliding portfolios, galleries, drag and drop, hide and reveal, rollovers, tool tips, basic fading elements, why bother spending all that development time in Flash and worry about players and plugins?

Here are 2 really good examples of jQuery as an alternative to Flash http://www.wearebuild.com and http://www.x3studios.com

Ok, enough talk, let’s get started. What is jQuery for those of you who don’t already know?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. – JQuery.com

Loading jQuery

There are a couple of ways to do this in WordPress.

The first and easiest way is to load the jQuery library that comes bundled with WordPress. To do this we use the wp_enqueue_script() function, which automatically enqueue’s the JavaScript file in your theme header. Open your header.php file and paste the following within the <head> and </head> tags:

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

*I have heard that this does not work all the time in WordPress 2.8.1

Quick tip: One thing worth taking note of is the conflict with prototype which may cause it to not work in IE. Be sure to call the noConflict() method.

$j = jQuery.noConflict();

And you can call any jQuery functions like this:

$j(this).fadeTo("normal", 0.5);

The second way to load jQuery is to call it remotely from Google, this way you can be assured you’re always using the most up-to-date version. Otherwise, the version included inside WordPress may be dated.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

The third and final way is to load jQuery from your server, so if you have downloaded a specific version you can enqueue it internally. To do this, open your header.php file and paste the following within the <head> and </head> tags:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery.js"></script>

*I usually put all my scripts in an includes directory located in my theme directory. You could also use an absolute path if your file is located elsewhere.

Now the fun begins! Once you have loaded jQuery you can take advantage of hundreds of great libraries for adding more interactivity or complexity to your themes.

Here’s a list of some of my favorites

Lightbox

A light Javascript used to display overlay images on the current page. The original Lightbox was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.

FancyBox

FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

Code Slider