JavaScript for WordPress Developers: Getting Started With jQuery

Blog post checklist
August 4, 2016
Divi 3.0 Sneak Peek: The Very First Video Screencast Of The New Builder In Action
August 5, 2016
Show all

jQuery is a popular open source JavaScript library that enables you to make websites interactive and create animations.

It was designed to simplify the client-side scripting of HTML and is widely used, with installation on 65% of the top 10 million highest-trafficked sites on the web.

This is the second post in our four-part series focusing on JavaScript for WordPress developers. Throughout this series, you’ll learn the basics but I’ll presume you already have a working knowledge of HTML and CSS. If you need help with these building blocks, take a look at our series about WordPress Development for Beginners.

In the previous two tutorials, we looked at the basics of Javascript, including syntax, variables and functions, as well as Javascript objects. These tutorials should have prepared you for using jQuery, which we’ll use to add awesome functionality to our WordPress site.

Getting Started

Before we begin, let’s make sure we’re all starting from the same place. The one prerequisite for this tutorial is access to a WordPress website with the ability to edit files. I don’t recommend experimenting on a live site, so please use a test installation or a local copy.

We have a couple of articles to help you set up a WordPress installation locally, this will make testing a lot faster since you won’t be reliant on your internet connection. If you’re a Windows user take a look at How to Install XAMPP and WordPress Locally on PC/Windows. If you’re on Linux or OSX head over to our articles How to Develop WordPress Locally with MAMP article. I personally prefer Vagrant, which can be used on either system but any of them will be fine for our purposes here.

Creating a Child Theme

Let’s use the default WordPress theme, Twenty Sixteen, for testing. Modifying the code of an existing theme is bad practice so we’ll create a child theme. Child themes inherit all their functionality from parent themes, except where specified.

Create a new directory in your themes folder named jquery-test-theme. Create three files within: style.css, scripts.js and functions.php. Add the following to the stylesheet and save it:

.gist table { margin-bottom: 0; }

Add the following to the functions.php and save it:

.gist table { margin-bottom: 0; }

Don’t worry if you don’t understand what’s going on here, we’re just setting up our test environment, focus on the upcoming Javascript code for now. Once you’ve put that code into place you should see your child theme in the appearance section.

Our child theme in the Appearance section.
Our child theme in the Appearance section.

jQuery Without WordPress

WordPress loads jQuery for you but if you’re not working in WordPress you’ll need to include it yourself before any jQuery code you write. Head over to the jQuery website to grab a copy.

jQuery Basics

jQuery is a Javascript framework used primarily for DOM traversal and manipulation (finding things on page and modifying them), handling events (modifying what item do on click, hover, etc.) and AJAX (asynchronous loading of data).

In this tutorial, we’ll be focusing on the first two. Let’s start with DOM traversal and manipulation.

Note: Usually jQuery allows you to use the $ function. To make sure conflicts don’t happen WordPress uses safe mode which means you need to use jQuery instead of the dollar sign. There are ways around this which we’ll discuss later

Finding Elements With jQuery Selectors

Adding a selector within a jQuery() function will grab all instances of that element. We can use it to grab the theme’s header and recolor it. Write the following code in your scripts.js file.

.gist table { margin-bottom: 0; }

This should result in something similar to the rather ugly display below.

Modified element with jQuery
Modified element with jQuery

If you use a selector which matches multiple elements they will all be grabbed by jQuery so you can modify them all in one go.

.gist table { margin-bottom: 0; }

Modified widget titles
Modified widget titles

A number of selectors can be used to fine-tune the elements you want to select. For example, you can use :eq() to select an element with the given index from a section. Let’s only make the first widget’s title red.

.gist table { margin-bottom: 0; }

The :gt() selector selects elements with an index greater than the one given. Let’s recolor all widget titles after the third:

.gist table { margin-bottom: 0; }

Indexes always start at 0 so 2 is actually the third element. Since we’re recoloring everything after the third element the first element to be recolored will actually be the fourth.

The :not() selector removes an item from a selection. We can utilize it to recolor all titles except ones in category widgets.

.gist table { margin-bottom: 0; }

Using the not selector
Using the not selector

Take a look at the full list of selectors on the jQuery documentation page.

COURSES

WP Academy – WordPress Wisdom, Bitesized.

Structured e-learning to expand your WordPress and general business horizons. Learn from people like our very own CEO James Farmer with more than a decade’s experience running a WordPress Business!.

LEARN MORE

Traversing the DOM

jQuery offers a bunch of functions that allow you to traverse the DOM. You start out from a selected DOM node and then use traversal functions to arrive at your final destination.

