Presentation on the WordPress REST API Tally Code Camp 2014

1. http://jpwp.me/2y
Using The New
WordPress REST API
Josh Pollock - JoshPress.net - @Josh412

2. Hello World.json

3. The Universal Connector
http://xkcd.com/1406/

4. The WordPress REST API
A new way to consume and modify data from
WordPress, using a standards-compliant JSON
RESTful API--from within WordPress or from
another application.

5. Plugin, Feature
or What?
Feature as a plugin...

6. The WordPress REST API
● Currently under development, totally
functional. In WordPress core *soon*.
● For now, its a plugin:
● Download:
○ https://wordpress.org/plugins/json-rest-api/
● Docs
○ http://wp-api.org

7. This Is A Big
Deal
WordPress runs over 20% of the internet.

8. It's Very Easy To
Use
Kind of like WordPress:)

9. Except
You do not need to know much about
WordPress To Use It.

10. Capabilities
Almost all front-end capabilities of WordPress.
Super extensible, just like WordPress.
Adding Custom Routes/ Endpoints Is Easy.

11. https://speakerdeck.com/rmccue/wcmke2014

12. Not Yet...
What About
Admin?

13. Authentication
Follows WordPress' Existing User Capabilities
● Basic Auth
○ Testing Only
● oAuth1
○ Most secure
● Public/Secret Key Pair
○ OK, over HTTPS

14. Why This Is A Big Deal
● Quality WordPress developers are in
demand and expensive.
● With a little prep work, any front-end
developer can work on your WordPress,
REST API-Powered Site.

15. Why This Is A Big Deal
Decouple the front-end:
● Front-end can be on a different server.
● Front-end can be in a different language.

16. What Can You Use It For?
● Make your existing site more interactive
● Use WordPress as the backend for an app
● Process forms
● Integrate your WordPress site with other
platforms
● Integrate other platforms
● Make cool plugins

17. Not Just For
Blogs!
Neither Is WordPress

18. Pods- Power Tools For WordPress as a CMS.

19. Custom Content Types
● Custom Post Types
● Custom Taxonomies
● Pods Advanced Content Types
○ Separate tables

20. Pods Has A JSON API
Adds routes to the JSON API For Custom
Content Types & Fields
https://github.com/pods-framework/pods-json-api

21. What Have I Made With It?
● JP-REST-API-Client - A simple client for creating and updating posts via the WordPress
REST API via the WordPress HTTP API.
● Pods JSON API - I added new routes, endpoints and documentation to the add-on to the API
for Pods.
● Pods Deploy - A tool for automating the process of moving Pods configurations between
sites.
● JP-Tax-Query - A custom endpoint for making tax queries via the REST API.
● A basic front-end post editor, detailed in this Torque article.

22. And: Josie, A Starter Single Page App

23. Routing Via Node/ Express
var express = require('express');
var path = require('path');
var server = express();
server.use(express.static(__dirname + '/public'));
server.use(express.static(path.join(__dirname, 'public')));
server.get('*', function(req, res){
res.sendFile(__dirname + '/public/index.html');
});
var port = 10001;
server.listen(port, function() {
console.log('server listening on port ' + port);
});
https://gist.github.com/Shelob9/460ed491f3a2b2773dac#file-routing-via-node-express-js

24. Demo Time
http://jpwp.me/app

25. Advantages
● Fast
● Simple
● Templating in PHP is less than ideal...
● Simple code, any front-end dev can work
with

26. Disadvantages
● Some front-end plugins will not work.
● Two systems, two points of failure, etc...

27. Basic Code Patterns
● All examples in JavaScript
● Will Work In WordPress or Outside of it
● Skipping PHP Today
○ https://github.com/Shelob9/jp-wp-api-rest-api-client

28. Get A Post: AJAX
$.ajax({
type: 'GET',
url: 'http://example.com/wp-json/posts',
dataType: 'json',
success: function(posts){
$.each( posts, function(index, post) {
//do something with each post
});
},
error: function(error){
console.log(error);
}
});
https://gist.github.com/Shelob9/460ed491f3a2b2773dac#file-get-post-via-wp-api-js

29. Get Posts: AJAX
$.ajax({
type: 'GET',
url: 'http://example.com/wp-json/posts',
dataType: 'json',
success: function(posts){
$.each( posts, function(index, post) {
//do something with each post
});
},
error: function(error){
console.log(error);
}
});
https://gist.github.com/Shelob9/460ed491f3a2b2773dac#file-get-posts-via-wp-api-js

30. Parse With Handlebars
$.ajax({
type: 'GET',
url: 'http://example.com/wp-json/posts',
dataType: 'json',
success: function(posts){
$.each( posts, function(index, post) {
var source = $('#posts').html();
var template = Handlebars.compile(source);
var html = template(post);
});
},
error: function(error){
console.log(error);
}
});
https://gist.github.com/Shelob9/460ed491f3a2b2773dac#file-get-posts-via-wp-api-handlebars-js

31. Get All Posts With Tag
$( '[rel="tag"]' ).click( function( event ) {
event.preventDefault();
var href = this.href;
if ( href.substr(-1) == '/') {
href = href.substr( 0, href.length - 1 );
}
var slug = href.split('/').pop();
$.ajax({
type: 'GET',
cache: true,
url: rootURL + '/posts?filter[tag]=' + slug,
dataType: 'json',
success: function(posts) {
var html = '<ul>';
$.each( posts, function(index, post ) {
html += '<li><a href="' + post.link + '">' + post.title + '</a></li>';
});
html += '</ul>';
$('article').append( html);
}
});
});
https://gist.github.com/Shelob9/460ed491f3a2b2773dac#file-all-posts-with-tag-js

32. Backbone Based JS Client
https://github.com/WP-API/client-js

33. JS Client Example: Users
function loadUsers ( users, container, templateID ) {
$.each(users, function( i, val ) {
var user = new wp.api.models.User( { ID: val } );
user.fetch().done(function () {
loadUser( user, container, templateID );
});
});
}
function loadUser( user, container, templateID ) {
var name = user.attributes.name;
var avatar = user.attributes.avatar;
var ID = user.attributes.ID;
var source = $( templateID ).html();
var data = {
name: name,
avatar: avatar,
ID: ID
};
var template = Handlebars.compile( source );
var html = template( data );
$( container ).append( html );
}
https://gist.github.com/Shelob9/460ed491f3a2b2773dac#file-users-js

34. Learn More
Read My Articles In Torque
Come To The Tallahassee WordPress Meetup:
Turning WordPress Sites Into Web & Mobile
Apps Thursday, November 13, 2014 @ Domi

35. Josh@JoshPress.net - @Josh412
Questions?
Slides and info: http://jpwp.me/2y