WP API, What is it good for? Absolutely Everything! - WordCamp Raleigh 2016

See the Power of the WP API. Now that every WordPress website has (or will have) an API built-in, what can you do with it? It allows us to further separate the data from the code. Use WordPress to manage our data and then via the API easily access or update that data to power whatever we like. We’ll touch how to set it up and a handful of examples and then explore an iOS app pulling all it’s data and assets from a WordPress site via this API.

This will be geared for developers with some “how to” but also for everyone interested in the power of WordPress and where things are heading.

Learn how to spell WP-API
Learn about the power and flexibility it brings to WordPress
See it working in a live app

Transcript

1. WP API, what is it good for? Absolutely Everything! WordCamp Raleigh - 25 September 2016
2. Introductions Evan Mullins Lead Web Developer Brown Bag Marketing @circlecube circlecube.com WordPress user since 2006 Full-time web developer since 2007
4. Currently Version 2.0-beta13.1 (as of 2016.09.24)
6. API An application programming interface (API) is a set of subroutine definitions, protocols, and tools for building software and applications. A good API makes it easier to develop a program by providing all the building blocks, which are then put together by the programmer.
8. REST REpresentational State Transfer It describes how one system can communicate state with another. One example would be the state of a product (its name, description etc) represented as JSON. The generalised idea of state is termed a resource.
9. JSON JavaScript Object Notation is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is a text format that is completely language independent but uses conventions that are familiar to programmers. These properties make JSON an ideal data-interchange language. JSON is built on two structures: • A collection of name/value pairs. (object). • An ordered list of values. (array).
11. WP REST API
12. A little history Ryan McCue started development on an API, and then proposed a WordPress JSON REST API Project for GSOC in April 2013 (when WordPress was on version 3.5). The current version 2.0 of the plugin is in beta state and is already partially included (the infrastructure) in the WordPress core in version 4.4 (December 2015).
13. A little history The rest of the REST API is slated for inclusion in version 4.7 after considerable discussion and planning (it was originally intended for 4.5). It was delayed in order to build it out with more endpoints. Until merging this API into core (hopefully in 4.7 - December 2016-ish), we’ll need to install the REST API feature Plugin.
14. Resources Github https://github.com/WP-API/WP-API Documentation http://v2.wp-api.org/ WP Plugin - https://wordpress.org/plugins/rest-api/
15. #core-restapi Slack Channel
17. Nutshell So in a nutshell, rather than getting your content or data via a webpage as part of a website with php, html, css and javascript, you can use whatever you want and retrieve your data via the API. You’ll get json data that is compact and fast to transfer and then you can do endless things with it. Create an app, load it into another website, analyze it as data… it’s a great step for WordPress and a great step to continuing democratizing the web.
19. Tools Postman - HTTP or API client Also: REST Easy for Firefox or httpie for the command line
20. Back to WordPress The plugin/API exposes your data in JSON format in the following content types: Posts Pages Media Custom Post Types Post Meta Revisions Comments Terms Users
21. Routes / Endpoints Endpoints are functions available through the API and are simply urls. This can be things like retrieving the API index, updating a post, or deleting a comment. Endpoints perform a specific function, taking some number of parameters and return data to the client. A route is the “name” you use to access endpoints, used in the URL. A route can have multiple endpoints associated with it, and which is used depends on the HTTP verb.
22. Routes / Endpoints Example With the URL http://example.com/wp-json/wp/v2/posts/123 The “route” is wp/v2/posts/123 - The route doesn’t include wp-json because wp-json is the base path for the API itself. This route has 3 endpoints: • GET triggers a get_item method, returning the post data to the client. • PUT triggers an update_item method, taking the data to update, and returning the updated post data. • DELETE triggers a delete_item method, returning the now-deleted post data to the client.
24. GET /wp/v2/posts get list of latest posts GET /wp/v2/posts/<id> retrieve a single post V1: https://2016.raleigh.wordcamp.org/wp-json/posts V2: http://demo.wp-api.org/wp-json/wp/v2/posts V2: http://demo.wp-api.org/wp-json/wp/v2/posts/470 GET - to read data
25. https://2016.raleigh.wordcamp.org/wp-json/posts/ (Old API)
26. http://demo.wp-api.org/wp-json/wp/v2/posts/470
27. Standard arguments as you’d expect and more One Example: filter Use WP Query arguments to modify the response; private query vars require appropriate authorization. GET
28. https://app.circlecube.com/uspresidents/wp-json/wp/v2/president?filter[posts_per_page ]=-1&filter[order]=DESC&filter[orderby]=meta_value_num&filter[meta_key]=took_office
29. PUT - to create or update data POST /wp/v2/posts create post POST /wp/v2/posts/<id> update existing post
30. DELETE - to trash DELETE /wp/v2/posts/<id>
31. Authentication
32. Authentication If you are building a theme or a plugin and want to access the API of the site you’re on you’ll want to authenticate with a cookie. WordPress already does this, so you’ll just want to check if the user has permissions to do what you’re attempting to do. Use a nonce (WordPress security token) to connect to a local API if your theme or plugin wants to connect to the API of the site it’s on via ajax.
33. Authentication Write a nonce in a wp_localize_script with wp_create_nonce and then pass that nonce value in your header.
34. Authentication Write a nonce in a wp_localize_script with wp_create_nonce and then pass that nonce value in your header.
35. Authentication OAuth authentication is the main authentication handler used for external clients. It requires installing the OAuth plugin on the site which then handles authorizations and tokens. For examples on how to use OAuth Authentication checkout the Demo PHP API Client, the CLI client or the API console.
36. Extend - Do More Modifying Responses Adding Endpoints Custom Content Types $args = array( 'show_in_rest' => true );
37. Examples
38. US Presidential Mobile App An app will test your knowledge and teach you the Presidents of the USA – powered with WordPress via the REST API.
39. US Presidential Mobile App
40. https://app.circlecube.com/uspresidents/wp-json/wp/v2/president?filter[posts_per_page ]=-1&filter[order]=DESC&filter[orderby]=meta_value_num&filter[meta_key]=took_office
42. USMNT Soccer App A similar app powered by the WordPress REST API, but with data centering around the US Soccer team.
44. Sitemapper An in-house plugin at Brown Bag Marketing to quickly get up and running with a new WordPress site in our prototyping and wireframing multisite. Construct your sitemap and the plugin will create a new site (in the multisite network) and via the API create new pages according to the supplied sitemap.
46. Digital Dashboard Angular web app built at Brown Bag Marketing to display live stats about a bunch of sites. Connects to sites like pingdom, analytics etc, . The sites are stored in WordPress as a CPT and loaded dynamically and it has featured content that’s pulled from the WP API.
49. Questions, Comments, More (better) Examples, Discuss ?
50. Additional Reading http://v2.wp-api.org/reference/posts/ https://demo.wp-api.org/ https://deliciousbrains.com/creating-mobile-app-wp-api-react-native/ https://css-tricks.com/wp-rest-api-remote-control-wordpress/ https://code.tutsplus.com/tutorials/introducing-the-wp-rest-api--cms-24533 https://www.sitepoint.com/wp-api/ https://webdevstudios.com/2016/01/05/an-overview-of-the-wordpress-json-api-version-2/ https://www.wpkube.com/implementations-wp-rest-api/
51. Thank You ! Slides and code available at https://circlecube.com/does-wordpress/