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
   

   View Slide

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
   

   View Slide

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

   View Slide

4. Scripts Used
   1. jQuery
   2. Underscore.js

   3. Director
   

   View Slide

5. What
   We Are
   Building
   

   View Slide

6. Theme
   Setup
   

   View Slide

7. Theme Structure
   

   View Slide

8. Main Template Scaffold
   index.php
   

   View Slide

9. Load Scripts
   functions.php
   

   View Slide

10. Define the Routes
    main.js
    

    View Slide

11. Define Variables &
    Click Handler for Logo
    main.js
    

    View Slide

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)
    

    View Slide

13. GET
    Posts
    Collection
    

    View Slide

14. Add Underscore Template
    index.php
    

    View Slide

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

    View Slide

16. Display Posts from Response
    index.php
    

    View Slide

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)
    

    View Slide

18. Homepage (‘/‘)
    

    View Slide

19. Paginate
    Posts
    Collection
    

    View Slide

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

    View Slide

21. Display Pagination Navigation
    index.php
    

    View Slide

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)
    

    View Slide

23. Paged View (‘/2‘)
    

    View Slide

24. GET
    Single
    Post
    

    View Slide

25. Add Underscore Template
    index.php
    

    View Slide

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

    View Slide

27. Display Single Post with Related Data
    from Response
    index.php
    

    View Slide

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)
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide