Download to read offline
![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/dxktgmknqu2lsizxgadp-signature-c14d43fd71c37852d806aea4e69ffbb7eb6c2a7ac1837d0ed2fc73700272f340-poli-150530180247-lva1-app6892/75/Building-WordPress-Client-Side-Applications-with-WP-and-WP-API-wcmia-15-2048.jpg)
Uploaded byRoy Sivan
Building WordPress Client Side Applications with WP and WP-API - #wcmia
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.
Building WordPress Client Side Applications with WP and WP-API - #wcmia
- 1. 1 Building Client Side Applicationswith WordPress & WP-API Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
- 2. There will becode WP-API v1 code There will be learning There will be memes Be Warned
- 3. WordPress developer at Disney andthe 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.
- 5. Why build WebApplications with WordPress? Why not?
- 6. MVC - ClientSide M - Model ( WP ) V - VIEW ( THEME ) C - CONTROLLER ( PLUGINS )
- 7.
- 8.
- 9. POP QUIZ What isthe fastest file a web server can serve?
- 10. CLIENT VS. SERVERSIDE - REQUESTS AND RESPONSE One request to rule them all “I want my blog posts” SERVER CLIENT
- 11. Benefits of LoadingClient 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 WebApplication S.P.A Not all apps need to be full S.P.A’s.
- 13. Living on theclient 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: CustomEndpoints 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-APIendpoint { 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: BeautifulTemplate 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.
- 20.
- 21. Client WordPress for: Users User Authentication CustomPost Types Data Storage WP-API / S.P.A for: DOM Memory User Profiles Inline Commenting Inline Bookmarks
- 22.
- 23. CodeCavalry.com WordPress for: Users User Authentication CustomPost Types Data Storage S.P.A for: Session (CPT) Create Firebase - WebSocket User Dashboard User Profiles
- 24. Awesome Resources Roy SivanTwitter/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 meonline: Twitter: @royboy789 Github: @royboy789 CodeCavalry.com/royboy789 Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com