wired and the wp rest api

KATHLEEN VIGNOS@kathleencodes

WIRED and the WP REST API

IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?

THIRD PARTY? CUSTOM JSON?

SYNCH’ING? EXTERNAL? SPA?

LATEST NEWS?

NOPE.IN THE LOOP?

LATEST NEWS?

Example: Latest News

• WIRED module used everywhere

• WP REST API req’d additional HTTP request

• needs deduping (sometimes)

LATEST NEWS?

LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?

YES. ELEMENTARY,

MY DEAR.THIRD PARTY?

GET REQUEST TO /POSTS/ ENDPOINT

WELL, SORT OF

Example:

• include vendor js • add outbrain data attributes

• fallback: WP REST API

var apiUrl = 'http://' + location.host + '/wp-json/wp/v2/posts/';

// Fallback if OBR not availableif ( typeof OBR === 'undefined' ) {

$( getAll('poweredByOutbrain') ).remove();

return $.getJSON( apiUrl, function(res) {if ( elementId === 'we-recommend' ) {

return smart.rec( get('we-recommend') );}

smart = (function() {var mostRecent = function( target, apiUrl ) {

function render( res ) {var frag = document.createDocumentFragment();var data = res.slice( 0, 5 );

data.forEach(function( value, i ) {var currLi = document.createElement('li');....frag.appendChild( currLi );

});return target.appendChild( frag );

}return $.getJSON( apiUrl, render );

};return {

rec: mostRecent};

YES, WITH MY CONDOLENCESCUSTOM JSON?

GET REQUEST TO CUSTOMENDPOINT

THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?

THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?

Example:

• Custom endpoint • Parse WP post content to markdown

• Output in Apple Native Format

LATEST NEWS?

register_rest_route( 'apple-news/v2', '/post/(?P<post_id>\w+)', array('methods' => WP_REST_Server::READABLE,'callback' => array( $this, 'rest_post_output' ),'args' => array(

'bundle','images','template',

),) );

Apple News Plugin ParserWP DB

Apple News Plugin Parser Apple News Custom JSON

{ "role": "gallery", "layout": "carouselLayoutNoTop", "items": [ { "path": "http://www.wired.com/wp-content/uploads/2016/01/CES_07-NEW-NEW2.jpg", "URL": "bundle://CES_07-NEW-NEW2.jpg", "caption": "Drones as far as the eye can see." }, { "path": "http://www.wired.com/wp-content/uploads/2016/01/CES_11-NEW-NEW2.jpg", "URL": "bundle://CES_11-NEW-NEW2.jpg", "caption": "There are still some old-school immersion tactics. This attendee is sitting through a pre-programmed routine to lower his heart rate and help him feel more relaxed." } ]}

Apple News Preview (simulators)Apple News Custom JSON

YEP, WE CAN AUTOMATE

THATSYNCH’ING?

POST REQUEST TO CREATE POSTS ON

PUBLISH HOOK

Example: Betta Beta Data Getta

• Publish/update hook • Make POST request via WP REST API with post_id

LIVE: www.wired.com

BETA: beta.wired.com

1. data-push

LATEST NEWS?

Example: Betta Beta Data Getta

• Validate request • Make GET request via WP REST API for post_id

• Create post

LIVE: www.wired.com

BETA: beta.wired.com

2. data-pull

LATEST NEWS?

public function __construct() {add_action( 'wp_insert_post', array( $this, 'notify_beta_site_post' ),

100, 3 );}

public function notify_beta_site_post( $post_id, $post, $update ) {$this->update_object( $post_id, 'post' );

public function update_object( $post_id, $object ) {$this->make_request( $post_id, $object );

public function make_request( $id, $object ) {// example: 'http://beta.wired.com/?beta-push=1';$request_url = $this->get_request_url();$request_args = array(

'body' => array('id' => absint( $id ),'object' => $object,

),'headers' => array(

'api-key' => DATA_PUSH_API_KEY,'api-secret' => DATA_PUSH_API_SECRET,

),'blocking' => false,

);$result = wp_remote_post(

$request_url,$request_args

public function __construct() {add_action( 'init', array( $this, 'route_pull_request' ), 11 );

public function route_pull_request() {if ( ! $this->validate_request() ) {

return;}

$id = $this->get_request_id();$object = $this->get_request_object(); // ex: ‘post’$data = $this->get_data( $id, 'post' );$result = $this->save_response_post( $id, $data );exit();

public function get_data( $id, $object ) {$data = array();$request_url = get_request_url_post( $id );// example: https://www.wired.com/wp-json/posts/1234567?context=edit

$response = wp_remote_get($request_url,array_merge(

$args)

);if ( 200 === (int) wp_remote_retrieve_response_code( $response ) ) {

$body = json_decode( wp_remote_retrieve_body( $response ), true );// Check to make sure the data looks rightif ( isset( $body['ID'], $body['title'] ) ) {

$data = $body;}

}return $data;

public function save_response_post( $id, $data ) {$existing_post = get_post( $id );$prepared_data = $this->prepare_post_data( $data, $id );

if ( empty( $existing_post ) ) {$result = wp_insert_post( $prepared_data );

} else {$result = wp_update_post( $prepared_data );

foreach ( $data['post_meta'] as $meta ) {// Note that this will break serialized meta data. Our meta data

does not include serialized meta data.update_post_meta( $result, $meta['key'], $this->$meta['value'] );

}return $result;

SURE, LET’S GET CREATIVE!EXTERNAL?

POST REQUEST TO CREATE

POSTS WITH AUTH

Example: • Node application listens for requests from Slack

• Bot invited to channel • Every comment or image creates a “liveblog update” post type via WP REST API

• WP template w/ React updates content

Liveblog

WP DBNode Serverslack

var addPost = function(preparedMessage, authorID) { return function() { // example wpAPIUrl: http://www.wired.com/wp-json/ request( extend( requestBase, { method: 'POST', uri: config.wpAPIUrl() + '/liveblog', body: { type: 'liveblog', status: 'publish', title: preparedMessage.ts, content: preparedMessage.text, author: authorID, featured_image: (preparedMessage.featuredImageID) ? preparedMessage.featuredImageID : 0 } }...

public function __construct() {add_action( 'rest_api_init', array( $this, 'register_routes' ) );

}public function register_routes() {

// example: http://www.wired.com/wp-json/wired/v2/liveblog/1949283/posts/

// React script hits this endpoint to grab the post objectsregister_rest_route( 'wired/v2', '/liveblog/(?P<post_id>\w+)/posts',

array('methods' => WP_REST_Server::READABLE,'callback' => array( $this, 'posts_callback' ),'args' => array(

'post_id',),

public function posts_callback( $request ) {$posts = '';$params = $request->get_params();$post_id = ( isset( $params['post_id'] ) ) ?

absint( $params['post_id'] ) : 0;$posts = array(

'version' => time(),'posts' => $this->get_liveblog_posts( $post_id )

);return $posts;

public function get_liveblog_posts( $post_id ) {$liveblog_meta = get_post_meta( $post_id, '_liveblog', true );$query = new WP_Query( array(

'posts_per_page' => 500,'post_type' => array( wired_get_liveblog_post()->post_type ),'tax_query' => array( array(

'taxonomy' => wired_get_liveblog_post()->taxonomy,'field' => 'name','terms' => $liveblog_meta['slack-channel-name'],

))) );if ( $query->have_posts() ) {

while ( $query->have_posts() ) {$query->the_post();$clean_posts[] = array(

'id' => get_the_ID(),...

);}}wp_reset_postdata();return $clean_posts;

YES, BECAUSE #NODEJSSPA? JSON OBJECTS

Example: Homepage Curator (in the future)

• Dashboard: Replace WP posts admin table ajax with SPA using React components

• Create custom WP REST API endpoint for homepage and all section fronts

• Front end: Build homepage and section fronts with React components

• Ability to swipe from section to section without reload

THIRD PARTY? CUSTOM JSON?

SYNCH’ING? EXTERNAL? SPA?

LATEST NEWS?

NOPE. WELL, SORT OF. YES, WITH MY CONDOLENCES

YEP, WE CAN AUTOMATE

SURE, LET’S GET CREATIVE!

YES, BECAUSE #NODEJS

All Code Samples in this Gist:http://bit.ly/day-of-rest-2016-kv

Slides:http://www.slideshare.net/kvignos/wired-and-the-wp-rest-api

LATEST NEWS?

KATHLEEN VIGNOS@kathleencodes

THANK YOU!

wired and the wp rest api

Technology

[ms-cprest]: control plane rest api... · 2020-03-05 ·...

rest api guide - e-shot™ · rest api guide getting...

creating a proxy rest api with ibm api management...

rest api ЕСИА для управления...

rest api documentation - gier api... · rest api...

rest api security

rest based api

wp rest api

rest api getting started guide -...

force.com rest api developer guide 1 introducing force.com...

callfire api introduction. outline overview generating api...

api deep dive: apic em rest api

lenovo xclarity administrator rest api guide · lenovo...

sfdc rest api

practical rest api

rest api guide - informatica · rest api guide -...

rest api - audiocodes · rest api 1. overview mediant...

apresentação rest api

arquitectura api rest

joomla rest api