WP REST API by Rachel Baker Build a Theme with the https://speakerdeck.com/rachelbaker/build-a-theme-with-the-wp-rest-api

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

Requirements 1. WordPress version 4.4 2. WP REST API plugin version 2.0

Scripts Used 1. jQuery 2. Underscore.js
 3. Director

What We Are Building

Theme Setup

Theme Structure

Main Template Scaffold index.php

Load Scripts functions.php

Define the Routes main.js

Define Variables & Click Handler for Logo main.js

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)

GET Posts Collection

Add Underscore Template index.php

Fetch Posts Response & Pass Data to Underscore Template main.js

Display Posts from Response index.php

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)

Homepage (‘/‘)

Paginate Posts Collection

Determine Paged Location from Posts Response & Pass Pagination to Underscore Template main.js

Display Pagination Navigation index.php

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)

Paged View (‘/2‘)

GET Single Post

Add Underscore Template index.php

Fetch a Single Post Response with Embedded Data & Pass All Data to the Underscore Template main.js

Display Single Post with Related Data from Response index.php

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)

Single Post View (‘/news/marge-vs-the-monorail’)

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

Thank You Rachel Baker @rachelbaker Lead Engineer thewirecutter.com thesweethome.com