Jquery and WordPress, the 6 Million Dollar upgrade

The combination of WordPress and Jquery fits together just like Steve Austin and the 6 Million Dollar Man. Imagine your website as the meaty parts of Steve Austin that didn’t get turned into hamburger after his horrendous crash, and Jquery as the bionic upgrades stitched to his body by the OSI. Your blog may look great and get the ladies like Lee Majors but, what really makes the chicks drool are the bionic enhancements.

I wonder where Google will index that last statement..?

Anyway, If I was making a 6 million dollar man I would really make sure that I stitched the bionic parts on correctly to avoid any conflicts with current body structure. The same is true with Jquery and WordPress. You don’t want your awesome bionic enhancements to fail after uploading the latest super awesome plugin that uses MooTools or Prototype. The main reason why Jquery would conflict with other libraries like Prototype is the “$”, which is used to replace getElementById(), Prototype uses the same symbol but in different ways, Its as if Jquery and Prototype are fighting for control over that id. Or, comparatively its like the 6 Million Dollar Man battling it out with the 6 Million Dollar woman. The resulting barrage of bell-bottoms, hairspray and bionic sound effects may just rip your face off!

None of us want to see that happen so read on.

Jquery loaded correctly

After reading several posts on the subject, listed at end of post,  I came up with the ultimate way of calling Jquery into WordPress. Here is what the following code will do for you.

• Deregister the local copy of Jquery used by wordpress
• Call Jquery hosted from Google
• Register Jquery from Google and place it in the footer
• Register your other external js files and place them after Jquery

[php]
<?php
// Footer scripts
function jquery_init() {
if (!is_admin()) {//load scripts for non admin pages
wp_deregister_script(‘jquery’);//deregister current jquery
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’, false, ’1.3.2′, true);//load jquery from google api, and place in footer
wp_enqueue_script(‘jquery’);

// load a additional js files
wp_enqueue_script(‘my_script’, get_bloginfo(‘template_url’) . ‘/js/my-script.js’, array(‘jquery’), ’1.0′, true);
wp_enqueue_script(‘my_script2′, get_bloginfo(‘template_url’) . ‘/js/my-script2.js’, array(‘jquery’), ’1.0′, true);
}elseif (is_admin()){//load scripts for admin page
wp_enqueue_script(‘my_admin_script’, get_bloginfo(‘template_url’) . ‘/js/my-admin-script.js’, array(‘jquery’), ’1.0′, true);
wp_enqueue_script(‘my_admin_script2′, get_bloginfo(‘template_url’) . ‘/js/my-admin-script2.js’, array(‘jquery’), ’1.0′, true);
}
}
add_action(‘init’, ‘jquery_init’);
// END :Footer scripts
?>
[/php]

Ok, there area couple of things I want to go over here.

1. You should always always put all of your scripts in the footer. Why? Because, when a web page loads the markup it loads from top to bottom. So, if you have several scripts at the top of the page your users have to wait for all that stuff to load in the background before any of the lower content will load. That’s almost as unbearable as Steve Austin running in slow-mo. Also, most of your javascript is no good unless it has content to play with, so just put the scripts at the bottom of the page and it will load faster with every thing working correctly. If you don’t believe me just view the source on my website and see, all the scripts in the footer.
2. Let google host it, its faster. Google provides AJAX Libraries API hosting for most well known javascript libraries and we can definitely take advantage of this CDN.
3. Have WordPress place your external scripts according to their javascript library. The wp_engueue_ascript() function allows for an argument called $deps, which you can use to attach any other external scripts to its library and then WordPress will place it on the page accordingly.

Loading inline scripts

One of my scripts needs to be loaded from another external file and it needs to go below the previous scripts on the page. Here is how you can do that.

[php]
<?php // Banner Footer scripts
function alt_footer_files(){ ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
//my javascript here using $
});
</script>

<?php } }
add_action(‘wp_footer’, ‘alt_footer_files’, 10);
// END :Footer scripts
?>
[/php]

Here I use add_action() to load scripts into the wordpress footer at position 10, which will be below all of the previous script links. You should also notice that I am calling Jquery using “jQuery(document).ready(function($)”. This replaces the normal “$(document).ready(function()” and allows jquery to function in a no conflict mode but still being able to use the $ in your markup.

Awesome posts about the subject

• Eric Martin, most of the information comes from this great post.
• The WordPress Codex on this subject.
• Using Jquery with other libraries, from the jquery site.
• Including Jquery the right way from the diggwp site.
• Wow the original TV intro of 6 Million Dollar man brings back memories of my childhood