{"id":97931,"date":"2019-12-30T11:20:21","date_gmt":"2019-12-30T17:20:21","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=97931"},"modified":"2024-09-28T11:20:39","modified_gmt":"2024-09-28T16:20:39","slug":"jquery-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/jquery-wordpress\/","title":{"rendered":"How to Use jQuery in WordPress"},"content":{"rendered":"\n

Getting started with development for WordPress<\/a> 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.\u00a0<\/p>\n\n\n\n

That\u2019s where jQuery script comes in. This is a JavaScript library that\u2019s 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. <\/p>\n\n\n\n

In this article, we\u2019ll explain exactly what jQuery is and why it\u2019s useful for WordPress development. We\u2019ll also go over how to add jQuery to your website with and without a jQuery plugin. Let\u2019s dive right in! <\/p>\n\n\n\n\n\n

What is jQuery?<\/h2>\n\n\n\n

To understand jQuery<\/a>, you also need to be familiar with JavaScript<\/a>. 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\u2019s a way to create rules for your website\u2019s content and structure. <\/p>\n\n\n\n

JavaScript operates off of a wide variety of different scripting libraries<\/a>. jQuery is one of those options. In particular, it\u2019s 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\u2019re likely seeing jQuery at work (just to give a few examples).<\/p>\n\n\n\n

Why Use jQuery on Your WordPress Site?<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

This is because you can use a jQuery function to execute certain actions right in the user\u2019s 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.<\/p>\n\n\n\n

In fact, jQuery is actually a part of the WordPress development “stack.”<\/a> This means it\u2019s essential to learn about if you\u2019re planning on doing any development with WordPress<\/a>. <\/p>\n\n\n\n

How to Add jQuery to Your WordPress Site (In 3 Steps)<\/h2>\n\n\n\n

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

Step 1: Enter Compatibility Mode<\/h3>\n\n\n\n

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

To accomplish this, you can use a simple script<\/a>: <\/p>\n\n\n\n

$.noConflict();
jQuery(document).ready(function(){
  jQuery(\"button\").click(function(){
jQuery(\"p\").text(\"jQuery is still working!\");
  });
});<\/code><\/p>\n\n\n\n

Essentially, the goal of a compatibility mode is to avoid issues with using the \u2018$<\/code>\u2019 shortcut. Since jQuery is not the only library that uses that shortcut, you can also designate your own<\/a> after you engage compatibility mode.<\/p>\n\n\n\n

Step 2: Create a Script File<\/h3>\n\n\n\n

To incorporate your functions properly, you\u2019ll next need to create a script file and save it to your theme\u2019s folder. You can name this JS file to represent your new function, and use the Javascript extension (.js<\/em>). For our example, we\u2019ll call our JS file new_script.js<\/em>.<\/p>\n\n\n\n

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

Step 3: Add Code to Your Functions.php File<\/h3>\n\n\n\n

Next, you need to locate the functions.php <\/em>file. This should be in your theme\u2019s folder, but if not, you can simply create your own. This is the file where all the action is<\/a>. You can add custom functions to it, and make your theme unique. <\/p>\n\n\n\n

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

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' );<\/code><\/p>\n\n\n\n

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

jQuery Plugins<\/h2>\n\n\n\n

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: <\/p>\n\n\n\n