Building WordPress Client Side Applications with WP and WP-API - #wcmia
-
Upload
roy-sivan -
Category
Technology
-
view
59 -
download
2
Transcript of Building WordPress Client Side Applications with WP and WP-API - #wcmia
![Page 1: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/1.jpg)
1
Building Client Side Applications with WordPress & WP-APIRoy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
![Page 2: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/2.jpg)
There will be code WP-API v1 code
There will be learning
There will be memes
Be Warned
![Page 3: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/3.jpg)
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?
![Page 4: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/4.jpg)
WHY?
![Page 5: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/5.jpg)
Why build Web Applications with WordPress?
Why not?
![Page 6: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/6.jpg)
MVC - Client Side
M - Model ( WP ) V - VIEW ( THEME ) C - CONTROLLER ( PLUGINS )
![Page 7: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/7.jpg)
HOW?
![Page 8: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/8.jpg)
It’s the best!
![Page 9: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/9.jpg)
POP QUIZ What is the fastest file a web server
can serve?
![Page 10: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/10.jpg)
CLIENT VS. SERVER SIDE - REQUESTS AND RESPONSEOne request to rule them all
“I want my blog posts”
SERVER CLIENT
![Page 11: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/11.jpg)
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
![Page 12: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/12.jpg)
Single Page Web Application S.P.A
Not all apps need to be full S.P.A’s.
![Page 13: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/13.jpg)
Living on the client side
![Page 14: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/14.jpg)
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)
![Page 15: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/15.jpg)
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() { …… }
![Page 16: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/16.jpg)
// 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)
![Page 17: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/17.jpg)
/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)
![Page 18: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/18.jpg)
Step 3: Beautiful Template with the dataCode 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>
![Page 19: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/19.jpg)
WHY?
![Page 20: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/20.jpg)
Case Study: Client
![Page 21: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/21.jpg)
Client
WordPress for:
Users User AuthenticationCustom Post Types Data Storage
WP-API / S.P.A for:
DOM MemoryUser ProfilesInline CommentingInline Bookmarks
![Page 22: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/22.jpg)
Case Study: CodeCavalry
![Page 23: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/23.jpg)
CodeCavalry.com
WordPress for:
Users User AuthenticationCustom Post Types Data Storage
S.P.A for:
Session (CPT) CreateFirebase - WebSocketUser DashboardUser Profiles
![Page 24: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/24.jpg)
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
![Page 25: Building WordPress Client Side Applications with WP and WP-API - #wcmia](https://reader038.fdocuments.net/reader038/viewer/2022103118/55c312fabb61eb81608b46af/html5/thumbnails/25.jpg)
Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodeCavalry.com/royboy789
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com