How to build Client Side Applications with WordPress and WP-API | #wcmia
3 likes1,876 views
This document discusses building client-side applications with WordPress and the WP-API. It introduces the presenter and explains why one would use WordPress for client-side apps. It then outlines the basic steps to get data from the WP-API and display it using templates on the client-side. Examples are provided of fully client-side WordPress sites and code samples are included. Resources for learning more are provided at the end.
![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() { …… }](https://image.slidesharecdn.com/gxffkqcszkcr0abrwydw-signature-8bda0ae6be8f83f0508796052a112f9d10f22ab160c311f094cb0269e797662e-poli-150531051748-lva1-app6892/85/How-to-build-Client-Side-Applications-with-WordPress-and-WP-API-wcmia-15-320.jpg)
How to build Client Side Applications with WordPress and WP-API | #wcmia
- 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?
- 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?
- 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
- 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