If you’re like me, you’ve heard the term jQuery on every other website tutorial you’ve look at in the past few years. And if you’re like me, you’ve resisted taking the time to learn exactly what it can do and how to use it. After recently starting a new job and no longer having the luxury of NOT learning jQuery, I was forced to play catch up. With the help of a great book, an excellent teacher, and several projects later, I’m starting to wonder how I was able to sidestep such an important web developer tool.

The goal of this tutorial is not to teach you everything you need to know about jQuery. Not even necessarily to show you the basics. There are books for that. Specifically, this highly recommended book: JavaScript and JQuery: Interactive Front-End Web Development. After reading the first half of this book, I had more than enough knowledge to get started and learn the rest from stack exchange and the jQuery website. I’m not very impressed with the book binding as the pages came loose after several weeks of use but the content is killer.

My goal is to give you some very basic examples of what jQuery can do for your WordPress website. I believe once you see how easy the code is, you won’t be so intimidated to dig deeper.

First things first. You will not be able to test any of the following examples without referencing the jQuery library. If you’re using a modern WordPress theme like Elegant Theme’s Divi theme, jQuery is probably already loaded. You can skip straight to the first example and start playing around. If your theme does not load jQuery, you can use this guide to install it on your WordPress site: https://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme. And if you’re not sure if it’s loaded, just follow the first example and see if it works 🙂

* All of the examples below are based on the Divi theme but can be used on any theme with a little extra work.

Example One

Since jQuery is just a library for Javascript, it must always be enclosed with the opening and closing script tags. The next thing of importance is the use of the word jQuery. Typically you would use the $ character to begin a jQuery statement but in WordPress, jQuery often runs in no-conflict mode so you’ll need to begin statements with the word jQuery. After the opening script tag, we begin with the document.ready function. This just wraps the next two lines in a function that doesn’t process until after the page has finished loading. This is important because jQuery’s main purpose is to manipulate HTML elements. If those elements haven’t finished loading on the page, jQuery won’t be able to find them and perform the tasks you assign it.

Inside our function are two statements. Both statements are applied to the class more-link, thus the dot notation for class. If we wanted to apply these statements to an element with an id of more-link, we would replace the dot with a pound symbol (#). So we are telling jQuery to look for the class named more-link.

The first statement then uses the .attr method, which allows you to add an attribute to the selected more-link class. The attribute we are adding is target and the value is _blank. Now all links with the class more-link will open in a new tab.

The second statement is using the jQuery text method to change the default text from “read more” to “continue”.

Now let’s add the code to our site and see it in action. If you’re using Divi, go to the WordPress Dashboard->Divi->Theme Options->Integration and paste the code above in the section labeled “Add code to the head of your blog”. Click on the Save button at the bottom. Typically you would add this code to your theme’s footer.php file just above the </body> tag but for practice, we’re taking a shortcut.

If you’re using Divi, all of your read more links on the site will have changed to “continue”. If you’re not using Divi, just create a new post, and add the following in the text editor:

Not too difficult, right? Again, you can find a lot of great information in the jQuery documentation. You can also find a lot just by googling what you want to do: “jQuery remove class” for example. Let’s try something a little more complicated.

Example two

We’re selecting the same link with class more-link. This time we’re using the mouseover function (similar to CSS hover) and creating a function that does something when the link is moused over. In this case, we are creating an alert pop up box with the text “Click me!”. Useful? Not really. But does it show just how easy jQuery is to use? Absolutely! Honestly the most complicated part about using jQuery is making sure everything is properly enclose with apostrophes, parenthesis and brackets. FYI, you might notice I used quotation marks for the .more-link but apostrophes for the alert text. You can use either. As long as you start and end with the same symbol. Let’s try one more example.

Example three

There are a few new concepts here but again nothing too complicated.  We’re selecting the same link with class more-link and applying the same mouseover function. This time we’re using this. In jQuery, this stands for the element you currently have selected. In this case, it’s the link with class more-link. Then we use the parent method which finds the element that the link is inside of. For example if you HTML looks like this:

The parent element to the <a> element would be the div with class container. Because the link is INSIDE of that div, the link is a child and the div the parent. Next we use the CSS method to apply a background color of blue to the parent div. And below that we use the mouseout function to remove the background color when you hover off of the link. Test it out and you should see the parent element that contains your link change to blue when you hover over the link. And back to transparent when you hover off.

I realize none of these example are that useful. Again, my main goal is to show just how easy it is to use jQuery and to hopefully encourage others to give it a shot. Play around with the examples and try different methods which can all be found in the jQuery documentation. If you really want to learn jQuery, I highly recommend this book: JavaScript and JQuery: Interactive Front-End Web Development.

My goal is to use this tutorial as a spring board for some useful, in-depth tutorials that apply directly to the Divi theme. If you’re interested, please sign up for my Weekly Tweaks newsletter to receive future Divi jQuery tutorials.