How to enqueue the bundled jQuery in footer – The Right Way

Why scripts should be placed into the footer of a site:

With scripts, progressive rendering is blocked for all content below the script. Moving scripts as low in the page as possible means there's more content above the script that is rendered sooner.

The second problem caused by scripts is blocking parallel downloads.

Steve Souders in „High Performance Web Sites: Rule 6 – Move Scripts to the Bottom

WordPress comes with many bundles JavaScript libraries like jQuery or jQuery UI.
So plugins and themes doesn't need to bundle these libraries again, instead, they can use the WP_Scripts API.

The registration is controlled by the function wp_default_scripts() in /wp-includes/script-loader.php.

 * Register all WordPress scripts.
 * @since 2.6.0
 * @param object $scripts WP_Scripts object.
function wp_default_scripts( &$scripts ) {
// […]
	$scripts->add( 'colorpicker', "/wp-includes/js/colorpicker$suffix.js", array('prototype'), '3517m' );

	$scripts->add( 'editor', "/wp-admin/js/editor$suffix.js", array('utils','jquery'), false, 1 );
// […]
	// not used in core, replaced by Jcrop.js
	$scripts->add( 'cropper', '/wp-includes/js/crop/cropper.js', array('scriptaculous-dragdrop') );

	// jQuery
	$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', array(), '1.7.2' );

	// full jQuery UI
	$scripts->add( 'jquery-ui-core', '/wp-includes/js/jquery/ui/jquery.ui.core.min.js', array('jquery'), '1.8.20', 1 );
	$scripts->add( 'jquery-effects-core', '/wp-includes/js/jquery/ui/jquery.effects.core.min.js', array('jquery'), '1.8.20', 1 );
// […]

As you can see, WP_Dependencies->add() expects the following arguments: The name, the path, the dependencies, the version and last but not least the argument to enqueue the script either in header or footer. Same as for wp_register_script() or wp_enqueue_script().

Now you should have noticed that the jQuery registration doesn't have the last argument, which means the script will be enqueued in header. With the help of a filter inside the wp_default_scripts() function we can change this.
In practice:

 * Plugin Name: Enqueue jQuery in Footer
 * Version:     0.0.1
 * Plugin URI:
 * Description: Prints jQuery in footer on front-end.
 * Author:      Dominik Schilling
 * Author URI:
function ds_enqueue_jquery_in_footer( &$scripts ) {
	if ( ! is_admin() )
		$scripts->add_data( 'jquery', 'group', 1 );
add_action( 'wp_default_scripts', 'ds_enqueue_jquery_in_footer' );

This a really clean and nice way. No need of deregister and register functions.

Of course, you should test if this breaks any functionality, especially when you are using plugins/scripts which hasn’t set dependencies correctly.

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.
Continue reading …