Adding Javascript To WordPress Themes The Right Way

WordPress ScientistWhen I discovered the power of JavaScript I’ve been using it since to enhance my WordPress themes with image sliders, hover animations, drop-down menus…etc.

There is a specific way for adding Javascript to your WordPress theme in order to prevent any conflicts with plugins, the problem is that many theme developers (yes I did this mistake when I was first learning to code WordPress themes) call their javascript files directly in the header.php file instead of the functions.php file.

In this blog post I will show you how to correctly call your javascript files using your functions.php file so they load right into your wp_head tag and also a quick trick for using the Google hosted javascript instead of using the Javascript included with WordPress then the one in the WordPress install.

Wrong Way To Add Javascript To WordPress Themes

Calling the javascript in your header.php file, such as shown below, is NOT the best way and I highly recommend against it because it often times causes conflicts with other plugins that load their own JS scripts.

<script type="text/javascript" src="/scripts/myscript.js"></script>

Using The Google JS Library In WordPress – BAD!

One thing that was pretty popular last year was to use the Google Library instead of using the one included with WordPress. The Google library may load faster but you should never dequeue the core jQuery version!

If you see the following code in your theme. Fix it!

//Use Google JS Library
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2');
wp_enqueue_script('jquery');

The Right Way To Add Javascript To WordPress Themes

The better for adding javascript to your WordPress theme is to do so via the functions.php file using “wp_enqueue_script”. Using an action to load your javascript will help keep your theme out of trouble.

The Action

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Example

<?php wp_enqueue_script('nivoSlider', get_template_directory() . '/js/jquery.nivo.slider.pack.js'); ?>

The code above would add the NivoSlider script into the header.php file at wp_head. As you can see I have only included the $handle, everything else is technically optional but probably a good idea to add to make it easier for people editing the theme.

Using The WordPress Enqueue Hook

Fortunately WordPress has two different action hooks you can use for calling your scripts.

1. wp_enqueue_scripts – action to call this function in your live site

2.  admin_enqueue_scripts – action to call the script on the admin site

Example:

Here is an example of how to create a function and then use the WordPress hook to call your scripts.

eadd_action('wp_enqueue_scripts','my_theme_scripts_function');
 function my_theme_scripts_function() {
 wp_enqueue_script('nivoSlider', get_template_directory_uri() . '/js/jquery.nivo.slider.pack.js');
}
AJ Clarke
Hey. My name is AJ and I am the boss around here. I own and operate WPExplorer. A website dedicated to everything I love about WordPress.
AJ Clarke
This article has 5 comments
    1. AJ Clarke | WPExplorer says:

      In functions.php is fine. But also now in WordPress you can enqueue a script on any file without having too hook into wp_enqueue_scripts

      Admin
  1. Alan says:

    Do you have to add this code for every file? Is there a way to add multiple files without having to call a function for each one?

    1. AJ Clarke | WPExplorer says:

      You have to use wp_enqueue_script() for each file you want to load, but you can place them all into 1 function and hook into “wp_enqueue_scripts”. If you really want I guess you could create an array of the file names you want to load and if they are all in the same location do a foreach loop to go through each of the items in the array so you only use wp_enqueue_script() once.

      Admin

Leave a Reply