How to Properly Add jQuery Scripts to WordPress

How to Properly Add jQuery Scripts to WordPress

Despite the fact WordPress has been around for a while, and the method of adding scripts to themes and plugins has been the same for years, there is still some confusion around how exactly you’re supposed to add scripts. So let’s clear it up.

Since jQuery is still the most commonly used Javascript framework, let’s take a look at how you can add a simple script to your theme or plugin.

jQuery’s Compatibility Mode

Before we start attaching scripts to WordPress, let’s look at jQuery’s compatibility mode. WordPress comes pre-packaged with a copy of jQuery, which you should use with your code. When WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries.

What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead. Take a look at the code below to see what I mean:

Linking Your jQuery Scripts

Now that you can write valid jQuery code for WordPress, let’s link our work to our website. In WordPress the process is called enqueueing. For a regular HTML website, we would use the <link> element to add scripts.

WordPress ends up doing the same thing, but we’ll use special WordPress functions to achieve it. This way, WordPress handles all our dependencies for us – thanks, WordPress!

If you’re working on a theme, you can use the wp_enqueue_script() function within your functions.php file. Here’s how.

The function takes five arguments. The first is a handle you can use to refer to the script, the second is the location of the script file, the third parameter is an array of dependencies.

I’ve added jQuery as a dependency since the script uses it. If you create a script that depends on “my-great-script,” you should add it to the dependency list so WordPress knows which files to load first.

The fourth parameter is a version number and the fifth lets WordPress know where to put the script. By default, scripts will be loaded in the header, which is bad practice and will slow down the page loading of your site (browsers halt all loading whenever a <javascript> block is encountered). You should load all of your scripts in the footer when possible by making sure the fifth parameter is true.

Adding Scripts to the WordPress Admin

You can also add scripts to the admin. The functions used are exactly the same, you just need to use a different hook. Take a look at the example below:

Instead of hooking into wp_enqueue_scripts we need to use admin_enqueue_scripts. That’s it!

Using Conditional Tags

Use conditional tags to only load your scripts when necessary. This is more often used in the admin where you would want to use a script only on a specific page, not the whole admin. This saves bandwidth and processing time, which means faster loading times for your website.

Wrapping Up

Adding simple jQuery scripts to WordPress is not difficult at all once you know how. There is a little bit of an overhead compared to doing it in vanilla HTML, but there is also the added benefit of dependency management and clarity.

Do you use jQuery on your site? What other jQuery tips and tricks would you like to see on our blog? Let us know in the comments below.

13 Responses

hello thanks for this tips … but i want to add things like css,html and javascript custom code to wordpress which i can use on pages and widgets !!
there the code that i want to add : https://jsfiddle.net/zvjr693x/

You probably don’t know it, but what you’re asking for is totally unrelated to this article. These are the kind of things you should learn on your own (especially HTML and CSS). I’ll try to point you in the right direction, though.

HTML and CSS can go directly into the page or widget. Make sure you are using the text editor for pages (not visual editor), or the text widget if you want to put code in a widget. CSS MUST go in style tags if you plan to put it on the same page/widget.

Personally, I just write jQuery each time. It’s not that much of a hardship, plus, when using Codeanywhere, I type “j” and it autofills the “Query” anyway.

Also, the point you made about conditional loading being mainly for admin, I’ve been looking at this for the front end as a potential opportunity for squeezing additional milliseconds off load time for a client’s site. Would be good to know if there are any specific tips here.

Also, tell more people about localizing scripts in WordPress. It’s a life changer!

personally I always try to load conditionally even in frontend where possible. it is very easy to add up scripts and css and end up having a huge amount of them in each page, when you use just a few of them actually.
it is indeed one of the biggest issues with premium multipurpose templates, opposed to an optimized bespoke template. with the latter, you know exactly in which conditions you’ll need a script or a style, and you can really make the difference with smart packaging and smart loading. ;)

Since making changes to Upfront and its child theme files is not recommended I would suggest creating new plugin or mu-plugin that will include your custom files and enqueue them using wp_enqueue_script.