As you may all know by now, WordPress 2.8 will have some optimization done on JavaScript as well as CSS. That includes concatenating the scripts/styles, minifying it instead of packing as well as gzipping. I have been paying much attention to the development of WordPress 2.8 especially when it comes to JavaScripts. I have filed 2 suggestion tickets in WordPress Trac, Ticket #8884 and Ticket #8859 which should be able to help plugin authors load their JavaScript easily in the footer of WordPress.
This post shall be a tutorial post and I will demonstrate how to load JavaScript in the theme’s footer in WordPress 2.8 Nightly using my WP-Polls as an example.
1 2 3 4 5 6 7 8 9 10 | ### Function: Enqueue Polls JavaScripts/CSS add_action('wp_enqueue_scripts', 'poll_scripts'); function poll_scripts() { wp_enqueue_style('wp-polls', plugins_url('wp-polls/polls-css.css'), false, '2.50', 'all'); wp_enqueue_script('wp-polls', plugins_url('wp-polls/polls-js.js'), array('jquery'), '2.50', true); wp_localize_script('wp-polls', 'pollsL10n', array( 'ajax_url' => plugins_url('wp-polls/wp-polls.php'), 'text_wait' => __('Your last request is still being processed. Please wait a while ...', 'wp-polls'), )); } |
The poll_scripts() function will hook onto the wp_enqueue_scripts function. This will allow you to enqueue JavaScripts as well as CSS Styles for your plugin.
As the name goes, wp_enqueue_style() will queue and then print out your plugin’s CSS link.
wp_enqueue_script() will queue and then print out the JavaScript link. The difference between WP2.7’s wp_enqueue_script() and WP2.8’s wp_enqueue_script() is the addition of the last argument which is whether to load the JavaScript in the footer. If set to true, it will load it in the footer, PROVIDED that your theme has the following code:
1 | <?php wp_footer(); ?> |
in the theme footer (refer to the default theme footer.php if unsure). Many themes especially self-created ones has failed to include wp_head() in the header.php as well as wp_footer() in the footer.php. The default value of the last argument is false, which means it will load it in the header by default.
wp_localize_script() will allow your to translate strings within your plugin JavaScript. To access the translated variable, you can use “pollsL10n.text_wait” (without the quotes).
This new hook:
1 | do_action('admin_enqueue_scripts', $hook_suffix); |
will allow you to enqueue your plugin JavaScript or CSS within the WP-Admin area easily rather than calling many times add_action() repeatedly depending on how many pages your plugin has in the WP-Admin area.
The sample code from WP-Polls to print JavaScripts as well as CSS in the WP-Admin area are as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 | ### Function: Enqueue Polls Stylesheets/JavaScripts In WP-Admin add_action('admin_enqueue_scripts', 'poll_scripts_admin'); function poll_scripts_admin($hook_suffix) { $poll_admin_pages = array('wp-polls/polls-manager.php', 'wp-polls/polls-add.php', 'wp-polls/polls-options.php', 'wp-polls/polls-templates.php', 'wp-polls/polls-uninstall.php'); if(in_array($hook_suffix, $poll_admin_pages)) { wp_enqueue_style('wp-polls-admin', plugins_url('wp-polls/polls-admin-css.css'), false, '2.50', 'all'); wp_enqueue_script('wp-polls-admin', plugins_url('wp-polls/polls-admin-js.js'), array('jquery'), '2.50', true); wp_localize_script('wp-polls-admin', 'pollsAdminL10n', array( 'admin_ajax_url' => plugins_url('wp-polls/polls-admin-ajax.php'), 'text_delete_all_logs' => __('Delete All Logs', 'wp-polls'), )); } } |
Firstly, I assigned all the pages of WP-Polls that has an admin page to an array. Next I check whether the current page is within the array. If it is in the array, it means that the user is accessing WP-Polls admin area and thus, I will proceed on to enqueue the JavaScript or CSS needed in the WP-Polls admin area.
Note 1: When you use wp_enqueue_script(), it will automatically register the script and then print it out, whereas if you use wp_register_script(), you will have to manually print it out by calling wp_print_scripts().
Tags: 2.8, footer, Javascript
(114 votes, average: 4.09 out of 5)
[...] see Lester Chan’s Loading Javascript in Footer blog and Andrew Ozz’s Script Loader Updates [...]
[...] Carregar JavaScript no Footer do WordPress 2.8 – Lester Chan [...]
[...] Loading JavaScript in Footer in WordPress 2.8 – Lester Chan [...]
[...] see Lester Chan’s Loading Javascript in Footer blog and Andrew Ozz’s Script Loader Updates [...]
[...] Loading Javascript in Footer in WordPress 2.8 [...]
[...] si veda Lester Chan – Loading Javascript in Footer blog ed Andrew Ozz – Script Loader [...]
[...] 2.8 and the body_class() Function – Nathan Rice Authentication in WordPress 2.8 – Will Norris Loading JavaScript in Footer in WordPress 2.8 – Lester Chan WordPress 2.8 hides the plugin folder by default [...]
[...] and the body_class() Function – Nathan Rice * Authentication in WordPress 2.8 – Will Norris * Loading JavaScript in Footer in WordPress 2.8 – Lester Chan * WordPress 2.8 hides the plugin folder by default [...]
[...] see Lester Chan’s Loading Javascript in Footer blog and Andrew Ozz’s Script Loader Updates [...]
[...] 6. Load JavaScript Files in Footer of Your Theme – Lester Chan [...]
[...] Loading JavaScript in Footer in WordPress 2.8 – Lester Chan [...]
[...] paar Hintergrundinformationen zum Laden von JavaScript/CSS-Dateien via Warteschlange gibt es hier (inkl. der Erklärung wie man JS-Dateien nun auch im Footer laden [...]
Excellent tutorial, thanks Lester.
[...] WordPress 2.8?????????????????????????????????WordPress 2.8??????????????????WordPress????????????????????????Keith Dsouza?????WordPress 2.8???WordPress Codex – Version 2.8WordPress?????2.8??????????????Custom Taxonomies in WordPress 2.8 – Justin TadlokWordPress 2.3 ???Tag??????2.8????????????????WordPress??CMS??????????Build A WordPress 2.8 Widget – WP Engineer??WordPress 2.8??Widget API, ????Widget????????WordPress 2.8 and the body_class() Function – Nathan RiceWordPress 2.8?????body_class()?????????????????class??????????????????????????Authentication in WordPress 2.8 – Will Norris????OAuth???????????????????????????WordPress????????????????Loading JavaScript in Footer in WordPress 2.8 – Lester Chan??????????JavaScript???????????WordPress 2.8????????????http://parandroid.com/wordpress-28-tips-for-developers/ [...]
[...] 2. Loading JavaScript In Footer In WordPress 2.8 [...]
[...] panel admin, karena javascript telah dikompress sedemikian rupa dengan metode gzip, dan juga menempatkannya di bagian footer sehingga mempercepat proses [...]
[...] and the body_class() Function – Nathan Rice * Authentication in WordPress 2.8 – Will Norris * Loading JavaScript in Footer in WordPress 2.8 – Lester [...]
[...] Load JavaScript Files in Footer of Your Theme – Lester Chan [...]
[...] http://lesterchan.net/wordpress/2009/01/26/loading-javascript-in-footer-in-wordpress-28/ 2. http://developer.yahoo.com/performance/rules.html#js_bottom 3. [...]
[...] 2. Loading JavaScript In Footer In WordPress 2.8 [...]
[...] Caricare i JavaScript nel footer del tuo template [...]
[...] Loading JavaScript In Footer In WordPress 2.8 [...]
[...] Loading JavaScript in Footer in WordPress 2.8 – Lester Chan [...]
[...] 6. load javascript files in footer of your theme – lester chan [...]
[...] see Lester Chan’s Loading Javascript in Footer blog and Andrew Ozz’s Script Loader Updates [...]
[...] wordpress 2.8 footer loading javascript [...]
[...] Loading JavaScript in Footer in WordPress 2.8 – Lester Chan [...]
[...] Loading JavaScript In Footer In WordPress 2.8 Ak sa vám tento ?lánok pá?il, tak ho podporte na vybrali.sme.sk, alebo pozrisi.sk. ?akujem. [...]
[...] see Lester Chan’s Loading Javascript in Footer blog and Andrew Ozz’s Script Loader Updates [...]
[...] 23.Loading JavaScript In Footer In WordPress 2.8 [...]