My talk about building client-side applications with WordPress using the WP-API for WordCamp Miami

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

2. There will be code
WP-API v1 code
There will be learning
There will be memes
Be Warned

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. WHY?

5. Why build Web Applications
with WordPress?
WHY NOT

6. “MVC” - Client Side
M - Model ( WP )
V - VIEW ( THEME )
C - CONTROLLER
( PLUGINS )

7. HOW?

8. It’s the best!

9. POP QUIZ
What is the fastest
file a web server
can serve?

10. THE RESPONSE - SERVER SIDE TECH VS. CLIENT SIDE TECH
One request to rule them all
“I want my blog posts”
SERVER - RETURNS PARSED HTML WP-API - RETURNS JSON

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. Single Page Web
Application
S.P.A
Not all client side apps
need to be full S.P.A’s.

13. Living on the client side
http://todomvc.com

14. 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)

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. // 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. /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. 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. EXAMPLES?

20. Case Study: Client

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. Case Study: CodeCavalry

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. 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. Thank You
Find me online:
Twitter: @royboy789
Github: @royboy789
CodeCavalry.com/royboy789
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com