How to Use JavaScript in WordPress and Lose jQuery Bloat

jQuery has become ubiquitous on the web and in WordPress. Many of its components are in the WordPress core software, the admin uses it heavily, and it’s readily available for front-end use as well. We enqueue it without thought when we need it, but should we always do so?

I tend to think not, and in this article, I’ll show you why, and how you can achieve the same results without jQuery.

Why jQuery Is Great

jQuery is awesome because it provides an easy-to-use framework that anyone can understand and get started in minutes.

Complex DOM traversals and animations become a single line of strung together functions – easy-peasy.

Why jQuery Is Not Great

In many cases, jQuery is nothing more than overhead. You may use 5% of the codebase for your DOM traversal and them a tiny bit more for changing an attribute. The more JavaScript you need to write the more reason you have to use jQuery. If you’re only writing a couple of lines, it’s mostly unused code.

Expanded jQuery clocks in around 250kb and compressed it’s about 85kb. The version of jQuery core WordPress uses is only about 30kb, but that’s still way too much if you just need to select a couple of links and change their colors.

To put all that into perspective, if your site has 1 million unique views a month you’ll generate 30GB of traffic from unused code – what a waste!

The Fix: Vanilla JavaScript

The answer is plain old vanilla JavaScript. jQuery is nothing more than a framework that translates your jQuery code into valid JavaScript. When you write jQuery('#my-link') you could have just written document.getElementById('my-link'). Yes, it’s a bit longer, but not 30kb longer!

Let’s learn how to do a couple of quick common things in JavaScript without jQuery.

#1. Select Elements

Selecting elements is almost as easy in vanilla JS as it is in jQuery.

Where vanilla JS starts to fall short is complex selections like jQuery('span.links ul li:first a.simple'). Luckily we usually have control over our class names. I would suggest using unique prefixed classnames, which will allow you to use vanilla JavaScript more easily.

#2. Traverse The DOM

Before we start to traverse the DOM, there is one crucial difference in how text works in vanilla JavaScript you need to understand. Consider the following:

You’d expect to be able to select the first list item, it’s next sibling would be the next list item. In jQuery this is how it works but under the hood text nodes need to be factored in as well. The next sibling of the first list item is actually a text node with the text “List Item One.” The next sibling of that node is the second list item.

The two conclusions: text nodes need to be considered when traversing the DOM and text can only be parsed out of text nodes, not their containing elements as you may be used to in jQuery. Here’s how we could traverse the HTML above:

#3. Set and Get Attributes

Getting and setting attributes is pretty easy in vanilla JavaScript. Here’s how to get and set a custom data-scale property:

#4. Looping Through Nodes

A common trick used when writing JavaScript is to quickly manipulate bunch of nodes together. This requires a loop in vanilla JavaScript while jQuery can take care of this easily (the loop is still there in the background of course).

Conclusion

Next time you need to add classes to a plugin-generated menu or create a quick toggle functionality try to give vanilla JavaScript a go instead of whipping out a 35kb library.

While some lines can be a bit more lengthy than the jQuery counterparts, you’ll still use a lot less code to get things done. You’ll save bandwidth, write leaner code and learn some valuable pure JS in the process.

Interested in learning JavaScript in more depth? Check out our course JavaScript for WordPress Developers in The Academy. If you’re a member, it’s free to enroll. And if not, sign up for a free trial and get a month to complete the course!

Daniel Pataki
Do you like efficiency and lead code as much as I do? Share your own JavaScript and jQuery tips in the comments below!