Presentation I gave at the MSP WP User Group on Nov. 20th, 2015

1. WordPress REST API v2
Overview & Exploring
2

2. Nick Pelton
Partner, Technical Director
westwerk.com

3. Other stuff I’ve worked on

4. WP RESTAPI V2
A RESTful JSON API for WordPress

5. Access WP Data from anywhere
Use WP for data, and build custom apps
Build/Extend APIs
Much, much more
westwerk.com
WP RESRT API V2
WHAT CAN WE DO WITH IT?

6. What am I excited about?
Performance
Client Side Apps
Better Migration Options

7. Standard HTTP load

8. AJAX HTTP load

9. Performance
FULL HTTP LOAD
TWENTYFIFTEEN THEME
HELLO WORLD POST
JSON LOAD
HELLO WORLD POST
LOADING POST COMPARISON
262KB
578 MS LOAD
1.2 SEC FINISH
19 REQUESTS
2.1KB
236 MS LOAD
250 MS FINISH
1 REQUESTS

10. REST

11. Uniform
Stateless
Client-server
Cacheable
In this Case uses HTTP
westwerk.com
REST
REPRESENTATIONAL STATE TRANSFER

12. GET
POST (create)
DELETE
PUT (update)
others…
westwerk.com
REST
REST VERBS

13. posts/
pages/
media/
puppies/
etc…
westwerk.com
REST
REST NOUNS (RESOURCES)

14. Example
GET POSTS/

15. JSON

16. Lightweight Data Exchange format
Easy for Humans to read
Easy for Machines to parse/generate
Very similar to JavaScript Objects
westwerk.com
JSON
JAVASCRIPT OBJECT NOTATION

17. Squiggly brackets act as objects (containers)
Square brackets holds arrays
Names and values are separated by a colon
Array elements are separated by commas
westwerk.com
JSON
STRUCTURE

18. Example
GET POSTS/

19. WP JSON API V2
Installation and setup

20. Install/Activate Correct Plugin
HTTPS://WORDPRESS.ORG/PLUGINS/REST-API/

21. Check Permalink's are enabled
WP-ADMIN > SETTINGS > PERMALINKS

22. Confirm working, navigate to:
YOURDOMAIN/WP-JSON/

23. Some Tools the help

24. JSONView for Chrome
MAKES THIS… LOOK LIKE THIS

25. PostMan for Chrome
BUILD COLLECTIONS OF API CALLS FOR TESTING

26. Just a Browser
ALL GET REQUESTS WORK

27. CLI SUPER USER
CURL

28. Lets go exploring
(Demo)

29. Lean how to “query” the API
http://v2.wp-api.org/

30. WP_Query
$query = new WP_Query(array(
‘post_per_page’=> 1,
‘orderby’ => ‘rand’,
));
/wp-json/wp/v2/posts/?
filter[posts_per_page]=2&filter[orderby]=rand
REST API

31. Now in JavaScript
(jQuery for simplicity)
$.ajax({
dataType: 'json',
type: 'GET',
url: 'http://wpapi.dev/wp-json/posts',
data: {
filter: {
'posts_per_page': 5,
'orderby': 'rand'
}
},
success: function(data) {
// Do something with the data
}
});

32. Lets try it
(Demo)

33. Checklist
1. Learn About REST/JSON
2. Setup/Install
3. Access
4. Using JS
5. Practical Example. More?
Go and explore on your own:
http://v2.wp-api.org/

34. Thank you.
Any questions?
westwerk.com
rest.elkstein.org/
www.json.org/
www.secretgeek.net/json_3mins
http://v2.wp-api.org/
Credits
@nickpelton
nick@westwerk.com
ME