jQuery is a very popular, if not the most popular, Javascript library. It’s a clear, concise library, and more importantly, it’s fast. Being relatively small in size, in most cases, it works well without slowing load time down. It simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation, event handling, and animating. It allows you to add this interactivity to your site quickly, without the need to write vanilla JavaScript.

Why is jQuery so great?

• It’s lightweight compared to most other JavaScript frameworks.
• It has a wide range of plugins available for various needs.
• It is easy for designers and developers to learn.
• It’s included with WordPress.

jQuery is so popular that WordPress automatically comes with it loaded. (This started in  WordPress 3.8.1.) Just because WordPress comes with jQuery, however, does not mean it is ready for use right out of the box. If you are using or creating a theme where jQuery is not called yet, you will have to do a couple things before you can start utilizing it.

How to add jQuery functionality to your WordPress theme

While WordPress comes with jQuery, you still have to make sure that you are actually adding it to your theme so you can use it. This is done by enqueueing the script and then specifying and adding to a file with the jQuery code snippets. This can be done in two simple steps.

First, make your script file and put it in the theme folder

Create a new JavaScript file and place it in the desired theme folder. Most often, designers create a js folder to keep things organized. For this example, I’ll  add a file called custom_scripts.js, which is placed in a subfolder of the theme folder. The path would look like this: mytheme/js/custom_script.js. With jQuery, the file extension will have a .js on the end, just like we do with regular JavaScript files, so there is nothing new there.

Below is an example of a simple jQuery script that could go into the custom_script.js file. This is a good way to test things out.

https://getflywheel.com/layout/how-to-add-jquery-wordpress-theme/