Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a mini-theme with WordPress REST API

273 views

Published on

This was a presentation I gave at WordCamp Detroit 2018

Published in: Technology
  • Be the first to comment

Building a mini-theme with WordPress REST API

  1. 1. WordPress REST API: A mini-theme and beyond! Anthony Montalbano • 04.28.2018
  2. 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. 3. Overview REST API 101 Intro to WordPress REST API Creating a mini-theme with the API A Headless WordPress Extending the API
  4. 4. What is an API?
  5. 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
  6. 6. DATA
  7. 7. Some APIs
  8. 8. What is RESTful?
  9. 9. 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
  10. 10. A HTTP Request
  11. 11. Resource Based Post (resource) /posts /posts/1 Comments (resource) /comments /comments/1 Categories (resource) /categories /categories/1
  12. 12. 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
  13. 13. Every HTTP request has headers which authenticate the request and how the request should respond. Stateless
  14. 14. A request and response contains a representation of a resource, often in JSON format. Representation
  15. 15. Intro to WordPress REST API
  16. 16. Available since WordPress 4.7
  17. 17. Posts in category 7 Get post with ID 57
  18. 18. Creating a mini-theme with the WordPress API
  19. 19. Setup Javascript/Dependencies [ in the theme’s functions.php file ]
  20. 20. Setup Javascript/Dependencies [ in the theme’s functions.php file ]
  21. 21. jQuery Example
  22. 22. 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!
  23. 23. Posts in category 7 Get post with ID 57
  24. 24. Get the Content [ in the theme’s front_page.js file ]
  25. 25. Render Data in DOM [ in the theme’s front_page.js file ] Powered by SimplrJS
  26. 26. Render Data in DOM [ in the theme’s index.php file ] Powered by SimplrJS
  27. 27. Add Interactions [ in the theme’s front_page.js file ]
  28. 28. A Headless WordPress
  29. 29. Attempting to update a post
  30. 30. We must provide authentication Core WordPress REST API only provides authentication, not authorization (but there’s plugins for that!)
  31. 31. We must provide authentication
  32. 32. Since WordPress REST API uses cookie based authentication, you have to spoof a cookie with Postman. We must provide authentication
  33. 33. Since WordPress REST API uses cookie based authentication, you have to spoof a cookie with Postman. Postman Pro Tip
  34. 34. Since WordPress REST API uses cookie based authentication, you have to spoof a cookie with Postman. Postman Pro Tip
  35. 35. https://developer.wordpress.org/rest-api/reference/posts/
  36. 36. https://developer.wordpress.org/rest-api/reference/
  37. 37. Update post 57
  38. 38. Available Models and Collections
  39. 39. Extending the API
  40. 40. Adding a Custom Post Type to the REST API
  41. 41. Automatically added to the client-side javascript library
  42. 42. 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.
  43. 43. 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
  44. 44. Adding custom endpoints (non-CPT)
  45. 45. Adding custom endpoints (non-CPT)
  46. 46. Check user permissions
  47. 47. Validate incoming data
  48. 48. Returning a response object
  49. 49. Putting it all together
  50. 50. Merci Beaucoup! Questions? That’s me: @italianst4 Ambrdetroit.com Example Theme on Github: https://github.com/italianst4/wcdet-2018-theme-example

×