WordPress as a Backend

WordCamp Dayton 2015 - Andrew Duthie

About Me

• JavaScript Engineer at Automattic

• Co-Host of WordPress Cincinnati Meetup group

• Previously worked at a local agency building custom WordPress themes

Web Sites vs

Web Apps

Web Sites are documents

Web Apps are interactive

Speed Matters• With JavaScript, you have

the opportunity to render optimistically

• Even artificial content can give users the perception of speed

JSON REST API

JSONJavaScript Object Notation

{ "id": 1, "type": "post", "slug": "hello-world", "link": "http://wordpress.dev/hello-world/", "guid": { "rendered": “http://wordpress.dev/?p=1" }, "date": "2014-08-14T00:02:39", "modified": "2014-08-14T00:02:39", "title": { "rendered": "Hello world!” }, "content": { "rendered": "<p>Welcome to WordPress.</p>" }, "excerpt": { "rendered": "<p>Welcome to WordPress.</p>” }, "author": 1, "featured_image": 0, "comment_status": "open", "ping_status": "open", "sticky": false, "format": "standard" }

RESTRepresentational State Transfer

Action Endpoint HTTP Verb

List /posts/ GET

Read /posts/1 GET

Create /posts/ POST

Update /posts/1 PUT / PATCH

Delete /posts/1 DELETE

APIApplication Programming Interface

An API is an contract by which a programmer can interact with a

particular service

WordPress Data StoryXML-RPC API

• Verbose • Difficult to work with

XML-RPC JSON

<array> <data> <value><string>Hello</string></value> <value><string>World</string></value> </data> </array>

[ “Hello”, “World” ]

WordPress Data StoryWordPress.com / Jetpack REST API

• Simple to set up • Secure and mature • Requires Jetpack • Extra network hop

WordPress Data Storyadmin-ajax.php

• Ad hoc endpoints • Manually configured

WordPress JSON API

WordPress JSON API

• Alternative to XML-RPC • REST endpoints • Extendable • Expected later this year • Available now as a plugin

WordPress JSON APIQuerying

/wp-json/wp/posts?posts_per_page=10

http://codex.wordpress.org/Class_Reference/WP_Query http://wp-api.org/#posts_retrieve-posts

/wp-json/wp/posts?paged=2

WordPress JSON APIRegistering Endpoints

register_json_route( ‘my-plugin', '/actions', array( ‘methods' => WP_JSON_Server::READABLE, ‘callback' => array( $this, 'get_actions' ), ) );

register_post_type( ‘movie’, array( // … ‘show_in_json’ => true, ‘json_base’ => ‘movies’ ) );

WordPress JSON APIAuthentication

• Cookie Authentication • OAuth1 • Basic Authentication

http://wp-api.org/guides/authentication.html

WordPress JSON APIWP-API.js

• Official JavaScript library • Backbone models and collections • Transparent nonce handling

https://github.com/WP-API/client-js

Use Cases

• Single-page web apps • Mobile apps • Widgets • JavaScript themes • Other technology stacks

Demo

https://github.com/aduth/wordcamp-popular-movies

Thanks!

Questions?