using the new wordpress rest api
DESCRIPTION
Presentation on the WordPress REST API Tally Code Camp 2014TRANSCRIPT
![Page 1: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/1.jpg)
Using The New WordPress REST API Josh Pollock - JoshPress.net - @Josh412
http://jpwp.me/2y
![Page 2: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/2.jpg)
Hello World.json
![Page 4: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/4.jpg)
The WordPress REST APIA new way to consume and modify data from WordPress, using a standards-compliant JSON RESTful API--from within WordPress or from another application.
![Page 5: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/5.jpg)
Plugin, Feature or What?
Feature as a plugin...
![Page 6: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/6.jpg)
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
![Page 7: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/7.jpg)
This Is A Big DealWordPress runs over 20% of the internet.
![Page 8: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/8.jpg)
It's Very Easy To Use
Kind of like WordPress:)
![Page 9: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/9.jpg)
ExceptYou do not need to know much about
WordPress To Use It.
![Page 10: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/10.jpg)
CapabilitiesAlmost all front-end capabilities of WordPress.
Super extensible, just like WordPress.
Adding Custom Routes/ Endpoints Is Easy.
![Page 11: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/11.jpg)
https://speakerdeck.com/rmccue/wcmke2014
![Page 12: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/12.jpg)
Not Yet...
What About Admin?
![Page 13: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/13.jpg)
AuthenticationFollows WordPress' Existing User Capabilities● Basic Auth
○ Testing Only● oAuth1
○ Most secure● Public/Secret Key Pair
○ OK, over HTTPS
![Page 14: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/14.jpg)
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.
![Page 15: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/15.jpg)
Why This Is A Big DealDecouple the front-end:● Front-end can be on a different server.● Front-end can be in a different language.
![Page 16: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/16.jpg)
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
![Page 17: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/17.jpg)
Not Just For Blogs!
Neither Is WordPress
![Page 19: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/19.jpg)
● Custom Post Types● Custom Taxonomies● Pods Advanced Content Types
○ Separate tables
Custom Content Types
![Page 20: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/20.jpg)
Pods Has A JSON APIAdds routes to the JSON API For Custom
Content Types & Fields
https://github.com/pods-framework/pods-json-api
![Page 21: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/21.jpg)
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.
![Page 22: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/22.jpg)
And: Josie, A Starter Single Page App
![Page 23: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/23.jpg)
Routing Via Node/ Expressvar 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
![Page 25: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/25.jpg)
Advantages● Fast● Simple● Templating in PHP is less than ideal...● Simple code, any front-end dev can work
with
![Page 26: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/26.jpg)
Disadvantages● Some front-end plugins will not work.● Two systems, two points of failure, etc...
![Page 27: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/27.jpg)
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
![Page 28: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/28.jpg)
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
![Page 29: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/29.jpg)
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
![Page 30: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/30.jpg)
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
![Page 31: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/31.jpg)
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
![Page 32: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/32.jpg)
Backbone Based JS Clienthttps://github.com/WP-API/client-js
![Page 33: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/33.jpg)
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
![Page 34: Using the new WordPress REST API](https://reader030.vdocument.in/reader030/viewer/2022020218/5593510a1a28abcb028b45b2/html5/thumbnails/34.jpg)
Learn MoreRead My Articles In Torque
Come To The Tallahassee WordPress Meetup:Turning WordPress Sites Into Web & Mobile Apps Thursday, November 13, 2014 @ Domi