Since the introduction of the REST API, developers have been seeking ways to leverage the benefits of WordPress for content creation, while offering new options for presenting that information on the client side. Native mobile apps, JavaScript front-ends, static sites – the possibilities are endless. Let’s take a closer look at the benefits and limitations of going “headless” with WordPress, find out what the hype is about, and determine whether this approach is something that could benefit you or your clients.

1. Lose Your Head!
Reimagining WordPress's Role
in Content Presentation
Jeremy Ward
WordCamp Minneapolis-St. Paul
August 24, 2019

2. @_jmichaelward jmichaelward.com
Hi, I'm Jeremy.
• Senior Backend Engineer at WebDevStudios
• Student of Software Architecture
• Author of OOPS-WP
• Board Game Enthusiast
• Stand-up Comedy Fan
• "I'm from St. Paul."

3. @_jmichaelward jmichaelward.com
Why We're Here
• Learn about "front-end", "back-end", and "headless"
• Discuss the recent history of the WordPress project
• Discover benefits and trade-offs of a headless approach
• Review available front-end presentation options
• Find out where to learn more

4. @_jmichaelward jmichaelward.com
What is "Headless"?

5. @_jmichaelward jmichaelward.com
Headless === Two Apps

6. @_jmichaelward jmichaelward.com
Classic WordPress

7. @_jmichaelward jmichaelward.com
Headless WordPress

8. @_jmichaelward jmichaelward.com
WordPress in the back...
• WordPress admin dashboard for content entry
• WP REST API
• MySQL database for storing content (...maybe)

9. @_jmichaelward jmichaelward.com
...party in the front!
• Custom JavaScript apps (Node, React, Vue)
• Native or mobile apps
• "Serverless" sites
• Basically anything that presents content that isn't WordPress itself

10. –Matt Mullenweg, 2015 State of the Word
"Learn JavaScript, deeply."

11. @_jmichaelward jmichaelward.com
WP REST API

12. @_jmichaelward jmichaelward.com

13. @_jmichaelward jmichaelward.com
The Key To It All
• JSON-based interface for getting and creating data
• Fully customizable
• Faster than admin-ajax!

14. @_jmichaelward jmichaelward.com
Authentication

15. @_jmichaelward jmichaelward.com
API Tools
• Command Line
• cURL
• HTTPie
• GUI
• Postman
• Insomnia

16. @_jmichaelward jmichaelward.com
Block Editor

17. @_jmichaelward jmichaelward.com
Frontends

18. @_jmichaelward jmichaelward.com
Static Sites

19. @_jmichaelward jmichaelward.com
JavaScript Apps

20. @_jmichaelward jmichaelward.com
Mobile Apps

21. @_jmichaelward jmichaelward.com
Benefits and Trade-offs

22. @_jmichaelward jmichaelward.com
Why Headless?
• Publish once, distribute anywhere
• Better security
• Separate apps
• Potentially static frontends (no logins!)
• Improved performance
• WordPress skillsets not required for frontend development

23. @_jmichaelward jmichaelward.com
There are Trade-offs
• Maintain two apps instead of one
• Requires specialized skillsets (e.g., JavaScript developers)
• Feature loss/challenges
• Native preview
• SEO
• WordPress theme settings/filters

24. @_jmichaelward jmichaelward.com
Who's Going Headless, and...
Do I Need To?

25. @_jmichaelward jmichaelward.com
But, performance...

26. @_jmichaelward jmichaelward.com
define( 'SHORTINIT', 1 );

27. @_jmichaelward jmichaelward.com
define( 'WP_USE_THEMES', false );

28. @_jmichaelward jmichaelward.com
GraphQL

29. @_jmichaelward jmichaelward.com
WordPress as a Client

30. @_jmichaelward jmichaelward.com
Calypso

31. @_jmichaelward jmichaelward.com
Demo....?

32. @_jmichaelward jmichaelward.com
Summary

33. @_jmichaelward jmichaelward.com
WordPress is Changing

34. @_jmichaelward jmichaelward.com
Developer Roles are Changing

35. @_jmichaelward jmichaelward.com
Change is the only constant.

36. @_jmichaelward jmichaelward.com
Resources
• REST API Handbook: https://developer.wordpress.org/rest-api/
• Smashing Magazine:
https://www.smashingmagazine.com/2018/10/headless-wordpress-decoupled/
• Postlight Headless WP Starter: https://github.com/postlight/headless-wp-starter
• Gatsby + WordPress: https://www.gatsbyjs.com/guides/wordpress/
• Headless WordPress with React:
https://medium.com/@jchiatt/headless-wordpress-with-react-d573bca02ee0
• WPGraphQL: https://wpgraphql.com
• JAMStack: https://jamstack.org

37. @_jmichaelward jmichaelward.com
Questions?
• Twitter: @_jmichaelward
• E-mail: jeremy@jmichaelward.com
• Work: https://webdevstudios.com
• Check out: https://github.com/webdevstudios/oops-wp