This was a presentation I gave at WordCamp Detroit 2018

1. WordPress REST API:
A mini-theme and
beyond!
Anthony Montalbano • 04.28.2018

2. Anthony Montalbano
Stuff I did and do
● Cofounded AMBR Detroit
● WordPress dev for 10+
years
● Lead first 3 WordCamp
Detroit
Stuff to contact me
● @italianst4
● anthony@ambrdetroit.com

3. Overview
REST API 101
Intro to WordPress REST API
Creating a mini-theme with the API
A Headless WordPress
Extending the API

4. What is an API?

5. Post Title
● The Greatest WordCamp Ever
Date Published
● April 28th, 2018
Excerpt
● Today is a monumental day in WordCamp history...
We have some data

8. DATA

12. Some APIs

13. What is RESTful?

14. Resource Based
● The URI endpoints are
resources (nouns)
Stateless
● A request is independent
and self-contained
REpresentational State Transfer
HTTP Methods
● Standardize methods are
used for data manipulation
Representation
● Often JSON or XML based
objects

15. A HTTP Request

16. Resource Based
Post (resource)
/posts
/posts/1
Comments (resource)
/comments
/comments/1
Categories (resource)
/categories
/categories/1

17. Posts (resource)
/posts - get a collection of posts
/posts - create a new post
/posts/1 - get a post by ID 1
/posts/1 - update the post with ID 1
/posts/1 - delete the post with ID 1
HTTP Methods
GET
POST
GET
PUT
DELETE

18. Every HTTP request has headers which
authenticate the request and how the request
should respond.
Stateless

19. A request and response contains a representation
of a resource, often in JSON format.
Representation

20. Intro to WordPress REST API

21. Available since WordPress 4.7

23. Posts in category 7
Get post with ID 57

24. Creating a mini-theme with
the WordPress API

26. Setup Javascript/Dependencies
[ in the theme’s functions.php file ]

27. Setup Javascript/Dependencies
[ in the theme’s functions.php file ]

28. jQuery Example

29. Models
Use models to interact and update resources
Collections
Use collections to get a collection of models
Backbone.js Client Library
This client library automatically handles authentication for you! FTW!

30. Posts in category 7
Get post with ID 57

31. Get the Content
[ in the theme’s front_page.js file ]

32. Render Data in DOM
[ in the theme’s front_page.js file ]
Powered by SimplrJS

33. Render Data in DOM
[ in the theme’s index.php file ]
Powered by SimplrJS

34. Add Interactions
[ in the theme’s front_page.js file ]

35. A Headless WordPress

39. Attempting to update a post

40. We must provide authentication
Core WordPress REST API only provides authentication, not
authorization (but there’s plugins for that!)

41. We must provide authentication

42. Since WordPress REST API uses cookie based authentication, you
have to spoof a cookie with Postman.
We must provide authentication

43. Since WordPress REST API uses cookie based authentication, you
have to spoof a cookie with Postman.
Postman Pro Tip

44. Since WordPress REST API uses cookie based authentication, you
have to spoof a cookie with Postman.
Postman Pro Tip

45. https://developer.wordpress.org/rest-api/reference/posts/

46. https://developer.wordpress.org/rest-api/reference/

47. Update post 57

48. Available Models and Collections

49. Extending the API

50. Adding a Custom Post Type to
the REST API

51. Automatically added to the
client-side javascript library

52. Customizing the controller
https://developer.wordpress.org/rest-api/extending-the-rest-api/controller-classes/
While this gives you more flexibility, it doesn’t automatically
integrate into the Backbone.js client library.

53. Perform action taking into
account HTTP method,
headers, and data
Route request based
on HTTP method
Authenticate user based
on HTTP headers
Return a JSON success
or error response
Validate request data
(if applicable)
How to develop an API endpoint

54. Adding custom endpoints (non-CPT)

55. Adding custom endpoints (non-CPT)

56. Check user permissions

57. Validate incoming data

58. Returning a response object

59. Putting it all together

60. Merci
Beaucoup!
Questions?
That’s me:
@italianst4
Ambrdetroit.com
Example Theme on Github:
https://github.com/italianst4/wcdet-2018-theme-example