- Vanilla JS – Historically this was used for small snippets of code, now it is 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.
- Helpful, covers variables, control structures, arrays, objects, and functions briefly.
- 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.
- Shows how this can be accomplished using inline JS, proper WP enqueuing (in theme and plugin), and using a plugin. Good article.
- 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.
- Ashley Rich. The WordPress Developer’s Guide to ES2015 (ES6). delicious brains, 2017.
- How to Develop a WordPress Plugin Using Webpack 3, React and REST API. delicious brains, 2017.
- Part 1.
- Part 2.
- Jordan Kohl. Develop a WordPress Plugin Using Webpack and React. Ghost Inspector, 2019.
See the Ajax page.
jQuery (and others)
- Unfortunately, jQuery in WP is still 1.x, you can see the long history of working on a jQuery update for WP in Aaron Jorbin’s Upgrade to jQuery 3.x trac ticket.
- Tom McFarlin. A Beginner’s Guide to Enqueuing jQuery. envatotuts+, 2013.
- Manipulating DOM in WordPress Using jQuery. wpengine, 2019.
- Beginner’s guide to using before(), after(), append(), prepend(), clone(), and wrap().
- One can also use PHP DOMDocument for manipulating the DOM.
- Josh Pollock. Do You Need To Know React As a WordPress Developer? Torque, 2018.
- Good overview of this topic, includes an example of a very basic Gutenberg block, explains how WP abstracts from React.
- Brief introduction to Prettier, ESLint, PostCSS, Babel, and Webpack.
- Brief introduction, touches on what counts as modern, JSX, React’s relationship to Gutenberg, and some of the important JS libraries to use with Gutenberg.
- Manjunath M. React JS for WordPress Users: A Basic Introduction. elegant themes, 2018.