You can’t work with WordPress for too long without hearing “just use a little jQuery for that” as the answer to a question about how to customize your WordPress site. jQuery is an excellent JavaScript library that is fairly simple to use for everything from dynamically adjusting how a site looks, to more complex coding. In this article I will go over some jQuery basics, such as how to target elements on the page, change their appearance, and reach to events such as clicks.
If you didn’t read my article on how to include custom JavaScript on your WordPress site, I recommend you read that to understand how to load your code that uses jQuery. But, you will need a JavaScript file for your own code of course.
Loading jQuery In WordPress
As I said, WordPress ships with a copy of jQuery that other plugins and themes assume is available. This also means you don’t need your own copy. Almost every site is going to already have jQuery loaded, but to be safe, you can tell WordPress to load it, like this:
You can put that in your theme or child theme’s functions.php.
One super important thing to keep in mind about WordPress is that it loads jQuery in what is called “no conflict mode” which is not jQuery’s default behaviour. Most examples of jQuery code you will see on the internet uses $ as an alias for jQuery. But that doesn’t work in non conflict mode, which is annoying, but there are good reasons that WordPress does this. As a result, most of the time, we want to wrap our jQuery code in a no conflict wrapper like this:
The jQuery Constructor
Most of the time when we are using jQuery, we create a jQuery object with a specific collection of HTML elements, and then use that object, to act on them. We create that collection using the jQuery constructor. For example, if we wanted to affect all p tags on a page, we would start with $( ‘p’ ) or if we wanted all HTML elements with the class “entry-content” we would use $( ‘.entry-content’ ) . If you know how to target HTML elements with CSS, then that’s great as almost exactly the same rules for creating CSS selectors apply to targeting elements with jQuery.
The jQuery constructor doesn’t do anything besides create a jQuery object. The real fun comes in when we use a jQuery method on that object. For example, the method css() applies CSS changes. Take a look at this example:
In this example, we have two jQuery constructors. Because they use different selectors, they will act on two different collections. The first targets “.entry-content” so it will act on two elements. The second one targets “#post-2” so it will only affect the element with the id “post-2”.
Both are jQuery objects, and can do the same thing, such as use the css() method to add CSS rules, but they apply to different collections of HTML elements. That’s the most important concepts to understand with jQuery — how to target the right elements, and understanding that every object has the same methods, but a different collection of HTML elements.
I’ll let you explore the other fun methods you can use, but make sure you’ve got that concept down first. Then I recommend you learn, in addition to css(), the show(), hide(), and toggle() methods.
jQuery Events
The last section was useful for understanding a concept, but it wasn’t practical. You can apply CSS rules without jQuery. It only make sense to use jQuery for dynamic changes to content. For example, if you want to show some content when a button is clicked. In that case, you would use your regular CSS to hide the content and then use jQuery to show it when a button is clicked. Or what if you wanted to hide post’s from your blog post’s index when a “hide” link was clicked? Those are good uses for jQuery.
In the last paragraph I talked about to doing something when something else happened. A more technical way of saying that would be “binding a function to an event.” JavaScript is an event-driven language. It allows us to react to events in the browser like clicks, scrolling, form submission or more. jQuery makes “binding” functions to these events simple using the on() function. For example, to bind a function to a click on a specific link, we would do this:
In the code above, we create a jQuery object for the element with the ID “important-link” and then use the on() method to bind to the click event, and then provide an inline callback function — a function jQuery will call when that link is click. There are other events we can use there — check out the docs for on() — but let’s stick to click for now.
One important thing to note is that this code, as written above does not prevent the default behaviour of a link — to go somewhere — from happening. But see how that function has an argument called event? That is an object that has a method called “preventDefault” which we can use to prevent the default behaviour of the event, in this case navigation. Take a look:Now
Now let’s do something practical with that. Here is an example to put a hide button for a post:
This uses two constructors. The first is used to bind to the link’s click event. The second, which only runs in after that event happens will hide the element with the ID “post-7”.
That’s cool, but if we have to do this for all posts on a page we don’t want to write the same code over and over again for each post. Instead we can target by class. So imagine this PHP loop to output posts:
Each post has a hide link, but that element has a class instead of an ID so we can bind one function to clicks of all of those links. The tricky part is that we don’t want to hide all posts, just one. This problem is solvable, but we are going to need to learn two other important concepts. The first is that inside these callbacks, we can get a jQuery object for the element that the event happened to with $( this ). That’s great because it will give us just the one element with the class “hide-post” instead of all of them.
The other important thing to learn is that jQuery ahs methods for modifying the current collection of elements. For example in this case we don’t actually want to hide the link button, but the div surrounding it. That element is its immediate parent, so we can use parent() to switch to that element. Take a look:
In the callback we start with $( this ) which would affect the link clicked, but then we use parent() to switch the collection to the container that link is in, and then we call hide() to hide it. Problem solved and no need to target elements by ID, which would have been a lot tricker.
By the way, if we wanted to go in the opposite direction as parent() goes, we could have used children() to get element contained by the current selection.
Get Started With jQuery in WordPress
Caldera Forms makes use of a ton of code like this for everything from conditional logic, to page switching and even the AJAX powered form submissions. It gets pretty complex, but these are the basics to get started. Play with them in your theme, or elsewhere and have fun.
I’ll be back next week with some more practical examples of how to use jQuery to build more dynamic and more fun WordPress sites.
All cute cat images are from Pixabay, creative commons licensed and adorable.