10+ Helpful Javascript Tutorials for WordPress Developers

In Matt Mullenweg’s 2015 State of the Word address, he gave the entire WordPress community a homework assignment – “Learn JavaScript, Deeply.” That focus, along with developments like Calypso and the REST API, is why we just published a basic JavaScript tutorial post for beginners to get started with JavaScript.

That post focuses entirely on basic JavaScript tutorials, though. In this post, I’m going to take things a little bit further and give you a JavaScript tutorial list of content that focuses specifically on JavaScript as it applies to WordPress.

Because the focus is on applied JavaScript, rather than the basics, you’ll likely need at least a basic understanding of JavaScript to get value from these tutorials. If that sounds like you, I invite you to dig in and learn some WordPress-applicable JavaScript!

Helpful JavaScript Tutorials for WordPress Developers

Before I get to the list of tutorials, I want to spend a second giving some background on how I actually went about constructing this list.

As I mentioned in the intro, this is not a list of general tutorials to help you learn JavaScript. Rather, to make it on this list I was looking for two things:

• The resource is specifically about applying JavaScript to WordPress
• The content covers something “meaty”. That is, it’s more than just a short code snippet or a brief explanation.

Beyond those two requirements, the tutorials on this list cover a fairly eclectic range of applications. Additionally, most are standalone tutorials, though some are broader courses or collections.

And finally, most tutorials are free, but there are also some paid options intermingled in the list. I’ll make sure to note which is which so that you can find something that fits your budget (or lack thereof).

Ok – enough chat. Let’s get to the list…

1. Use AngularJS as WordPress Frontend

In this tutorial from Andrea Terzani, he takes you through building a simple AngularJS application to serve up post content. Andrea is Italian, so the grammar isn’t always perfect (that’s not a criticism, I appreciate bilingualism!), but he includes tons of code examples, and you can always grab the whole package from his GitHub page.

Price: Free | More Information

2. JavaScript for WordPress

Zac Gordon is fairly well-known in the WordPress community thanks to his Treehouse tutorials as well as his talks at a huge number of WordCamp events.

JavaScript for WordPress is his “master course” program for learning JavaScript as it applies to WordPress.

The course is neither publicly available nor free. In fact, you have to reserve a seat before you can even join the course.

That’s because Zac prefers to work either one-on-one or in small cohorts, rather than taking a more “set it and forget it” approach to learning.

That personal attention doesn’t come cheap – the course clocks in at a cool $697. But if you’re serious about learning JavaScript for WordPress development, Zac’s credentials definitely back up the high price tag.

Price: $697 | More Information

3. Building Reactive WordPress Plugins

Delicious Brains, the makers of the much-loved-by-developers WP Migrate DB (one of many great WordPress migration plugins), put out tons of quality developer-focused tutorials on their WordPress blog. This three part series on building reactive WordPress plugins is no exception.

Each of the three posts in the series focuses on building the same simple WordPress plugin, just with a different front-end technology.

Across the whole series, you can see how the plugin is built with:

• Backbone.js
• Vue.js
• Elm

The tutorials are lengthy and well-explained, so you’ll definitely get a ton of value from this series.

Price: Free | More Information

4. Using Backbone Within the WordPress Admin

In this two part tutorial from Envato Tuts+, you’ll first learn how to apply Backbone JS within the WordPress backend, followed by the second part on using Backbone on, you guessed it, the frontend.

Shane Osbourne takes you through everything, including plenty of code examples and screenshots.

As is the norm, you can also check the comments section for some debate about code quality.

Price: Free | More Information

5. Yoren Chang’s Tutorials On Building Themes With AngularJS and WP REST API

Since October 2014, Yoren Chang’s hobby has been building WordPress themes with AngularJS. Why is that important for you? Because over that time, he’s also been documenting his hobby into a number of tutorial posts at his site.

Currently, he’s posted 21 different tutorials, all dedicated to using AngularJS with WordPress themes.

Some of the tutorials are short quick-hitters, while others delve a little deeper. Put them all together, though, and you have a deep collection to keep you busy for quite some time.

Price: Free | More Information

6. Working with JavaScript and WordPress

Working with JavaScript and WordPress is a short PluralSight course from developer Brian Hogg.

At under 2 hours, the course isn’t too much of a commitment. It takes you through a short introduction, using JavaScript in plugins and themes, and using AJAX to send and save data.

While you technically need a PluralSight membership to access the course, you can get a free 10-day PluralSight trial which should give you more than enough time to consume the course.

Price: Free w/ Free Trial | More Information

7. Creating Single Page Applications With WordPress and Angular.js

This JavaScript tutorial is a more recent addition from Tom Whitbread at Envato Tuts+. As you can probably glean from the name, it takes you through the process of using AngularJS to build a single page application based on WordPress.

You can also find all of Tom’s code at his GitHub page.

Price: Free | More Information

8. How to build React apps on top of the WordPress REST API

This is another one where you can get a pretty good idea of what’s covered just from the title!

Beyond the depth that Andrey, the author, went into, I also like that this tutorial has a solid comments section for added debate.

You can also check out a demo of the basic front-end that you’ll be building, as well as Andrey’s GitHub page with all of the code.

Price: Free | More Information

9. A Simple Route to Writing a React.js App in a WordPress Plugin

WPShout is well-known in the community for their developer-focused WordPress tutorials. While they by no means focus exclusively on JavaScript, this tutorial from Fred digs into a similar topic as the previous tutorial by showing you how to write a React.js app inside a WordPress plugin.

Beyond code examples in the post, Fred also includes a ZIP file with the full code from the demo.

Price: Free | More Information

10. JavaScript for WordPress Developers from WPMUDev

Daniel Pataki, the WordPress editor at Smashing Magazine and one-time author at Elegant Themes, put together a multi-part JavaScript for WordPress Developers series at WPMUDev.

The course builds from the basics up to more advanced topics. It’s a bit more friendly to JavaScript beginners than some of the more advanced tutorials on this list. So if you’ve felt a little lost up until now, this might be a good place to start.

Price: Free | More Information

11. Single Page Apps Using AngularJS and the WordPress REST API

This one is a detailed tutorial from Almir at SitePoint. It gives you an in-depth look at using AngularJS to build a single page app based on WordPress and the REST API.

Almir includes separate GitHub pages for both the Angular app and the WordPress child theme that he uses in the example, so you should be able to easily follow along with everything that’s happening.

Price: Free | More Information

Wrapping Things Up

With the increasing focus on the REST API, JavaScript and WordPress are only going to be getting closer. As of March 2017, you can even find JavaScript-based themes on the WordPress.org repository.

So, if you want to keep up with the WordPress community you need to, as Matt put it, “Learn JavaScript, Deeply”.

I hope at least one JavaScript tutorial on this list helped. And if you know a great tutorial that deserves to be on this list, it would be great if you could share it in the comments so we can collaboratively make this resource even better.

Article thumbnail image by Teguh Jati Prasetyo / shutterstock.com