Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
Building Client Side
Applications with
WordPress & WP-API
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.c...
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 sinc...
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?
CLIENT VS. SERVER SIDE - REQUESTS AND RESPONSE
One request to rule them all
“I want my blog posts”
SERVER CLIENT
Benefits of Loading Client Side
Less load on the server
CDN all template files
Easier to cache JS and HTML
VERY Scalable
A...
Single Page Web Application
S.P.A
Not all apps need to be full
S.P.A’s.
Living on the client side
wp_localize_script(
‘some-script',
'APIdata', array(
‘wp_api_url’ => esc_url_raw( get_json_url() ),
‘wp_api2_url’ => rest_...
Step 1: Custom Endpoints for you
(WP-API v1 - PHP)
function register_routes( $routes ) {
$routes[‘/my_route'] = array(
arr...
// Get Pages
$.get( APIdata.wp_api_url + ‘/posts’, { ‘type’: ‘page’ }
.done( function( res ) {
do_something( res );
})
.fa...
/posts - WP-API endpoint
{
ID: 1
content: '<p>Welcome to WordPress. This is your first post. Edit or
delete it, then start...
Step 3: Beautiful Template with the data

Code Example: Client Side Loop
(AngularJS)
//list all posts - this is HTML
<arti...
WHY?
Case Study: Client
Client
WordPress for:
Users

User Authentication

Custom Post Types

Data Storage
WP-API / S.P.A for:
DOM Memory

User Pro...
Case Study: CodeCavalry
CodeCavalry.com
WordPress for:
Users

User Authentication

Custom Post Types

Data Storage
S.P.A for:
Session (CPT) Create...
Awesome Resources
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
WP-API on GitHub & Repository
https://g...
Thank You
Find me online:
Twitter: @royboy789
Github: @royboy789
CodeCavalry.com/royboy789
Roy Sivan Twitter/Github - @roy...
Upcoming SlideShare
Loading in …5
×

Building WordPress Client Side Applications with WP and WP-API - #wcmia

659 views

Published on

My talk on building out custom client-side applications using WordPress and WP-API

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Building WordPress Client Side Applications with WP and WP-API - #wcmia

  1. 1. 1 Building Client Side Applications with WordPress & WP-API Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
  2. 2. There will be code
 WP-API v1 code There will be learning There will be memes Be Warned
  3. 3. 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?
  4. 4. WHY?
  5. 5. Why build Web Applications with WordPress? Why not?
  6. 6. MVC - Client Side M - Model ( WP ) V - VIEW ( THEME ) C - CONTROLLER ( PLUGINS )
  7. 7. HOW?
  8. 8. It’s the best!
  9. 9. POP QUIZ What is the fastest file a web server can serve?
  10. 10. CLIENT VS. SERVER SIDE - REQUESTS AND RESPONSE One request to rule them all “I want my blog posts” SERVER CLIENT
  11. 11. 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
  12. 12. Single Page Web Application S.P.A Not all apps need to be full S.P.A’s.
  13. 13. Living on the client side
  14. 14. wp_localize_script( ‘some-script', 'APIdata', array( ‘wp_api_url’ => esc_url_raw( get_json_url() ), ‘wp_api2_url’ => rest_get_url_prefix() . '/wp/v2/' 'api_nonce' => wp_create_nonce( 'wp_json' ), 'templateUrl' => get_bloginfo( 'template_directory' ) ) ); Step 0: Setup Variable for WP-API url (PHP)
  15. 15. 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() { …… }
  16. 16. // 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)
  17. 17. /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)
  18. 18. Step 3: Beautiful Template with the data
 Code 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>
  19. 19. WHY?
  20. 20. Case Study: Client
  21. 21. Client WordPress for: Users
 User Authentication
 Custom Post Types
 Data Storage WP-API / S.P.A for: DOM Memory
 User Profiles
 Inline Commenting
 Inline Bookmarks
  22. 22. Case Study: CodeCavalry
  23. 23. CodeCavalry.com WordPress for: Users
 User Authentication
 Custom Post Types
 Data Storage S.P.A for: Session (CPT) Create
 Firebase - WebSocket
 User Dashboard
 User Profiles
  24. 24. 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
  25. 25. Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodeCavalry.com/royboy789 Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

×