Let’s use some of these functions to recolor the widget titles using a different method.

.gist table { margin-bottom: 0; }

Initially, we select aside, which is the sidebar’s container. We then use the children() function to grab all direct children of the node. In our case, these are section elements that contain the widgets. Finally, we use find() to find elements with the given selector – h2 – and we recolor those.

Beware of how you select! Since we’re selecting all h2 elements within the widget we might recolor titles that are contained within, not the widget title.

The has() function can check for the existence of a selector within an element. We could use it to recolor the background of widgets that have a widget title. This would exclude the search widget, which has no title.

.gist table { margin-bottom: 0; }

There are a number of useful traversal functions you can use to pinpoint elements exactly.

Modifying Content

You can also remove, add or modify content on the page by using a few jQuery functions. The most basic way to add content is to select and element and use html() or text() to inject content into it.

.gist table { margin-bottom: 0; }

The html() treats the string you enter as HTML, Tags will be converted to the proper elements. text treats the string as text, tags will not be converted but output as-is.

The append() and prepend() function can add content before and after the content contained within the selected element.

.gist table { margin-bottom: 0; }

Appending text to the site description
Appending text to the site description

Modifying Properties and Styling Elements

You’ve already seen a bit of styling – I’ve used the css() function in most of the code samples above. The function takes an object you can use to apply multiple CSS properties and values. Here’s an example that modifies post titles:

.gist table { margin-bottom: 0; }

Styling with jQuery
Styling with jQuery

Note that CSS properties with dashes get converted to camel case so you should use marginBottom, borderRadius and so on. Camel casing is quite popular in JavaScript so you should start getting used to it now!

Awesome as that might look, it’s not really jQuery’s job to make things look nice – that falls under CSS’s purvey. If you really must add styles with jQuery, I recommend modifying class names instead and using your stylesheet to implement styles.

.gist table { margin-bottom: 0; }

The addClass() function adds the given class so we can then add the styles to our stylesheet instead. You can use removeClass() to remove a class or toggleClass() to toggle it.

To modify HTML attributes you’ll need the attr() function. If used with one parameter it gets the attribute, if you used with two it sets the given attribute to the given value.

.gist table { margin-bottom: 0; }

The first line returns the id of the given element. The second line modifies the ID to the one given.

With the Javascript now becoming more widespread data attributes have become more prevalent. These are used for adding our custom data to HTML elements. If I wanted to delete a post using jQuery I would need a way to read its ID from the HTML element.

Currently, this is possible, but I would need to look at the id, remove the string “post-” and use the remainder as a numeric ID.

information like this is often stored in a data attribute, it looks something like this:

.

You can use attr( 'data-id' ) to retrieve this value but jQuery has a shortcut: the data() function. It works the same way as attr(). If you give it a parameter like id it will get the value from data-id.

Events in jQuery

Events allow you to respond to certain user actions. You could create a drop-down menu that opens on hover, implement a popup when the user reaches the bottom of the screen, and so on.

W3Schools has a list of commonly used jQuery events. We’ll take a look at how to implement one here.

.gist table { margin-bottom: 0; }

The result of this function is an easter egg on your site. If the user double-clicks the masthead the text of the site description will change.

There are a few ways to attach events to elements. I favor this method because it will work even if the element is added after page load – this will be an issue when we look at AJAX in the next article.

The on() function takes three arguments. The first one is the event to listen for, the second is the element to attach it to, the third is an anonymous function that performs a given action.

Toggling Widgets With jQuery

Let’s use what we’ve learned to create a simple widget toggle functionality without touching any code in theme files. We’ll prepend an element to the widget, which will toggle the widget contents on-click. We only need four lines of code!

.gist table { margin-bottom: 0; }

The first line prepends a span element with the class toggle-widget to each widget. A click event is attached to this element. Within the anonymous function we use jQuery(this) which refers to the actual element clicked.

This is different for each widget since each toggle span is a separate element. We find the element’s parent by traversing the DOM and then find all elements within the widget that are not the title or the toggle button and use the toggle() function to toggle them. That’s it!

Toggling widgets using jQuery
Toggling widgets using jQuery

Practice, Practice, Practice!

At this point you know a lot of things about jQuery. You could create functionality, which would take the user to the article when any part of the excerpt is clicked, you could create selectable skins for your website and a lot more. I recommend practicing as much as possible .

In the next tutorial, we’ll take a look at how we can use jQuery and jQuery plugins in WordPress themes and plugins.

View @ WPMU DEV

Skip to toolbar