Build a Theme with the WP REST API

634b37a53babc18a5bda19722d5b41a3?s=47 Rachel Baker
December 04, 2015

Build a Theme with the WP REST API

634b37a53babc18a5bda19722d5b41a3?s=128

Rachel Baker

December 04, 2015
Tweet

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