WordPress has long worked with JavaScript but with the advent of Gutenberg we are seeing a new era of JavaScript development, especially with the use of React. This page will be split into four main sections:
- Vanilla JS – Historically this was used for small snippets of code, now it has become more common to use Modern JS (ES6+).
- Ajax – WP handles AJAX in its own way historically. This is often implemented in jQuery, but we’ll deal with it here separately as it is such an important topic.
- jQuery JS (and others) – jQuery was the preferred library in WP for many years and is still widely used. In addition there are other libraries such as Backbone.js that have played an important role in WP historically but whose usage has declined.
- Gutenberg JS – This crosses paths with Vanilla JS of the modern flavor but here I’m thinking more specifically of its connections to the React ecosystem and Gutenberg’s abstraction layer on top of React.
Note that these divisions aren’t nice and neat, so browse through the other sections and you’ll likely find some series/articles which have crossover.
Vanilla JavaScript
- Tom Rankin. Getting Started with JavaScript (and How It Compares to PHP). Torque, 2018.
- Helpful, covers variables, control structures, arrays, objects, and functions briefly.
- Rachel McCollin. JavaScript for WordPress People: What You Need to Know. wpmudev, 2018.
- Covers basic overview of JS, how JS and WP work together (in the traditional sense), how JS/PHP are similar/dissimilar, enqueuing, jQuery, REST API.
- How to Develop a WordPress Plugin Using Webpack 3, React and REST API. delicious brains, 2017.
- Ashley Rich. The WordPress Developer’s Guide to ES2015 (ES6). delicious brains, 2017.
- Daniel Pataki. JavaScript for WordPress Developers Series. wpmudev, 2016-2017.
- Josh Pollock. How To Load Custom JavaScript In WordPress. Caldera Forms, 2016.
- Shows how this can be accomplished using inline JS, proper WP enqueuing (in theme and plugin), and using a plugin. Good article.
- Benjamin Intal. How to Pass PHP Data and Strings to JavaScript in WordPress. envatotuts+, 2014.
- There are plenty of articles on enqueueing JS but this is one of the few I’ve found addressing how to pass data from PHP to JS. Unfortunately, it doesn’t also cover from JS to PHP.
- David Hayes. How to Include JavaScript Files on Your WordPress Site with wp_enqueue_script(). wpshout, 2018.
- Jordan Kohl. Develop a WordPress Plugin Using Webpack and React. Ghost Inspector, 2019.
Ajax
- See the Ajax page.
jQuery (and others)
- See the jQuery and Company page.
Gutenberg
- See the Gutenberg section.