How To Setup And Use jQuery in your WordPress Theme

When we think of WordPress, we primarily think blogging, pages, posts, plugins, etc., and eventually we may move on to working with the style.css, templates, functions.php, or other PHP programming.

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: