WordPress evolved from a simple blog platform into a full-fledged content management system. It is now evolving beyond that into an application development framework. It is a new era for WordPress. One that partly made possible by the WP-API plugin. The plugin bolts a REST API on top of the WordPress platform, allowing for integration of WordPress with other systems. WP-API can be leveraged in many ways. For example, there is a lot of excitement around using WordPress as a backend for single page web apps and mobile apps. But the possibilities don’t end there. In this talk, we will explore the use of WP-API to integrate WordPress-managed content with static site generators. Static site generators and flat-file CMSs have been growing in popularity over the past few years, due largely to developer productivity, reliability, security, performance and ease-of-deployment. They are a compelling alternative but compromises must be made to realize the benefits. It doesn’t have to be an either-or decision. We will explore strategies for using WordPress as a collaborative writing room – similar to proprietary alternatives like Prismic.io and Contentful. And we will explore strategies for building static sites using that content. Presented at WordCamp Hamilton 2015 - By Nick Kenyeres - Director of Technology at Wise & Hammer Inc.

3. …there was a time before
WordPress

4. One file per page

5. Assemble pages by including
common components

6. Mix in data from other sources

7. Emerging trends
• DRY
• Eliminate duplicate content
• Separate concerns
• Improve productivity

8. Thanks PHP

9. They matter too
But what about the content authors?

11. Content is a first class citizen

12. Further separation of concerns
• Users enter content using a GUI
• Programmers create templates that utilize the user-entered content
• Web pages generated on demand

13. Sounds simple?

14. It’s not
• With (pretty much) any CMS:
• Wrangling together templates and data is complicated
• The process is demanding and involves needless work

16. Most CMS-based websites
Writes ReadsExpensiveModerate

18. Some CMS-based websites
Writes ReadsCheapModerate

19. Thanks caching!

20. “The stack” stacks up
HTTP Accelerator (Varnish)
Web Server (Apache)
Application Server (WordPress/PHP)
Database (MySQL)
Object Cache
(MemCached)
File System

22. Too far?

23. Do you build a solution for your
problem or do you fit your problem
into a solution?

24. Build a solution
• We have the tools:
• Static site generators
• Rapid application frameworks
• APIs
• CMSs / Writing rooms

25. Big problems
Tiny solutions

27. Why static sites
• Fast
• Secure
• Scalable
• Simple themes and integrations
• Own conventions, languages, and tools
• Excellent version control story

28. The generators help!
Build
HTML
JS SVGCSS
GIF JPGPNG
Source
HTML
COFFEE SVG
TWIG ERB
SCSS
GIF JPGPNG
JSON YAML MD

29. Productivity, performance, security, scalability
paid for with slow resource intensive build
processes

30. The new reality
Writes ReadsCheapExpensive

31. Requirements diminish
Server/CDN
File System

