JavaScript for WordPress
Zac Gordon
JS for WordPress
Learn how to incorporate WordPress themes, plug-ins, and more with JavaScript! Use AJAX in WordPress Themes and Plugins and decouple requests to the WordPress REST API using the Node.js API Client. Also how to authenticate the decoupled requests to the WordPress REST API. This course is for developers with an intermediate knowledge of JavaScript who want to learn how to use JavaScript to harness the power of WordPress for themes, plugins and decoupled projects using the WordPress REST API!
This course and others like it are available as part of our Frontend Masters video subscription.
Published: November 15, 2017
Table of Contents
JavaScript for WordPress
Introduction
Zac Gordon introduces JavaScript for Workshop course. Zac reviews the importance of WordPress for the developer. - https://local.getflywheel.com/WordPress and JavaScript Overview
While a stable development platform already, WordPress is embracing JavaScript by adding an API. Showcasing some of the JavaScript features in WordPress, Zac reviews the history of WordPress' development past and future.Calypso
Zac introduces Calypso, which is a re-envisioning of the WordPress application as a Single Page Application (SPA) built on React by the folks that make WordPress. - https://developer.wordpress.com/calypso/Learn JavaScript, Deeply
JavaScript is becoming essential and integrated with WordPress. After reviewing one of the critical messages of Matt Mullenweg's State of WordPress 2015 talk, Zac examines current JavaScript landscape in the core WordPress and the WordPress ecosystem. - https://wordpress.tv/2015/12/07/matt-mullenweg-state-of-the-word-2015/Course Agenda
Zac reviews the JavaScript for WordPress course agenda.
Enqueuing JavaScript in a Theme
Enqueueing Script
After introducing the concept of enqueuing JavaScript, which is the process of loading JavaScript into a theme or administration area through the PHP functions, Zac introduces the wp_enqueue_script(). - https://developer.wordpress.org/reference/functions/wp_enqueue_script/Localize Script
Zac examines the wp_localize_script() function, which allows taking data from PHP to make available to Javascript.Enqueuing JavaScript in a Theme
Zac reviews the methods and upcoming exercises for enqueue files into WordPress.Challenge 1: Enqueuing JavaScript into a Theme
In this challenge, students locate and change the wp_enqueue_script() function to load a JavaScript file into a WordPress site. - https://github.com/zgordon/frontend-masters-jsforwpChallenge 1: Solution
Zac walks through the solution to Challenge 1.Challenge 2: More Enqueuing JavaScript
In this challenge, students work through the remaining enqueuing JavaScript exercises.Challenge 2: Solutions
Zac walks through the solution to Challenge 2 by demonstrating how to load JavaScript files in the desired order due to dependencies; associate WordPress' internal jQuery; and pulling in an external JavaScript library. Zac takes questions from students.Challenge 2: Solutions, Part 2
Zac continues to walk through the solution to Challenge 2 exercises by reviewing how to load JavaScript resources based on the page conditionally and how to pass data to JavaScript file. Zac takes questions from students.
Enqueuing JavaScript in a Plugin
Adding JavaScript to WordPress Plugins
Zac reviews how to place JavaScript resources into a WordPress plugin.Challenge and Solution 3: WordPress Plugins
In this challenge, Zac demonstrates how to work through an exercise to enqueue JavaScript to a WordPress plugin in multiple ways.Challenge 4: More WordPress Plugins
In this challenge, students add JavaScript to appear in WordPress administration area and a WordPress plugin page.Challenge 4: Solution
Zac walks through the solution to Challenge 4.
Ajax in WordPress
Introducing Ajax in WordPress
After explaining that Ajax in WordPress means interacting with the database and codebase, Zac reviews how Ajax is handled within the WordPress with a nonce. A nonce is a hash associated with an Ajax call to help protect WordPress from invalid requests.Ajax Steps
Zac reviews the steps involved to set up Ajax in WordPress.Challenge 5: Ajax in WordPress
In this challenge, students create a "Like this Site" plugin.Challenge 5: Solution
Zac walks through the solution to Challenge 5.Q&A
Zac answers questions from students about Ajax, WordPress, and shortcodes and more.
WordPress REST API
Introducing WordPress REST API
Zac reviews the API for WordPress.Query Arguments
Zac illustrates how to passing arguments to API URLs to customize the JSON responses.Challenge 6: WordPress REST API
In this challenge, students work on accessing API endpoints.Challenge 6: Solution
Zac walks through the solution to Challenge 6. Zac takes questions from students. - https://chrome.google.com/webstore/category/extensions?hl=enCustomizing API Endpoints
In this challenge, students access WordPress API with simplified JSON.
Accessing API Inside of WordPress
Introducing How To Access API Inside of WordPress
Zac reviews the process for accessing and using API inside of WordPress.Challenge 7: Listing API Posts
In this challenge, students retrieve a list of posts with the backbone client.Challenge 7: Solution
Zac walks through the solution to Challenge 7.More API Posts
Zac prompts students to continue working on the WordPress REST API exercises.Roundtable Q&A
Zac solicits comments about working with JavaScript and WordPress from the class.Working with the REST API
Zac reviews more possibilities and tips for working with the REST API, including using Vue in a WordPress theme.
Accessing API Outside of WordPress
Introducing How To Access API Outside of WordPress
Zac discusses the reasoning and benefits for accessing REST API outside of WordPress including using WordPress in a headless content management system (CMS).Deleting Posts with Rest API
Zac demonstrates how to work with the REST API outside of WordPress to delete posts.Challenge 8: Listing Posts
In this challenge, students lists posts and a single post using the REST API outside of WordPress.Challenge 8: Listing Posts, Part 2
Zac discusses a few points about the structure in running WordPress decoupled including having WordPress and localhost needs to be on SSL.Challenge 8: Solution
Zac walkthroughs the solution to Challenge 8.Decoupled Authentication with WordPress
Zac reviews Basic Auth, JSON Web Tokens (JWT) Auth, OAuth 1 & 2, and WordPress API Broker as methods for setting up authentication. Zac walks through setting up decoupled authentication. - https://apps.wp-api.org/Setting Up Decoupled Authentication with WordPress
Zac walks through setting up decoupled authentication.Saving Posts
Zac demonstrates how to save posts using a decoupled WordPress set up.Deleting Posts
After showing how to save posts, Zac quickly shows how to delete posts.