WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications
1 like1,474 views
The document discusses integrating WordPress with client-side applications using frameworks like AngularJS, detailing the benefits of client-side rendering, including reduced server load and scalability. It provides code examples of server-side and client-side loops to illustrate fetching and displaying blog posts. Additionally, it highlights case studies showcasing user authentication, custom post types, and data management in web applications built on WordPress and AngularJS.
WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications
- 1. 1 WordPress, WP-API And Client Side Applications Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
- 2. There will be code There will be learning There will be memes Be Warned
- 5. 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?
- 6. Why build Web Applications with WordPress? Why not?
- 7. HOW?
- 9. Client Side? Client = Browser 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. PHP is the language behind WordPress SERVERCLIENT Client: Sends request for index.php Server: Processes PHP code turning it into HTML. Returns full HTML
- 12. 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
- 13. Single Page Web Application S.P.A
- 14. Code Example: Server Side Loop <?php //list all posts - this is PHP & HTML while ( have_posts() ) : the_post(); ?> <article class="postWrapper"> <h3 class="page_title text-center"> <a href=“<?php the_permalink(); ?>” class="content"> <?php the_title(); ?> </a> </h3> <?php the_content(); ?> </article> <?php endwhile; ?>
- 15. Living on the client side
- 16. Code Example: Client Side Loop (using 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>
- 17. AngularJS - the important bits <?php the_title(); ?> PHP AngularJS HTML Template {{post.title}} <?php the_content(); ?> {{post.title}} <?php the_permalink(); ?> {{post.link}}
- 18. WP-API Response Example /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 : {..}, ... }, …
- 19. ASK NOT HOW, but WHY?
- 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 https://github.com/WP-API/WP-API CodeCavalry http://www.codecavalry.com AngularJS WP Theme http://www.roysivan.com/angular-wordpress-theme AngularJS For WP Plugin http://www.roysivan.com/angularjs-for-wordpress Community Built WP App with AngularJS & Slides http://www.roysivan.com/blog
- 25. Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodeCavalry.com/royboy789 Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com