JQuery now comes bundled with Word Press

As of WordPress 2.7, jQuery and several other JavaScript libraries and plugins have been bundled and are available through WordPress' Script API through a handy function called wp_enqueue_script. Actually, WordPress has had jQuery and quite a few other JavaScript libraries (including Script.aculo.us with Prototype and many more) bundled into the wp-includes directory for some time, but until version 2.7, these includes were not so easily accessible.

Registering jQuery in a WP theme

You can activate WordPress' bundled jQuery in two different ways:

First, you can place the following code in your header.php file before the closing </head> tag:

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

<?php wp_head(); ?> <script type="text/javascript"> //add jQuery code here jQuery(document).ready(function() { jQuery("p").click(function() { alert("Hello world!");

Alternatively, you can register the wp_enqueue_script (and any custom jQuery code you write) in your theme's functions.php file. If your theme doesn't have a functions.php file, simply create a new file, name it functions.php, and place it in your theme's root directory with your other template files (functions.php is a standard template file that's included with the default theme we're using). Place the following code into your functions.php file:

<?php wp_enqueue_script('jquery');/*this registers jquery*/ function jq_test(){ /*This is your custom jQuery script*/

<script type="text/javascript"> jQuery(document).ready(function() { jQuery("p").click(function() {

add_filter('wp_head', 'jq_test');/*this adds your script to the wp head() hook in the header.php file and ensures your custom jQuery script is run*/ ?>

Avoiding problems registering jQuery

The first time that I ever attempted to load up jQuery using the wp_enqueue_script (both in the functions.php file and through the header.php file), I just could not get it to work. After some hair pulling and a few hours on the WordPress Codex, I finally realized the following facts:

• If you're loading directly into your header.php template file, make sure that the wp_enqueue_script function is above your wp_head function. Your custom jQuery code must go below the wp_head function.

• If you're registering the wp_enqueue_script in the functions.php file, make sure that it comes before any custom functions that load through the add_filter function into the wp_head.

Read up on the wp_enqueue_script function!

This function is part of WordPress' Script API and it actually does a lot more than just load up jQuery! As I mentioned, there are many, in fact well over fifty, JavaScript toolkits, frameworks, user interface libraries, plugins, and helpers that you can load up safely using the wp_enqueue_script function. Check it out here: http://codex. wordpress.org/Function_Reference/wp_enqueue_script.

Was this article helpful?

0 0
Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook

Post a comment