32. More hosting options open up
• Shared hosting
• VPS
• GitHub Pages (https://pages.github.com/)
• Dropbox (https://pages.github.com/)
• Google Drive (https://www.google.com/drive/)
• Amazon S3 (http://aws.amazon.com/s3/)

33. There are drawbacks
• Particularly with the concept of keeping content in flat files
• Hard to contribute (knowledge of Git)
• Hard to collaborate

34. Writing rooms to the rescue
• Contentful (https://www.contentful.com/)
• Prismic.io (https://www.prismic.io/)
• Pull in data through the API into a static build process

35. Focus
Admin interface for content creation and
collaboration

36. However…
• Subscription services
• Potential for vendor lock-in
• Lack of mature, open source alternatives

37. WordPress as a pure CMS
• WordPress can be used as an alternative to writing rooms like
Prismic.io and Contentful
• Content authors use WordPress to manage content and collaborate;
not to build web sites
• Content pulled out of WordPress and injected into static build
process

38. WP REST API
• Popular plugin that will be integrated into core
• Provides an HTTP REST API
• Extensive API for CRUD operations on comments, media, meta data,
posts, taxonomies, and users
• http://wp-api.org

39. Advanced Custom Fields Pro
• Popular plugin that allows for rapid creation of custom fields
• Supports many field types, including text, number, image, map,
links, and post references
• Rich ecosystem of extensions including repeaters
• http://www.advancedcustomfields.com

40. WP REST API Custom Fields
• Adds custom fields defined with ACF Pro to JSON output
• Inserts an object into the meta key with all your fields
• http://wordpress.org/plugins/wp-rest-api-custom-fields

41. Putting the backend together
• A 15-minute REST server with multi-user support, roles and
permissions, and an admin interface
1. Enable the aforementioned plugins
2. Setup friendly permalinks
3. Create custom post types if necessary
4. Setup custom fields if necessary
5. API accessible at /wp-json

43. Choosing a static site generator
• Comes in pretty much any language: C, C++, Java, Go, Haskell,
Erlang, JavaScript, Ruby, Python, PHP, etc.
• Choose a language you a comfortable with and enjoy working with
• Choose a system that is mature
• Choose a system that lets you work with many different types of
inputs, including remote content for maximum flexibility

44. Middleman
Hand-crafted frontend development
https://middlemanapp.com/

45. Key Features
• HTML, Markdown, YAML, and JSON format
• Templating language
• Asset pipeline
• Live reload
• Development server
• Common preprocessors and concat/minify out of the box

46. Useful Extensions
• Deploy
• Blog
• Pagination
• SVG Fallback
• Full list: https://directory.middlemanapp.com/#/extensions/all

47. Directory Structure
• Data
• Lib
• Source
• Images
• Javascripts
• Layouts
• Stylesheets
• Pages, posts, etc

48. Source
index.html.md
/about
Build
Data
/css /js/img
layout.html.erb logo.svg all.scss
_header.scss
_footer.scss
all.js
menu.coffee
feed.js
_header.html.erb
/layouts

49. Build
index.html
/about /css /js/img
logo.svg all.css all.js
logo.png
logo@2x.png

50. Dynamic Files
• Data is made available to our templates
• Useful for creating menus, lists, directories, etc.
• Pages can also be dynamically generated from data

51. sally.html roger.html sue.html
steven.html lisa.html
people
build
people.json
data

52. Dynamic Pages
In config.rb
people.each do |person|
proxy “people/#{person[‘name’]}.html”,
“layout/person.html”, locals: { person: person }
end

53. Data Source Library
In lib/wordpress.rb
class WordPress
include HTTParty
def initialize(uri)
self.class.base_uri uri
end
def posts
@posts ||= self.class.get(‘/posts?type=post’)
end
end

54. Dynamic Pages from Data Source
In config.rb
@wordpress = WordPress.new(“http://supersecret.dev/wp-json”)
@wordpress.posts.each do |post|
proxy “/blog/#{post[‘slug’]}/index.html”, “templates/post.html”,
locals: { post: post }
end

55. Expose Data Source to Templates
In config.rb
helpers do
def wordpress
@wordpress
end
end

56. Use Data Source in Templates
In source/blog/index.html
<% wordpress.posts.each do |post| %>
<div>
<h3><a href=“/blog/<%= post[‘slug’] %>/”><%= post[‘title’] %></a></h3>
<div><%= post[‘excerpt’] %></div>
</div>
<% end %>

57. Nicer than this!
<?php
if (have_posts()) {
while ( have_posts()) {
the_post();
?>
<div>
<h3><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
<div><?php the_excerpt(); ?></div>
</div>
<?php
}
}
?>

63. There’s a plugin for that
• Hookpress
• Turns internal hooks into web hooks
• Recompile your site when content is updated
• https://wordpress.org/plugins/hookpress/

64. Middleman-WordPress Example
https://github.com/knicklabs/middleman-
wordpress-example