Small Tips Using WordPress and jQuery

Inside of WordPress are several of JavaScript libraries available, you can use them easily and you don’t need an extra Theme or Plugins. Also, this is the recommended approach to enable libraries , so they won’t be loaded more than once. Some notes on these two topics can be found in the article Use JavaScript Libraries In And Of WordPress.

But from time to time you need something specific, so I have some code snippets for you in this post now. And I particularly want to show some examples with jQuery. Many Themes and Plugins using jQuery and it is pretty easy to work with jQuery. In principle, these hooks and calls also apply to your own scripts and other libraries.

The Hooks

WordPress provides Hooks to hook at certain points into the core. This is one of the strengths of WordPress and the following three Hooks are in particular interesting to include scripts in your Themes. The following examples illustrate some practical use.

• init
• template_redirect
• after_setup_theme since WordPress 3.0

Replace jQuery of WordPress in your Theme with Google AJAX Library

In the following code the jQuery-Library of Google CDN gets loaded; But you can still use jQuery without any problem. Other Plugins can access the library very easy via wp_enqueue_script().

function fb_greyfoto_init() {
	if ( !is_admin() ) { // actually not necessary, because the Hook only get used in the Theme
		wp_deregister_script( 'jquery' ); // unregistered key jQuery
		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.4.2'); // register key jQuery with URL of Google CDN
		wp_enqueue_script( 'jquery' ); // include jQuery
	}
}
// nur for Themes since WordPress 3.0
add_action( 'after_setup_theme', 'fb_greyfoto_init' ); // Theme active, include function

jQuery Library in footer

The default call of wp_enqueue_script( 'jquery' ) in your Theme takes care, that it uses jQuery of WordPress and if all Plugins and Themes are setup correctly, the library will be load only once. But jQuery won’t get loaded in your footer, instead in head of your site. That’s why you have to adjust the code a little bit and add the parameter for “load in footer”.
Here are two examples before and after WordPress 3.0 because after_setup_theme is only available since WordPress 3.0.

function fb_greyfoto_init() {
	if ( !is_admin() ) {
		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.4.2', true ); // load in footer - true
		wp_enqueue_script( 'jquery' );
		
		// load js of Theme, requires jQuery
		wp_enqueue_script( 'styleswitcher', get_bloginfo( 'template_directory') . '/js/styleswitcher.jquery.php', array( 'jquery'), '1.3.2', true ); // load my script with key styleswitcher in footer and use jQuery
		wp_enqueue_script( 'greyfoto', get_template_directory_uri() . '/js/photoblogfb.js', array( 'jquery', 'styleswitcher'), '1.1.3.1', true ); // use jQuery and styleswitcher and then load script greyfoto
	}
}

// also for WP < version 3.0
global $wp_version;
if ( version_compare($wp_version, "3.0alpha", "<") ) {
	add_action( 'init', 'fb_greyfoto_init' );
} else {
	add_action( 'after_setup_theme', 'fb_greyfoto_init' );
}

Load script for specific page

Sometimes you need some scripts just for a specific template, page or post - Therefore are Conditional Tags. This possibility improves the performance of your website. The following script will be loaded only for the template custom-page.php.

function fb_greyfoto_page_init() {
	if ( !is_page_template( 'custom-page.php' ) )
		return;

	wp_enqueue_script( 'mypagescript', get_template_directory_uri() . '/js/my_script_4_page.js', array('jquery'), '0.1', true );
}
add_action( 'template_redirect', 'fb_greyfoto_page_init' );

The usage of $

Within scripts you have to consider several things.
To work with $ , as many are used to with jQuery, you have to deliver jQuery to $ ; That's an easy task, the short version is $(function() {} ); , which should be used within WordPress.

jQuery(function ($) {
	// Now you can use $ as a reference to jQuery without any problem
});

To check whether the HTML is loaded, use the following call. That makes sure that the DOM is loaded and you can browse the DOM via jQuery and now the real work of the script can start. I strongly recommend to use this variant. I don't want to explain all the benefits, but you can read about it in the article Introducing $(document).ready().

jQuery(document).ready(function ($) {
	$('#id').toggle({
		//parameter for example toggle
	});
});