Headless WordPress

For step-by-step instructions on using WordPress as a headless back-end with Gatsby as the front-end see the GitHub repo

Interesting Note: We’ll be looking particularly at static site generators (SSGs) of which Matt Mullenweg is not a fan.

What is Headless?

  • Some confusion regarding terms due to inconsistent use within community (which tends to happen):
    • In a generic sense, “head” is the front-end (UI) of a site (do we actually use it that way?) so “headless” is a site without a front-end.
    • “Headless” sites have existed in the WordPress ecosystem using the REST API.
    • More recently, the term has been used in association with Static Site Generators (SSG’s) such as Gatsby, where WP serves as the back-end (“headless”) and Gatsby serves as the front-end (“head”).
    • While other languages (Go: Hugo, Ruby: Jekyll) provide SSG’s, the most popular are in JS and these are often referred to as using the Jamstack (JavaScript, API, Markdown).

Why Use Headless?

  • Performance Gains
  • Scalability
  • Reduced Cost (at scale)
  • Security Improvements
  • Decoupled UI
  • Use Latest JS Frameworks
  • Separation of Concerns (SoC)

Downsides of Headless

  • Now maintaining two separate sites – WP back-end and front-end.
  • The complexity of front-end frameworks (e.g. React) reduces productivity in the short-term.
  • Loss of plugin functionality (most WP plugins won’t work in a static environment).
  • Must be rebuilt every time a change occurs.
  • Takes a long time to build (depends).

WP Plugins for Generating Static Sites

WP Static Hosts

WPGraphQL

Learning More

Resources

Questions

  • WP Search? wp-search

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.