How To Setup And Use jQuery in your WordPress Theme

But often times last on the list of things to develop in our WordPress site is JavaScript, and more specifically to this post, jQuery.

Maybe its just me but when I think of WordPress, JavaScript just doesn't come to mind. Instead it's PHP, it's template tags, hooks, filters, etc.

Fortunately, if you are running WordPress then you already have jQuery installed and more than likely you already have a JavaScript file or two running in your theme.

Open your functions.php and do a search for .js and you will normally see at least one being enqueued (and from here can see where it is stored in your theme).

Why not use jQuery in your WordPress theme enough, especially if it is already there?

So without further delay, here's how to setup and use jQuery in your WordPress theme:

1. Create Your File

Create a new, fresh .js file. Usually the .js files in the theme are being used for specific tasks and I always find that its easier to just create a new one for your custom purposes. In fact, just label it custom_javascript.js.

The JS folder is often found in the lib folder within your theme, and can be accessed via FTP. So go ahead and create a new one with your text editor and drag it in.

2. Enqueue Your File

In order to link your script to the generated page you must use the wp_enqueue_script function I n your functions.php.

There are two steps to this: Create the function and add the action.

Remember, the file we created was custom_javascript.js and it was in our theme's lib folder. So here is our function:

function my_custom_scripts() {
    wp_enqueue_script( 'custom_javascript', get_stylesheet_directory_uri() . '/lib/js/custom_javascript.js', array( 'jquery' ) );
}

Next, we need to "add action" which hooks our function on to a specific action:

//Links our script to the generated page
function my_custom_scripts() {
    wp_enqueue_script( 'custom_javascript', get_stylesheet_directory_uri() . '/lib/js/custom_javascript.js', array( 'jquery' ) );
} 

//Hooks our function on to a specific action
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

3. Writing jQuery with WordPress

Now you cannot by default use the $ with your jQuery functions in WordPress. It will not works. By default you will have to use the word jQuery in place of the $. For example:

//Not accepted by default in WordPress
$(document).ready(function() {
    $("#gform_6 .gform_title").html('<em>Contact Form 1</em>');
});

//It must be this
jQuery(document).ready(function() {
    jQuery("#gform_6 .gform_title").html('<em>Contact Form 1</em>');
});

I don't know about you but I really like my dollar signs. Fortunately its a simple fix.

Just wrap your jQuery in this function to use your $ within it:

(function($) {

   $(document).ready(function() {
       $("#gform_6 .gform_title").html('<em>Contact Form 1</em>');
   });

})( jQuery );

Conclusion

Now that you can setup and use jQuery in your WordPress theme, go use it. jQuery is lots of fun.

Like I said, it is already there in WordPress just waiting for you to make your site's elements come alive and much more.

Discussion: Do you use jQuery on your site? What do you do with it?