Building a Headless WordPress App with REST API

2h 8mAdvanced2020-03-23

Authors

Morten Rand-Hendriksen

Senior Staff Instructor, Speaker, Web Designer, and Software Developer

Course details

Headless applications use content management systems like WordPress as data resources and present the data independently. In this course, Morten Rand-Henriksen shows how to build these data-driven front-end applications on top of the WordPress REST API. Follow along with the evolution of the course project, Task Book, a standalone app using WordPress REST API to receive and send data using authenticated requests over OAuth2, as Morten explains key concepts and techniques. Find out how to build a basic plugin to add new content types, roles, capabilities, and fields to WordPress and the REST API; set up authentication with OAuth2; and configure the headless app logic with JavaScript. Plus, find out how to display task data and generate simple charts using the Chart.js library.

Topics include:
- Previewing the content model and user flow
- Extending WordPress and the REST API with a custom plugin
- Creating new meta boxes and fields
- Configuring OAUth2
- Sending authentication requests to the REST API
- Requesting login tokens
- Setting up the authorization and logout loops
- Requesting and displaying tasks
- Displaying a chart of task data

Skills covered

Gatsby.jsGatsby, Inc.GraphQLWordPressContent Management Systems (CMS)APIsFull-Stack Web DevelopmentProjectWeb DevelopmentOpen SourceSoftware Development

Concepts

0. Introduction

01 - Building a headless app with the WP REST API
02 - Prerequisites for this course

1. Plan the Application

03 - Introduction to the Task Book app
04 - Content model for the application
05 - User flow for the application

2. Extend Core WordPress Functionality

06 - Create a functionality plugin
07 - Add custom post type for tasks
08 - Create new roles
09 - Create new capabilities
10 - Test the REST response

3. Create New Meta Boxes and Fields

11 - Create a status field
12 - Set status field automatically
13 - Add CMB2 for custom meta boxes
14 - Create a custom meta box and fields
15 - Display REST fields using CMB2

4. Authentication with OAuth2

16 - Install and configure the OAuth2 plugin
17 - Send authenticated requests to the REST API
18 - Restrict REST access based on roles

5. Set Up the Headless App

19 - Review of user flow
20 - JavaScript modules and structure
21 - Login by requesting a token
22 - Set up the authorization loop
23 - Set up the logout loop
24 - Request and display latest 10 tasks
25 - Request and display single tasks
26 - Send POST request on new update task
27 - Display a chart based on task data

Conclusion

28 - Further information