Troy Chaplin

Design & Development

Posted in the Blog

Deregister and Move WordPress Plugin Javascripts Into the Footer

As a javascript is being loaded on a site, it will prevent any other item from downloading. This can be very frustrating for your visitors if the scripts are loading before the images, styles, or other site components. Having your javascript calls placed in your footer will allow other resources on your site to load first, effectively speeding up the overall load time of your site.

Often times a WordPress plugin will use a javascript, but the plugins load them into the wp_head tag. Moving a plugin javascript into the footer area requires a simple function, but is dependent on the plugin authors inclusion of the wp_print_scripts action. Search the plugins main php file for the wp_print_scripts item, and it will be closely followed by the script name.

The following piece of code uses a sample to move the javascript from the WP-Codebox plugin:


add_action('wp_enqueue_scripts', 'wp_codebox_scripts');
function wp_codebox_scripts() {
	wp_enqueue_script('codebox', plugins_url('wp-codebox/js/codebox.js'), array('jquery'), '2.50', true);
	wp_localize_script('codebox', 'codebox', array(
		'ajax_url' => plugins_url('wp-codebox/wp-codebox.php'),
		'text_wait' => __('Your last request is still being processed. Please wait a while ...', 'codebox'),
	));
}

Before inserting the code into the functions.php file of the WordPress theme, open your theme footer.php and check to see if it contains the following line of code, if not, then add it above the closing body tag. Note: both the wp_header and wp_footer are used by a plugin file to insert CSS and javascript code into your theme.


<?php wp_footer(); ?>

On lines one and two of the full function, the first line will add an action to hook into the wp_enqueue_script, and replace it with an action of your own choosing, in this case wp_codebox_scripts. Then on line two, you specify the name of your newly created action to register it as a function, as seen in the following example:


add_action('wp_enqueue_scripts', 'wp_codebox_scripts');
function wp_codebox_scripts() {

Navigate into the plugin folder and open the main php file and do a search for wp_print_scripts. This function will only be possible if it is available in the plugin structure. In the wp-codebox.php file, the print scripts action can be found on line 61, and a little further down on line 67 we see the line of code that includes the wp_enqueue_script which also contains the script name and the path to the plugin javascript file:


wp_enqueue_script('codebox', get_bloginfo ( 'wpurl' ) . '/wp-content/plugins/wp-codebox/js/codebox.js', array('jquery'), '0.1');

Make note of the script name and path to the javascript file and insert it into line 3 of the full function code (note: because the function uses a plugin_url reference, you should not add the wp-content and plugins slugs as part of the path to the javascript file):


wp_enqueue_script('codebox', plugins_url('wp-codebox/js/codebox.js'), array('jquery'), '2.50', true);

On line 4 there is two areas that you would need to insert the script name, as seen in the following example. Line five also requires you to insert the plugin directory, as well as the main php file name:


wp_localize_script('codebox', 'codebox', array(
'ajax_url' => plugins_url('wp-codebox/wp-codebox.php'),

Once you’ve added the proper script names and paths in the final function, refresh your site and take a look at the source code. You should see that the call to the plugin javascript is located in the footer, as opposed to the header.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>