How to Use jQuery in WordPress

Getting started with WordPress development can be fun and exciting. In terms of programming, it has a fairly low barrier to entry and can be learned quickly. There are aspects of manipulating content and data that are not always clear to newcomers, however. 

That’s where jQuery script comes in. This is a JavaScript library that’s very popular with WordPress developers for creating unique, dynamic, and engaging websites. jQuery is also a solid choice for customizing themes and developing features for plugins. 

In this article, we’ll explain exactly what jQuery is and why it’s useful for WordPress development. We’ll also go over how to add jQuery to your website with and without a jQuery plugin. Let’s dive right in! 

What is jQuery?

To understand jQuery, you also need to be familiar with JavaScript. This is a programming language that can be used to manipulate, calculate, and validate data on a website. It can also be used to update and change Hypertext Markup Language (HTML code) and Cascading Style Sheets (CSS). In other words, it’s a way to create rules for your website’s content and structure. 

JavaScript operates off of a wide variety of different scripting libraries. jQuery is one of those options. In particular, it’s an open-source library that creates client-side (or front-end) functionality. This means that when you see a rotating feature or slider on a website, you’re likely seeing jQuery at work (just to give a few examples).

Why Use jQuery on Your WordPress Site?

There are plenty of benefits to using jQuery code on your WordPress website. Not only can you create engaging, dynamic, and interactive elements for your site’s visitors, but you can do it without clogging up your available bandwidth. 

This is because you can use a jQuery function to execute certain actions right in the user’s browser, without having to make them reload the web page. For example, jQuery can be used to determine what actions will occur when a user clicks on a certain element.

In fact, jQuery is actually a part of the WordPress development “stack.” This means it’s essential to learn about if you’re planning on doing any development with WordPress. 

How to Add jQuery to Your WordPress Site (In 3 Steps)

The jQuery library itself comes bundled with your WordPress installation. That means it’s already in place and ready to be called upon for use. With that in mind, let’s take a look at how you can use jQuery on your WordPress site without a plugin. 

Step 1: Enter Compatibility Mode

It’s important to first put jQuery into compatibility mode. This means that as soon as it’s loaded onto the web page, it will enter a mode that will help keep it from conflicting with any other JavaScript libraries you might be using. 

To accomplish this, you can use a simple script: 

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
  });
});

Essentially, the goal of a compatibility mode is to avoid issues with using the ‘$’ shortcut. Since jQuery is not the only library that uses that shortcut, you can also designate your own after you engage compatibility mode.

Step 2: Create a Script File

To incorporate your functions properly, you’ll next need to create a script file and save it to your theme’s folder. You can name this JS file to represent your new function, and use the Javascript extension (.js). For our example, we’ll call our JS file new_script.js.

The cleanest way to manage your files in this situation is to place this file in a new subfolder within your theme’s main folder, and to call it /js/. Additionally, depending on your theme choice and structure, you might want to also consider creating a child theme to experiment with. This will ensure that your parent theme files remain intact. 

Step 3: Add Code to Your Functions.php File

Next, you need to locate the functions.php file. This should be in your theme’s folder, but if not, you can simply create your own. This is the file where all the action is. You can add custom functions to it, and make your theme unique. 

The way to do this with WordPress is to use the wp_enqueue_script() function. This is how you tell the theme to pull in and use your new_script.js file. Your script might look like this: 

function my_theme_scripts() {
    wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

There are also a number of parameters you can use with the wp_enqueu_script() function. All but one of these parameters are optional. The one you must include is the $handle parameter, which designates the unique name of the script. 

jQuery Plugins

If diving into the world of WordPress functions and scripts is not for you, there is an alternative option. There are plugins you can use that will help you incorporate jQuery script into your website. Two quality options include: 

• Advanced Custom Fields: This plugin makes it easy to add custom fields to your edit screens, by making extensive use of this jQuery function. 
• Simple Custom CSS and JS: This tool is useful if you want to make changes or additions to your WordPress theme with custom JavaScript code without having to write the code.

We do recommend gaining at least a basic knowledge of jQuery and how it works with WordPress before choosing a plugin to work with.

Using jQuery With a WordPress Plugin (In 2 Steps)

If you know what you want to accomplish by including jQuery scripts on your WordPress website, you should be able to find a plugin in the directory that will help. Let’s look at one example of how using this type of plugin on your site might work.

Step 1: Install the Plugin and Add a New Custom Field

For our example, we’re going to use the Advanced Custom Fields plugin: 

Once you’ve installed and activated the plugin, you’ll be able to adjust its settings for use on your website. Then, you can navigate to Custom Fields > Add New to create your first custom field: 

The first thing you’ll need to do is label the field group your custom field will belong to: 

You can then use the Add Field button to name your new field. This will open up a form where you can add all the information about it: 

After you fill out the new field form, you can also designate a location for your field. This means you’ll choose the edit pages the field will appear on: 

You’ll have a lot of options to choose from here, depending on your website’s structure and WordPress theme. Once you’re done configuring your settings, you can Publish your new field and it will be available in the location you designated. 

Step 2: Test Your New Field

In our example, we created a custom field that is supposed to appear on the post edit page. To test the field, you can navigate to Posts > Add New: 

Your new post will now have a custom field below the main editing area. You can design custom fields that accomplish a wide variety of tasks – to learn more about your options, check out our full guide on the topic.

Get Ahead With WP Engine

Understanding how to enhance and extend WordPress’ native features can help you take your website’s experience to the next level for its users. Having the right jQuery tutorial and web developer resources on hand can be your ticket to tackling new techniques with WordPress. 

WordPress hosting with WP Engine means building the ultimate digital experience, with advanced techniques, professional support, and reliably fast WordPress hosting!