WordPress Quick Tip: Correctly Including jQuery

Like many others you probably aren't aware that WordPress includes jQuery as well as many other scripts that aren't turned on by default, you have to include them in your theme header file to utilize it. The right way to do this is pretty easy and I've seen many people just throw a link to the CDN hosted file in and call it good. This isn't the right way to do this and could cause problems along the way for plugins and other files.

Do Good Work, Son

Including jQuery is as easy as using wp_enqueue_script() above the wp_head() call where all the other theme and plugin dependent files are loaded. Most poorly written plugins will also include another call to it's own copy of jQuery or other library and not include a way to turn it off in it's settings, using enqueue in your theme files above wp_head() will override any other calls to scripts being utilized and help with compatibility issues you might have.

Including jQuery

To include jQuery simply use the wp_enqueue_script() function in your header.php file above the wp_head() call. yeah, it's just that easy. If your theme doesn't have a call to wp_head(), you're probably doing it wrong or a massive control freak.

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

Make sure any scripts you are including are called after the wp_head() function.

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/yourScript.js"></script>

Override WordPress jQuery and Use Hosted CDN

Place the code below in your functions.php file

<?php
function my_init_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('init', 'my_init_method');
?>

Including jQuery UI

//Google Hosted
<?php wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/[UI.VERSION]/themes/[THEME-NAME]/jquery-ui.css'); ?>
//Microsoft Hosted
<?php wp_enqueue_style('jquery-style', 'http://ajax.aspnetcdn.com/ajax/jquery.ui/[UI.VERSION]/themes/[THEME-NAME]/jquery-ui.css'); ?>
//Add core functions
<?php wp_enqueue_script('jquery-ui-core'); ?>
//Add Specific Functions
<?php wp_enqueue_script('jquery-ui-tabs'); ?>
<?php wp_enqueue_script('jquery-ui-sortable'); ?>

More here on using jQuery UI Hosted Themes with WordPress.

More here on using jQuery with WordPress.

Thanks for reading and don't forget to tip your waitresses. Hat tip: @topher1kenobe