Building web apps with WordPress

1. Web Apps for
the Masses
@davidscotttufts
davidscotttufts.com
Photo by razorray15

2. We are the 16.7%
Photo by Tim Wilson

3. WordPress Evolution
1. Blog
2. Multi-User
3. Custom Post Types
4. CMS
5. What’s next?
Illustration by Rob Green

4. State of the Word 2012
Slide from Matt Mullenweg’s presentation

5. Popular Web Apps

6. Features of Web Apps
 Offer a service
 Safe-keeping of your
personal data
 Access to your personal
data through an API
 Roles and permissions
for controlled and/or
restricted access

7. WordPress Web Apps

8. Building a WordPress
Web Application
Framework
• Use the existing plugin framework
• Build the plugin to be extendable
• Build in a robust public facing API
Photo by Pietro Zuco

9. WordPress App Stack
1. WordPress Core
2. Plugins, Themes, Actions, Filters & APIs.
3. Custom: Post Types, Fields & Taxonomies
4. Build a Web Application Framework Plugin
5. Make Products—Bundled plugins and themes
6. Build Web Apps—Registration, profiles,
friending, subscriptions, public facing API,
in-app social features, sharing, etc.
Photo by Pietro Zuco

10. #1 Rule:
No WordPress
core files or
database tables
should be harmed
in the production
of a plugin
Photo by Sarah Fleming

12. • Module based App Engine
• Public facing API
• Custom post type & taxonomy
manager
• Custom roles & capabilities
• Custom “related posts”
• Custom workflows
• Front end editing
KickPress Features Photo by Brad Coy

13. Why APIs matter
when building
web apps,
and why you
should care.

14. With no API, users are limited in
how the can access their data
Illustration by Eric Tufts

15. Separating content
from presentation
Illustration by Eric Tufts

16. Illustration by Eric Tufts

17. Sample User Interfaces

18. Advanced custom post type
management

19. Advanced roles and capabilities for
managing user permissions

20. API Requests
3 kinds of requests to the server
1. // Request for a full page from the theme
kickpress_is_fullpage();
2. // Request for a page fragment via Ajax
kickpress_is_ajax();
3. // Remote app request or action
kickpress_is_remote_app();

21. 1. Full Page Requests

22. Triggering the KickPress API
API Parameters are appended to the end
of the standard WordPress permalinks:
{site}.com/how-to/ {Archive page for custom post type called “How To”}
{site}.com/how-to/api/add/
{site}.com/how-to/api/save/
{site}.com/how-to/using-powerpoint/api/edit/
More Examples:
{site}.com/2012/08/18/wordcamp/api/edit/
{site}.com/2012/08/18/wordcamp/api/save/
{site}.com/2012/08/18/wordcamp/api/delete/
{site}.com/2012/08/18/wordcamp/api/bookmark/
{site}.com/2012/08/18/wordcamp/api/add_term[category]/featured/

23. 2. Ajax Requests

24. Theme Modifications
Add an extra conditional comment
to the top of these theme files:
header.php
footer.php
sidebar.php
<?php
if ( kickpress_is_ajax() ) { return; }
?>

25. Theme Modifications
Add a conditional blocks for any code that
should be ignored on AJAX requests:
<?php get_header(); ?>
<?php if ( kickpress_is_fullpage() ) : ?>
<div id="content-wrapper">
<?php endif; ?>
<?php $post_type = get_post_type(); ?>
<?php get_template_part( 'loop', $post_type ); ?>
<?php $args = array( 'post_type', $post_type );
<?php kickpress_ajax_reload( $args, 'content-wrapper‘ ); ?>
<?php kickpress_is_fullpage( '</div>‘ ); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

26. 3. Remote API Requests

27. Authentication
Two levels of remote
authentication.
• Remote apps
• Registered users
interacting with your
site’s content remotely
through authenticated
web or mobile apps.
Photo by Jon Worth

28. Remote Application Authentication

29. API Serialized Response
{
"status":"success",
"messages":{
"note":"Term Added"
},
"data":{
"terms":[{
"term_id":"7",
"name":"Featured",
"slug":"featured",
"taxonomy":"category",
"count":"26"
}]
}
}

30. Use KickPress to Build your next
Web App in WordPress
http://kickpress.org/getting-started/