1

Building Client Side Applications with WordPress & WP-APIRoy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

There will be code WP-API v1 code

There will be learning

There will be memes

Be Warned

WordPress developer at Disney and the co-founder of

My first install of WordPress was 0.7 and been a user & developer since

Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

Who is this geek?

WHY?

Why build Web Applications with WordPress?

WHY NOT

“MVC” - Client Side

M - Model ( WP ) V - VIEW ( THEME ) C - CONTROLLER ( PLUGINS )

HOW?

It’s the best!

POP QUIZ What is the fastest file a web server

can serve?

THE RESPONSE - SERVER SIDE TECH VS. CLIENT SIDE TECHOne request to rule them all

“I want my blog posts”

SERVER - RETURNS PARSED HTML WP-API - RETURNS JSON

Benefits of Loading Client Side

Less load on the server CDN all template files

Easier to cache JS and HTML VERY Scalable

AJAX - can transform your UI / UX

Single Page Web Application

S.P.A

Not all client side apps need to be full S.P.A’s.

Living on the client side

http://todomvc.com

wp_localize_script( ‘some-script', 'APIdata', array( ‘wp_api_url’ => esc_url_raw( get_json_url() ), ‘wp_api2_url’ => esc_url_raw( rest_get_url_prefix() . ‘/wp/v2/’ ) 'api_nonce' => wp_create_nonce( 'wp_json' ), 'templateUrl' => get_stylesheet_directory( 'template_directory' ) ) );

Step 0: Setup Variable for WP-API url (PHP)

Step 1: Custom Endpoints for you (WP-API v1 - PHP)

function register_routes( $routes ) { $routes[‘/my_route'] = array(

array( array( $this, ‘my_callback_function’), WP_JSON_Server::CREATABLE | WP_JSON_Server::ACCEPT_JSON )return $routes;

);

function my_callback_function() { …… }

// Get Pages $.get( APIdata.wp_api_url + ‘/posts’, { ‘type’: ‘page’ } .done( function( res ) { do_something( res ); }) .fail( function( error ) { console.log( error ); });

Step 2: Get Data from WP-API (using jQuery)

/posts - WP-API endpoint { ID: 1 content: '<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>', title: 'Hello world!', status: 'publish', author : {..}, ... }, …

Step 2.5: Get Data from WP-API The response object

(JSON)

Step 3: Beautiful Template with the dataCode Example: Client Side Loop

(AngularJS)

//list all posts - this is HTML <article class="postWrapper" ng-repeat="post in posts” > <h3 class="page_title text-center"> <a href=“/coh/#/post/{{post.ID}}” class="content"> {{post.title}} </a> </h3> {{post.content}} </article>

EXAMPLES?

Case Study: Client

Client

WordPress for:

Users User AuthenticationCustom Post Types Data Storage

WP-API / S.P.A for:

DOM MemoryUser ProfilesInline CommentingInline Bookmarks

Case Study: CodeCavalry

CodeCavalry.com

WordPress for:

Users User AuthenticationCustom Post Types Data Storage

S.P.A for:

Session (CPT) CreateFirebase - WebSocketUser DashboardUser Profiles

Awesome Resources

Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

WP-API on GitHub & Repository https://github.com/WP-API/WP-API https://wordpress.org/plugins/json-rest-api/

CodeCavalry http://www.codecavalry.com

My Blog, AngularJS WP Theme & Plugin http://www.roysivan.com/blog http://www.roysivan.com/angular-wordpress-theme http://www.roysivan.com/angularjs-for-wordpress

Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodeCavalry.com/royboy789

Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com