the Yahzee Skellington blog

Quick tips to include jQuery (and other scripts) into your website

jQuery is a great tool for any web developer and it makes it easier for us to add interactivity and a touch of beauty  to the design and structure of tour websites. I was formerly a total mootools fan but, while it’s a great library, WordPress uses jQuery by default so I sort of just with it. And of course now I’m a jQuery fan too.

To kick start a series of tutorials that will allow you to discover the power of jQuery I’m gonna simply give you some quick tips to include the library into your theme, whether you’re hard coding your own website or using WordPress.

1. Get jQuery and jQuery UI

Go to the jQuery website at http://jquery.com to download the latest version of the library. You can also build your custom jQuery UI script over there to enhance the animation effects in your scripts. Upload both scripts to your website and include them within your <head> tags.

<script type="text/javascript" src="<PATH_TO_YOUR_SCRIPT>/jquery.js"></script>
<script type="text/javascript" src="<PATH_TO_YOUR_SCRIPT>/jquery-ui.js"></script>

2. Use always the latest version of jQuery

If you want to forget about checking the jQuery website for updates and want to use always the latest version hosted by Google automatically you can include the following line instead:

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

3. Replace the jQuery version that comes with WordPress

If you’re using WordPress, an almost always outdated version of jQuery is loaded by default but you can still use your own, or the latest version hosted by Google using the wp_enqueue function. Insert the following into your functions.php file:

if (!is_admin()) :
	wp_deregister_script('jquery');
	wp_register_script('jquery', ('<PATH_TO_YOUR_SCRIPT>/jquery-1.6.2.min.js'), false, '');
	wp_enqueue_script('jquery');
	wp_register_script('jquery-ui', '<PATH_TO_YOU_SCRIPT>/jquery-ui-1.8.16.custom.min.js', array('jquery'));
	wp_enqueue_script('jquery-ui');
endif;

It is important that you include the !is_admin conditional in your code so the version of jQuery your using only loads in the front end and doesn’t conflict with the Dashboard scripts:

if (!is_admin()) : ........ endif;

This line removes the jQuery file that comes with WordPress

wp_deregister_script('jquery');

After removing the default jQuery you need to register your own script before you can include it:

wp_register_script('jquery', ('WEBSITE_URL/jquery-1.6.2.min.js'), false, '');

With you script registered you can now tell WordPress to use it in your theme

wp_enqueue_script('jquery');

You can not only load your own version of jQuery into WordPress by using the wp_register_script and wp_enqueue_script functions, but any javascript file you might need in your theme aswell ad it is the preferred method too.