Transcript
Page 1: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Headless WordPress

WordCamp Wilmington 2016 Aaron Alexander @analogophile

Page 2: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •
Page 3: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •
Page 4: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •
Page 5: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •
Page 6: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •
Page 7: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

• API 101

• Traditional vs Headless/Decoupled CMS

• Going Headless

• Yetta

Page 8: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

API 101

Page 9: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Application Programming Interface

• Commands, functions, or methods developers can use to build their own software or applications.

• Typically includes common operations like accessing a file system, creating dialog boxes, or deleting files.

Page 10: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

REST API• Representational State Transfer

• HTTP Requests (GET, POST, DELETE)

• URI Endpoints

Page 11: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Endpoints

• graph.facebook.com • maps.googleapis.com • api.instagram.com • api.twitter.com • swapi.co

https://api.example.com/[apiMethod]/[id]

Page 12: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

DEMO

Page 13: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Traditional vs

Headless/Decoupled

Page 14: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Traditional CMS

Page 15: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Headless CMS

Page 16: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Going Headless

Page 17: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •
Page 18: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

4.7

Page 19: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

WordPress REST API Features

• Read and modify posts, pages, media, users, and more.

• JSON formatted responses

• Works with built-in Javascript API

Page 20: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Security and Authentication• nonce

• Basic Authentication - For development only

• OAuth 1

• OAuth 2 - Preferred

Page 21: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

REST API Clients

getpostman.cominsomnia.rest paw.cloud

Page 22: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

http://v2.wp-api.org/reference/

Page 23: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

C R U D

Page 24: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Create R U D

Page 25: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Create Read U D

Page 26: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Create Read Update D

Page 27: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Create Read Update Delete

Page 28: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

DEMO

Page 29: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

Yetta

Page 30: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •
Page 31: Headless WordPress - WordCamp Central...WordPress WordCamp Wilmington 2016 Aaron Alexander @analogophile • API 101 • Traditional vs Headless/Decoupled CMS • Going Headless •

http://bit.ly/headlesswordpress

Thank You