This document discusses building client-side applications with WordPress and the WP-API. It introduces the concepts of using WordPress for the model and data storage, while building the views and controllers on the client-side. It provides a step-by-step process for setting up the WP-API, retrieving data from it using jQuery, and rendering templates on the client. Examples of real applications built this way include CodeCavalry. Useful resources for learning more are also listed.

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. CLIENT VS. SERVER SIDE - REQUESTS AND RESPONSE
One request to rule them all
“I want my blog posts”
SERVER CLIENT

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 apps need to be full
S.P.A’s.

13. Living on the client side

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

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