Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Add jQuery to WordPress

DZone's Guide to

How to Add jQuery to WordPress

In this tutorial, we'll go through adding jQuery script files using the process of enqueueing, as well as adding jQuery to your WordPress footer and headers.

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

If you search online for how to add jQuery scripts to WordPress, you will get a plethora of results. But, if you are not a programmer or not that familiar with WordPress, you may find the online resources a bit hard to understand. This is where we come in. In today’s article, we will show how to add jQuery Scripts to WordPress. However, before we start, let’s take a look at jQuery and WordPress.

jQuery

The popularity of jQuery is phenomenal. And, why not? It gives developers an extra edge when developing their application for the web. It is also one of the most popular libraries for JavaScript. It is a smaller library and also cuts down the load time. In short, to speed up WordPress, you need to use jQuery.

Tasks such as DOM manipulation, AJAX calls, animation, and others can be done quickly with jQuery. In short, it is instrumental in web development. It is lightweight, offers a more comprehensive range of plugins, and also works with WordPress.

Initially, WordPress didn’t support jQuery. However, the popularity of jQuery and the demand by developers, made WordPress finally include jQuery in their platform. It was first introduced in WordPress 3.8.1. After that, it is used in almost all the themes and plugins.

If you are not sure how to get started with jQuery or don’t know how to add jQuery scripts to WordPress, we will help you do so. So, without any further delay, let’s get started.

Note: We recommend not trying this on a live website. Try it out your local WordPress installation before going live. You can also create a backup before trying to change any code on your site!

How to Add jQuery Scripts to WordPress

1. Understanding Compatibility Mode

Before we use jQuery in WordPress, we need to understand the compatibility mode. As WordPress is a content management system, it has to take care of the compatibility between the different plugins and themes within the whole system. To ensure that jQuery works as intended and doesn’t interfere with the other plugins, compatibility mode is used. In other words, it is a way to ensure that it doesn’t conflict with other libraries.

To make the compatibility works, you cannot use the $ sign in your code. Instead, you need to use jQuery. Let’s take a look at an example below.

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

The same code, when written without compatibility mode, is given below.

$(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

Basically, any instance of the $ sign should be replaced with jQuery to make the code work with Wordpress.

2. How to Bring Back the $ Sign for Writing jQuery for WordPress

It is a known fact that using jQuery every time instead of $ can be a frustrating experience for a developer. Also, it makes the code unnecessarily long. However, we can use the $ sign if we do some tweaking.

Before we share the tweak, let’s recap how jQuery sytax works. It is as below.

$(selector).action() 

  • $: The dollar symbol tells the interpreter that it is jQuery.

  • (selector): It signifies the HTML element that it needs to find. It acts as a query.

  • action(): a function that will be performed on the element(s).

Now, that we understand the basic syntax, let’s take a look at the code that maps jQuery to $.

(function($) {
  $('.hideable').on('click', function() {
    $(this).hide();
  })
})( jQuery );

You need to wrap the code in an anonymous function. It will only work in the footer.

You a;sp need to wrap the whole code in a document-ready function as shown below, to make jQuery work in the header.

jQuery(document).ready(function( $ ) {
  $('.hideable').on('click', function() {
    $(this).hide();
  })
});

However, we don’t recommend using jQuery plugins in the header as this can slow down your website.

3. Creating Your Script File

As it is not possible to push your jQuery to the footer and header every time, it’s time to create your script files and then integrate them. To do so, you first need to create a JavaScript file. The file needs to be put into the theme folder that you intend to use. You can also keep the file in the “.js” folder to keep things clean and accessible.

For this tutorial, let’s name the file, “script_new.js.” It needs to be placed in theme folder’s subfolder. So, how will the path look? It will be theme/js/script_new.js.

The script can be anything from manipulating a simple HTML element to printing out “Hello, World” on the screen. It all depends on you what you want to do.

4. Finding the functions.php File

Before we move forward, we recommend you create a child theme. The child theme will ensure that your main themes file remains safe. However, before you create it, do check out if your parent theme already contains jQuery functions or not.

Once this is complete, we need to find the functions.php file. It is the file where all the magic will happen. If you are not able to find any file named “functions.php,” feel free to create one.

Now, to load the script_new.js file to every page’s header; you need to add the following code in your functions.php file as well.

<?php
function add_custom_script() {
    wp_register_script('custom_script', home_url() . '/wp-content/themes/theme/js/script_new.js', array( 'jquery' ), ‘1.0.0’, true);
    wp_enqueue_script('custom_script');
} 
add_action( 'wp_enqueue_scripts', 'add_custom_script' );
?>

The above code pulls your script file and enqueues it for WordPress. The process is known as enqueueing.

5. Using Plugins to Achieve the Result

Even though we recommend integrating jQuery manually, you can also use a plugin to do so. The plugin that we suggest is jQuery in Posts Pages. The plugin is lightweight and straightforward. You will be able to use it without any difficulty. With this plugin, you can add custom jQuery and JavaScript code to any of your website’s page, post or custom post type.

All you need to do is add the custom code to the plugin code editor. The free version only supports jQuery and JavaScript, but you can also try out the PRO version which has many more features, including CSS.

Conclusion

We hope that you liked the tutorial. In this tutorial, we went through adding jQuery script files using the process of enqueueing. We also discussed how to add jQuery code in the header and footer of a WordPress theme. Moreover, we covered adding jQuery code using a simple plugin known as “jQuery in Posts Pages.”

If you think we missed something, don’t forget to share your thoughts with us. We are listening.

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:
jquery ,web dev ,javascript ,wordpress cms

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}