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.
1 | add_action('wp_print_footer_scripts', 'shiba_add_scripts', 1); |
2 |
3 | function shiba_add_scripts() { |
4 | global $wp_scripts; |
5 | if(is_admin()) return; |
6 |
7 | if (isset($this->found['noobslide'])) : |
8 | wp_enqueue_script('mootools', 'http://mysite.com/noobslide/mootools-1.2.4-core.js', array(), '1.2.4', true); |
9 | wp_enqueue_script('noobslide', 'http://mysite.com/noobslide/_class.noobSlide.packed.js', array('mootools'), '1.0', true); |
10 | |
11 | // Have to manually add to in_footer |
12 | // Check if mootools is done, if not, then add to footer |
13 | if (!in_array('mootools', $wp_scripts->done) && !in_array('mootools', $wp_scripts->in_footer)) { |
14 | $wp_scripts->in_footer[] = 'mootools'; |
15 | } |
16 | if (!in_array('noobslide', $wp_scripts->done) && !in_array('noobslide', $wp_scripts->in_footer)) { |
17 | $wp_scripts->in_footer[] = 'noobslide'; |
18 | } |
19 | endif; |
20 | } |
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.
1 | WP_Scripts Object |
2 | ( |
3 | [base_url] => http://mysite.com/ |
4 | [content_url] => http://mysite.com/wp-content |
5 | [default_version] => 3.1-RC2 |
6 | [in_footer] => Array ( [0] => mootools ... ) |
7 | [registered] => Array ( [jquery] => _WP_Dependency Object |
8 | ( [handle] => jquery |
9 | [src] => /wp-includes/js/jquery/jquery.js |
10 | [ver] => 1.4.4 |
11 | [args] => |
12 | [extra] => Array() ) |
13 | [queue] => Array ( |
14 | [0] => l10n |
15 | [1] => jquery ... ) |
16 | [done] => Array ( |
17 | [0] => l10n |
18 | [1] => jquery |
19 | [2] => comment-reply ) |
20 | ... |
21 | ) |