2. @Josh412
CalderaLabs.org
Hi I'm Josh
Lead Developer: CalderaWP
I make WordPress plugins
I teach about WordPress
I wrote a book about the WordPress REST API
I am core contributor to WordPress
I am a member of The WPCrowd
5. @Josh412
REST API Infrastructure
Tools for making REST APIs with
WordPress
Included in WordPress 4.4+
The WordPress REST API
Default Routes
WordPress CRUD via REST API
for WordPress content
wordpress.org/plugins/rest-api
6. @Josh412
Using The REST API For Posts
yoursite.com/wp-json/wp/v2/posts
First page of posts
yoursite.com/wp-json/wp/v2/posts?page=2
Second page of post
yoursite.com/wp-json/wp/v2/posts/42
Post 42
16. @Josh412
API For AJAX and Local Storage
function api( url ) {
var key = 'clCachez' + url.replace(/^https?:///i, "");
var local = localStorage.getItem( key );
//this line uses underscores.js!!
if ( ! _.isString( local ) || "null" == local ) {
return $.get( url ).then( function ( r ) {
localStorage.setItem( key, JSON.stringify( r ) );
return r;
} );
} else {
return JSON.parse( local );
}
};
17. @Josh412
Sorting
function merge( obj1, obj2 ) {
var merged;
a1 = _.toArray(obj1);
a2 = _.toArray(obj2);
merged = a1.concat(a2);
return merged;
};
function sort( list, sort ) {
var sorted = _.sortBy( list, sort );
return sorted.reverse();
};
19. @Josh412
Templating
var posts;
$.when( getCWP(), getIngot() ).then( function( d1, d2 ) {
var all = merge( d1, d2 );
all = sort( all, 'date' );
_.templateSettings = {
interpolate: /{{(.+?)}}/g
};
var html = '';
var templateHTML = document.getElementById( 'tmpl--multiblog' ).innerHTML;
var template = _.template( templateHTML );
var item, templatedItem;
$.each( all, function ( i, post ) {
templatedItem = template( post );
html += templatedItem;
});
document.getElementById( 'posts' ).innerHTML = html;
});
20. @Josh412
Learn More: Client-Side Solution
All Example Code:
jpwp.me/wpc-js-ex
Article:
torquemag.io/2016/07/combine-wordpress-
sites-rest-api/
See It In Action:
CalderaLabs.org/blog.html
github.com/CalderaWP/calderawp.github.io
31. @Josh412
Putting It Together
function multiBlogPosts( $page ) {
$caldera = new Endpoint( 'https://CalderaWP.com/wp-json/wp/v2/posts' );
$ingot = new Endpoint( 'https://IngotHQ.com/wp-json/wp/v2/posts' );
$multi = new MultiBlog( 1 );
return $multi->get_posts( $page );
}
32. @Josh412
Learn More: Server-Side Solution
All Example Code:
jpwp.me/wpc-ex-php
Article:
torquemag.io/2016/07/combine-wordpress-
sites-rest-api-php/
Widget To Show Remote Posts:
github.com/Shelob9/remote-recent-posts