Build a Theme with the WP REST API

https://github.com/rachelbaker/wcus-demo

Transcript

1. WP REST API by Rachel Baker Build a Theme with the https://speakerdeck.com/rachelbaker/build-a-theme-with-the-wp-rest-api
2. Why Would You Build a Theme This Way? 1. Because you finally can 2. Your content needs to update or change dynamically 3. You want to separate your business logic from your views 4. You don’t like PHP 5. You just spent the past 2 years of your life working on the WP REST API project
3. Requirements 1. WordPress version 4.4 2. WP REST API plugin version 2.0
4. Scripts Used 1. jQuery 2. Underscore.js
 3. Director
5. What We Are Building
6. Theme Setup
7. Theme Structure
8. Main Template Scaffold index.php
9. Load Scripts functions.php
10. Define the Routes main.js
11. Define Variables & Click Handler for Logo main.js
12. Recap 1. Created our theme directory and files 2. Filled-in the header and footer logic in our single template file (index.php) 3. Enqueued our JavaScript and CSS files (functions.php) 4. Defined our routes and initialized our client-side router (main.js) 5. Added an event handler to route visitors that click on our logo image in the header to our homepage (main.js)
13. GET Posts Collection
14. Add Underscore Template index.php
15. Fetch Posts Response & Pass Data to Underscore Template main.js
16. Display Posts from Response index.php
17. Recap 1. Created a Underscore JS template with an id of #posts-tmpl to handle the display of our Posts list (index.php) 2. Filled-in the logic in our listPostswithPagination callback to send a GET request to the WP REST API Posts endpoint and pass the response data to our Underscore template (main.js) 3. Added the presentation logic to our Underscore JS template that loops through the data passed, displaying the title and excerpt for each Post (index.php)
18. Homepage (‘/‘)
19. Paginate Posts Collection
20. Determine Paged Location from Posts Response & Pass Pagination to Underscore Template main.js
21. Display Pagination Navigation index.php
22. Recap 1. Added logic in our listPostswithPagination to determine if pagination values are relevant and, if so, include them in the data passed to the #posts-tmpl Underscore template (main.js) 2. Added the presentation logic to the #posts-tmpl Underscore JS template that displays the pagination links at the bottom of the Posts list (index.php)
23. Paged View (‘/2‘)
24. GET Single Post
25. Add Underscore Template index.php
26. Fetch a Single Post Response with Embedded Data & Pass All Data to the Underscore Template main.js
27. Display Single Post with Related Data from Response index.php
28. Recap 1. Created our Underscore JS template with an id of #post-tmpl to handle the display of a single Post (index.php) 2. Filled-in the logic in our viewPost callback to send a GET request to the WP REST API Posts endpoint with query params for the Post slug and embedding related data. We pass the response data to our #post-tmpl Underscore template (main.js) 3. Added the presentation logic to our #post-tmpl Underscore JS template that displays the featured image, title, author avatar, author name, and content for the Post (index.php)
29. Single Post View (‘/news/marge-vs-the-monorail’)
30. Resources 1. WP REST API (endpoints) 
 https://github.com/WP-API/WP-API 2. Director (used for routing) 
 https://github.com/flatiron/director 3. Demo Theme Files 
 https://github.com/rachelbaker/wcus-demo 4. Slides
 https://speakerdeck.com/rachelbaker/build-a-theme-with-the-wp-rest-api
31. Thank You Rachel Baker @rachelbaker Lead Engineer thewirecutter.com thesweethome.com