Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Wilmington 2017 WP-API Why?


Published on

It’s here, what can I do with it now? A couple case studies on how to use the API and code samples to get you started. It allows us to further separate the data from the code. Use WordPress as a CMS 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.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

WordCamp Wilmington 2017 WP-API Why?

  1. 1. WP-AP, Why? Review the WP REST API & see What it people are making with it Slides available: WordCamp Wilmington - 23 September 2017
  2. 2. Introductions Evan Mullins Lead Web Developer at Brown Bag Marketing @circlecube WordPress user since 2006 Full-time web developer since 2007
  3. 3. 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. An API is best thought of as a contract provided by one piece of software to another.
  4. 4. And growing! September 2017 hits 18,300+ apis
  5. 5. REpresentational State Transfer It describes how one system can communicate state with another. One example would be the state of a product (and properties) represented as JSON. REST
  6. 6. 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).
  7. 7. The future of WordPress will use JavaScript-driven interfaces powered by the WordPress REST API. Using JavaScript in conjunction with the REST API makes for a great experience for both the developer and end user, which is why every WordPress developer should have some understanding of JavaScript. Matt Mullenweg
  8. 8. WP REST API
  9. 9. WordPress is moving towards becoming a fully-fledged application framework, and we need new APIs. This project was born to create an easy-to-use, easy-to-understand and well-tested framework for creating these APIs, plus creating APIs for core.
  10. 10. This provides an easy to use REST API, available via HTTP. Grab your site’s data in simple JSON format, including users, posts, taxonomies and more. Retrieving or updating data is as simple as sending a HTTP request.
  11. 11. Want to get your site’s posts? Simply send a GET request to /wp-json/wp/v2/posts
  12. 12.
  13. 13.
  14. 14. Get all posts with the search term “awesome”? GET /wp-json/wp/v2/posts?search=awesome It’s that easy.
  15. 15. Update user with ID 4? Send a POST request with JSON as your data to /wp-json/wp/v2/users/4
  16. 16. The API exposes a simple yet easy interface to WP Query, the posts API, post meta API, users API, revisions API and many more. Chances are, if you can do it with WordPress, WP API will let you do it.
  17. 17. /wp-json/wp/v2/posts What’s with the V2?
  18. 18. 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). Having learned many lessons and going for a rebuild we arrive at Version 2.0 as a feature plugin. The infrastructure for the API merged into core in 4.4 (Dec 2015).
  19. 19. Although the remainder of the API (the content endpoints) was proposed for 4.5, the merge was delayed in order to build it out with more endpoints. In 4.7 (December 2016), after considerable discussion and planning, it was officially merged into core ! Authentication and further integration with core in an ongoing focus. A little history
  20. 20. IT’S ALIVE! Did you catch that? Every WordPress website now comes with an API layer built in!
  21. 21. Still Learning API Vulnerability - 4.7 & 4.7.1. Allowed unauthenticated users to POST content updates. Fixed with 4.7.2
  22. 22.
  23. 23. The Nutshell So in a nutshell, rather than getting your content or data via a webpage as part of a website (php, html, css and javascript), you can 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…
  24. 24. That’s one small step for your website, one giant leap for democratizing publishing.
  25. 25. WP REST API Reference Handbook
  26. 26. #core-restapi Slack Channel
  27. 27. 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
  28. 28. 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.
  29. 29. Routes / Endpoints Example With the URL 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.
  30. 30. GET /wp/v2/posts get list of latest posts GET /wp/v2/posts/<id> retrieve a single post GET - to read data
  31. 31.
  32. 32. Standard Loop arguments as you’d expect and more Examples: per_page, order, orderby, search, author, before, exclude, after, include, etc GET
  33. 33. PUT - to create or update data POST /wp/v2/posts create post POST /wp/v2/posts/<id> update existing post of that id
  34. 34. DELETE (to trash) DELETE /wp/v2/posts/<id>
  35. 35. Authentication
  36. 36. Authentication When and why would you need this? To POST or read private data. Internal WordPress code (plugin/theme development) use cookies. External code (using WP-API as a service) use oauth?
  37. 37. Authentication If you are building a theme or a plugin and want to access the API of the same site where the theme or plugin will be, you’ll want to authenticate with a cookie. 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.
  38. 38. Nonce? A nonce is a word or expression coined for or used only once. Usually for security purposes they are a randomly generated number used once as a token. WordPress nonces aren't numbers, but are a hash made up of numbers and letters. Nor are they used only once, but have a limited "lifetime" after which they expire. WordPress's security tokens are called "nonces" despite the above noted differences from true nonces, because they serve much the same purpose.
  39. 39. Authentication Write a nonce in a wp_localize_script with wp_create_nonce and then pass that nonce value in your header.
  40. 40. The nonce in action
  41. 41. Authentication Write a nonce in a wp_localize_script with wp_create_nonce and then pass that nonce value in your header.
  42. 42. Extend - Do More Modifying Responses register_meta( string $object_type, string $meta_key, array $args,string|array $deprecated = null ) Adding Endpoints register_rest_route( string $namespace, string $route, array $args = array(),bool $override = false ) Custom Content Types register_post_type( string $post_type, array|string $args = array() )
  43. 43. Postman HTTP or API client
  44. 44. Examples and some Under the Hood time 1. Mobile App - Content via API 2. Mobile App - Custom endpoint to API 3. WordPress Plugin - POST content to API 4. External site - GET Content via API 5. WordPress Plugin - using js client
  45. 45. 1 Mobile App - Content via API
  46. 46. Mobile App - US Presidents An app will test your knowledge and teach you the Presidents of the USA – powered with WordPress via the REST API.
  47. 47. US Presidential Mobile App
  48. 48. Custom post types exposed to API 'show_in_rest' => true
  49. 49. Custom fields exposed to API
  50. 50. ACF to API Get ACF custom fields to display in your post JSON easily with this plugin!
  51. 51. per_page=50&order=asc&orderby=meta_value_num&meta_key=took_office
  52. 52. 2 Mobile App - Custom endpoint to API
  53. 53. Mobile App - LDS Leaders An app will test your knowledge and teach you the Leaders of the Church of Jesus Christ of Latter-Day Saints – powered with WordPress via the REST API.
  54. 54.
  55. 55. Custom API Endpoint
  56. 56.
  57. 57. 3 WordPress Plugin - POST content to API
  58. 58. Plugin - 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.
  59. 59. Plugin Flow 1. User builds interactive sitemap. 2. Click Export button. 3. Create JSON representation of sitemap. 4. Create new multisite if necessary. a. Using ajax since this is not yet built into the API. 5. Recursively (if necessary) add pages to site via API. a. Need to know endpoint to submit pages. b. Need to know parent id to assign hierarchy. c. Use nonce for write permissions. 6. Set other options: a. create menus (via ajax not in API yet either) to match the sitemap. b. assign theme and other options etc.
  60. 60. PHP
  61. 61. PHP JS
  62. 62. Created a new site and added pages to it via API
  63. 63. 4 External site - GET Content via API
  64. 64. External Site - 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.
  65. 65. 5 WordPress Plugin - using js client
  66. 66. Plugin - Revision Browser Browse WordPress revisions on the front-end of your website! The REST API includes a JavaScript/Backbone client library, which provides an interface for the WP REST API by providing Backbone Models and Collections for all endpoints exposed the API Schema.
  67. 67. Examples
  68. 68. Story &
  69. 69. Calypso
  70. 70. NYTimes
  71. 71.
  72. 72. Custom Contact Forms Plugin
  73. 73. Event Espresso 4
  74. 74. WP Live Search
  75. 75. ACF to REST API
  76. 76. A WordPress REST API White Paper by Human Made Additional Reading
  77. 77. The ultimate guide to the WordPress REST API By Josh Pollock (Torque) Additional Reading
  78. 78. Questions, Comments, More (better) Examples, Discuss ?
  79. 79. More Additional Reading ● ● ● ● ● ● ● ● ● ●
  80. 80. Thank You! Slides available at