Become Wordpress Professional - Your Ultimate Wordpress Guide

Friday, 16 August 2013

Preferred Way to integrate JavaScript Files inside Head Tag

There are a couple of methods that can be utilized to attach a JavaScript file in the head tag of a wordpress site. The easy method which is not preferred is to directly copy the source link to the JavaScript File and place it in the header.php file available within your currently activated wordpress theme. Lets have a look at the more preferred and better way to attach an external JavaScript file to your site.

Integrating JavaScript inside Head tag : The Preferred way

We know that wordpress has provided us with an awesome resource of well documented pages that pretty much describe, each and every thing about wordpress.

The function that is assumed to be more safe in embedding external JS files is: wp_enqueue_script()

This function can be used inside the functions.php of your theme files. Below is an example how it is used:

Lets say I want a javascript file: dropdown.js to be included that is inside the js folder of my current theme's directory, here is the process:
/* This is an action hook that tells wordpress to load the function 
my_custom_javascript_file when preparing to embed the scripts in the head tag. The first parameter is the default action hook and the second parameter is the function name that has been defined below. */
add_action('wp_enqueue_scripts','my_custom_javascript_file');

function my_custom_javascript_file(){

// getting the directory URL of the current template and storing into a variable

$directory_url = get_template_directory_uri();

// the function wp_enqueue_scripts accepts a couple of parameters in general but many of them are optional. The first parameter is the handle, a name that you would like to give, it can be any name basically. The second parameter is the URL to the JavaScript file that needs to be included.

wp_enqueue_scripts('my-script-name', $directory_url.'/js/dropdown.js');

}

Multiple Dependent Scripts

Now the above example is not as much flexible as it should be because let's say that the dropdown.js file that we included above requires jQuery JavaScript to be loaded before it can be executed, in this case wordpress has provided with a list of buit-in set of scripts already registered , which can be used easily when required. If the dropdown.js is loaded before the jQuery does, then the script wont work since it is dependent upon jQuery script. Below is how we deal with this situation:
add_action('wp_enqueue_scripts','my_dropdown_js_file');

function my_dropdown_js_file(){

$directory_url = get_template_directory_uri();

// Note that we have simply passed a third parameter, an array which will help us load jQuery Script before loading the dropdown.js script, this comes as one of Registered script that wordpress has by default from a great number of scripts available.

wp_enqueue_script('dropdown-script', $directory_url.'/js/dropdown.js', array('jquery'));

//If you need to include more JavaScript files, simply add another wp_enqueue_script() function with it's respective parameters.

wp_enqueue_script('another-script', $directory_url.'/js/another-script.js');
}
Technically the another script that we included above will be in the third position in the head tag while the jQuery will be above the both two of the scripts and dropdown.js script will be rendered at the second position.

0 comments:

Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.