35
Using The New WordPress REST API Josh Pollock - JoshPress.net - @Josh412 http://jpwp.me/2y
| Date post: | 01-Jul-2015 |
| Category: |
Internet |
| Upload: | josh-pollock |
| View: | 1,224 times |
| Download: | 5 times |
Using The New WordPress REST API Josh Pollock - JoshPress.net - @Josh412
http://jpwp.me/2y
Hello World.json
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.
Plugin, Feature or What?
Feature as a plugin...
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
This Is A Big DealWordPress runs over 20% of the internet.
It's Very Easy To Use
Kind of like WordPress:)
ExceptYou do not need to know much about
WordPress To Use It.
CapabilitiesAlmost all front-end capabilities of WordPress.
Super extensible, just like WordPress.
Adding Custom Routes/ Endpoints Is Easy.
https://speakerdeck.com/rmccue/wcmke2014
Not Yet...
What About Admin?
AuthenticationFollows WordPress' Existing User Capabilities● Basic Auth
○ Testing Only● oAuth1
○ Most secure● Public/Secret Key Pair
○ OK, over HTTPS
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.
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.
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
Not Just For Blogs!
Neither Is WordPress
● Custom Post Types● Custom Taxonomies● Pods Advanced Content Types
○ Separate tables
Custom Content Types
Pods Has A JSON APIAdds routes to the JSON API For Custom
Content Types & Fields
https://github.com/pods-framework/pods-json-api
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.
And: Josie, A Starter Single Page App
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
Advantages● Fast● Simple● Templating in PHP is less than ideal...● Simple code, any front-end dev can work
with
Disadvantages● Some front-end plugins will not work.● Two systems, two points of failure, etc...
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
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
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
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
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
Backbone Based JS Clienthttps://github.com/WP-API/client-js
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
Learn MoreRead My Articles In Torque
Come To The Tallahassee WordPress Meetup:Turning WordPress Sites Into Web & Mobile Apps Thursday, November 13, 2014 @ Domi
