The correct way is to handle it within your theme functions.php file, very straight forward to set-up and will only take a few minutes once you’ve got used to the process.

Step One

Locate your theme folder and open up the functions.php file. Generally its good practice to include your scripts at the top of the file, first we define our template directory which we will be using later on, copy and paste the following code:

define("THEME_DIR", get_template_directory_uri());

Step Two

The next step is to use WordPress built in function enqueue_scripts() where we register our scripts. Copy and paste in the following function just below our previous snippet:

function enqueue_scripts() {
	if (!is_admin()) {

	}
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

Within the function is a conditional statement if (!is_admin()) which basically means if the user it not in the WordPress administration area include the following scripts as the scripts we are including are only for the frontend of the site.

Step Three

We now need to register our JavaScript files. First we’ll include the jQuery library. We can do this in two ways:

  1. We could use the Google API and fetch the jQuery library from their servers
  2. We could use WordPress built in jQuery library.

The advantage of using the Google API is speed. A lot of sites on the web now use the Google API to fetch the jQuery library meaning if the visitor has previously visited one of these sites they will already have a cached version of the jQuery library stored in their browser and therefore they won’t need to download it again.

In our example we will include both methods, copy and paste the following within your if (!is_admin()) function:

// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', false, '1.7.2');
wp_register_script('validation', 'http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js', 'jquery');

wp_enqueue_script('jquery');

If you refresh your site on the frontend and view source you should now see the jQuery library coming in from the Google API in the head tags. If you do want to use WordPress local copy of jQuery simply comment out the top two lines.

Step Four

Now we have the jQuery library coming into the page we can include our own custom JavaScript files. This is simple enough and below are two examples. We simply put these under the jQuery wp_register_script we did in step three:

wp_register_script('custom-script', THEME_DIR . '/js/custom.js', array('jquery'), '1.0.0', true);
wp_register_script('plugin-easing', THEME_DIR . '/js/plugins/easing.js', array('jquery'), '1.3', false);

wp_enqueue_script('custom-script');
wp_enqueue_script('plugin-easing');

You will see the first area registers the scripts and then the second area includes the scripts onto the page. Please refer to the image below for full explanation of the parameters for the wp_register_script

Your scripts section within your functions.php file should now look something similar to this:

define("THEME_DIR", get_template_directory_uri());

function enqueue_scripts() {
    if (!is_admin()) {
         // comment out the next two lines to load the local copy of jQuery
         wp_deregister_script('jquery');
         wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', false, '1.7.2');
         wp_register_script('validation', 'http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js', 'jquery');
         wp_register_script('custom-script', THEME_DIR . '/js/custom.js', array('jquery'), '1.0.0', true);
         wp_register_script('plugin-easing', THEME_DIR . '/js/plugins/easing.js', array('jquery'), '1.3', false);

         wp_enqueue_script('jquery');
         wp_enqueue_script('custom-script');
         wp_enqueue_script('plugin-easing');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

Conclusion

That’s all there is to it, pretty simple and keeps your scripts in a unified area within your theme functions file. If you want to change the jQuery library to a different version simply change the version number and update the script path to the relevant path.