How to wp_enqueue_script After wp_head

How to wp_enqueue_script after wp_head

If you want to add javascript files to your WordPress pages, then a good way to do this would be through the wp_enqueue_script command.

wp_enqueue_script has the following advantages –

• It ensures that a script only gets included once.
• It allows you to specify script dependencies. For example, script1.js should be loaded before script2.js.
• It allows you to easily load javascript files that ship with WordPress including jquery, thickbox, and scriptaculous.
• Minify or gzip plugins that operate on javascript files frequently use the wp_enqueue_script structures to determine which files to process.

However, a key limitation of the wp_enqueue_script function is that it MUST be called before the wp_head action. The following is stated in the WordPress Codex-

Note: This function will not work if it is called from a wp_head action, as the <script> tags are output before wp_head runs. Instead, call wp_enqueue_script from an init action function (to load it in all pages), template_redirect (to load it in public pages only), or admin_print_scripts (for admin pages only). Do not use wp_print_scripts (see here for an explanation).
~~[WordPress Codex]

wp_enqueue_script will not work after the wp_head event even if you explicitly state that the script files should be included in the footer of the page.

How to Add Javascript Files After wp_head

Sometimes, we may need to include javascript files after the wp_head event. For example, in my Shiba Gallery plugin, I want to include gallery javascript files based on the type of galleries I come across within the page.

It is true that I can do a content check during the page initialization process, but this means I will have to process the page content at least twice – once to determine which javascript files to include and another time to process the gallery shortcodes.

This process will be more efficient if I can enqueue scripts after I have processed all my gallery shortcodes.

To do this, we can add the script(s) into the global $wp_scripts object ourselves. In the example below, we enqueue the mootools and noobslide javascript files if we find the noobslide gallery after processing our shortcodes.

add_action('wp_print_footer_scripts', 'shiba_add_scripts', 1);

function shiba_add_scripts() {
	global $wp_scripts;
	if(is_admin()) return;

	if (isset($this->found['noobslide'])) :
		wp_enqueue_script('mootools', 'http://mysite.com/noobslide/mootools-1.2.4-core.js', array(), '1.2.4', true);
		wp_enqueue_script('noobslide', 'http://mysite.com/noobslide/_class.noobSlide.packed.js', array('mootools'), '1.0', true);
	
		// Have to manually add to in_footer
		// Check if mootools is done, if not, then add to footer
		if (!in_array('mootools', $wp_scripts->done) && !in_array('mootools', $wp_scripts->in_footer)) {
			$wp_scripts->in_footer[] = 'mootools';
		}
                if (!in_array('noobslide', $wp_scripts->done) && !in_array('noobslide', $wp_scripts->in_footer)) {
		        $wp_scripts->in_footer[] = 'noobslide';
                }
	endif;	
}

Line 1 – Tie our enqueue script function to the wp_print_footer_scripts event.
Line 7 – Check if we found the noobslide gallery.
Lines 8-9 – Enqueue information on our mootools and noobslide javascript files.
Line 13 – Check if our script has already been added (e.g. by some other plugin).
Line 14 – If our script has not yet been added, add it to the $wp_scripts->in_footer array.

$wp_scripts Global Object

Below are some of the relevant attributes of the $wp_scripts global object.

• in_footer – Contains an array of all the scripts that should be included in the footer of the page.
• registered – Contains all registered scripts. This includes all the scripts that are shipped with WordPress and all scripts added with wp_register_script
• queue – Contains all the scripts added with wp_enqueue_script.
• done – Contains all the scripts that have been included into the page.

WP_Scripts Object
(
    [base_url] => http://mysite.com/
    [content_url] => http://mysite.com/wp-content
    [default_version] => 3.1-RC2
    [in_footer] => Array ( [0] => mootools ... ) 
    [registered] => Array ( [jquery] => _WP_Dependency Object
                (   [handle] => jquery
                    [src] => /wp-includes/js/jquery/jquery.js
                    [ver] => 1.4.4
                    [args] => 
                    [extra] => Array() )
    [queue] => Array (
            [0] => l10n
            [1] => jquery ... ) 
    [done] => Array (
            [0] => l10n
            [1] => jquery
            [2] => comment-reply ) 
    ...
)