Headless WordPress is a new and increasingly popular way to build web apps that combine WordPress’s peerless content management with the power and flexibility of JavaScript front-end interfaces. Many developers, including WordPress creator Matt Mullenweg, see headless as the future of web app development.
We’re going to take a closer look at what headless WordPress is, how to use a headless content management system, and why you’d want to. But first, let’s talk about how a traditional WordPress site works and how headless WordPress is different.
Headless WordPress
Contents
When you load a page on a WordPress site, the server runs code that builds an HTML document. That document is then sent to your browser. That’s why WordPress and web apps that work in the same way are called server-side apps.
Headless WordPress is a different way of building web apps, sometimes called decoupled or client-side development. As you might have guessed from the name, the app’s interface is created and managed in the client—usually a browser, and not on the server. More accurately, a JavaScript application running in the browser creates the interface with content retrieved from WordPress.
WordPress’s head, its PHP-based front-end interface, is bypassed in a somewhat gruesome metaphor, leaving the body (the CMS itself) on the server, controlled remotely by an external app.
How Does A Headless CMS Work?
A client-side web app and a server-side content management system need a way to talk to each other. That’s the API’s role, which gives this approach to app development yet another name: API-driven development.
An API is an Application Programming Interface, a standardized way for two pieces of software to talk to each other. When an application needs to ask for information or tell other software what to do, it communicates via an API.
WordPress has a REST API, a type of web-based API that allows the software to talk to it over the internet using HTTP web addresses called endpoints. Endpoints look just like the web addresses we use every day to visit websites, and they accept various types of request: GET requests to retrieve information, POST requests to submit information, and so on.
For example, WordPress has a “posts” endpoint that looks like this:
https://example.com/wp-json/wp/v2/posts
When software sends a GET request to a WordPress site’s “posts” endpoint, it returns a list of posts and related information. If the request includes a post ID, it returns the contents of the specified post. We can also use this endpoint to tell the CMS to create a new blog by sending an HTTP POST request with information such as the title and body text.
The API allows any compatible software to communicate with WordPress, acting as the headless back-end of a combined client-server system. To complete the partnership, we also need a front-end, the client-side app that runs in the browser. These apps are often called Progressive Web Apps, or PWAs, and we’ll look at how they work in the next section.
What is a Progressive Web App?
WordPress was first released in 2003. Back then, apps had to live on the server because browsers couldn’t run complex interactive applications. JavaScript, the only programming language that runs natively in web browsers, was far less capable than server-side languages like PHP.
Over time, browsers, the web, and JavaScript evolved. Today, JavaScript is as capable as other programming languages, and browsers are packed with sophisticated features web developers use to build rich applications like Google Docs.
Progressive Web Apps: a term coined by Google, are JavaScript apps that provide a native app-like experience.
Unlike server-side applications, PWAs can:
- Be installed on mobile device home screens thanks to Web App Manifests.
- Work when the user’s device is offline, so they can browse your site in the subway or on an airplane — a feature enabled by caching and service workers that control how the application interacts with the network.
- Smoothly load new content and modify the interface without reloading the whole page.
- Send push notifications to mobile and desktop devices.
A well-engineered PWA feels faster than a server-side app because, once its code downloads, it can preload data from the API and modify the page without making network requests that add latency to every interaction.
Why Use a PWA with Headless WordPress?
WordPress is an excellent CMS. It has stood the test of time, developing a devoted following and a unique ecosystem of plugins, making it one of the most flexible and feature-rich content management platforms ever created. But the traditional server-side model limits its potential.
- Themes have to be written in PHP using the framework built into WordPress.
- Every page load or interface change requires a network round-trip, adding latency and frustrating delays that degrade the user experience.
- WordPress can’t take advantage of the newer web and browser technologies to offer a native app experience.
WordPress’s developers added the REST API because they were aware of these limitations and wanted an option WordPress users could use to take full advantage of the modern web, without giving up WordPress’s robust content management and publishing features. For many businesses, a Progressive Web App is an excellent alternative to a native mobile app. PWAs are cheaper and easier to develop, and you only have to manage a single codebase for the web, iOS, and Android platforms. However, PWAs have some limitations compared to native apps: if you need to use on-device hardware such as sensors, native code is your only option.
How Do I Convert WordPress Into a PWA?
You have a WordPress site, you’re on-board with headless, and PWAs sound incredible. But you’re missing a crucial component: you need a Progressive Web App that speaks WordPress’s language. And there’s the catch: using a PWA with headless WordPress is more complicated than just installing a new theme. But once you have decided to take the plunge with a PWA, there are several ways to achieve your goal.
Install a PWA WordPress Plugin
PWA plugins convert your existing site into a progressive web app. They’re the most straightforward way to bring benefits such as offline functionality, home-screen installation, and fluid interfaces to your WordPress site. However, plugins provide less control and customization than the other options we’ll discuss.
There are several PWA plugins to choose from, including PWA and Super Progressive Web Apps.
Build a Progressive Web App
As we’ve discussed, Progressive Web Apps are independent client-side applications that interface with WordPress via the REST API. In theory, you could develop a PWA in plain JavaScript, but most are built on a web application framework such as React, Angular, or Vue.
Web frameworks help developers to build responsive interfaces from reusable components. Both React and Vue offer tools so that developers can get up and running quickly, and, because they are enormously popular, you’ll have no trouble finding someone to build a PWA for your WordPress site.
Use A Site Generator
Gatsby is a site generator that can pull content from the WordPress REST API to populate a static React-based site.
Whenever a user requests a page, a traditional WordPress site generates it from scratch, running code and making database requests, all of which take time. A static site generator, in contrast, retrieves the content from WordPress and builds the pages once. It serves the same HTML and JavaScript to everyone. That makes static sites incredibly fast.
Gatsby can generate PWAs, including Manifest files for home screen installation and Service Workers for offline functionality. It includes a WordPress source plugin that makes it easy to get data from WordPress and into your static PWA app.
Performance and Flexibility
Headless WordPress isn’t for everyone, and many users are happy with a traditional server-side WordPress site. For users who want to combine WordPress’s content management features with modern web technologies’ performance and flexibility, a headless WordPress site with a Progressive Web App is the best of both worlds.
As always, if you have any feedback or comments, please let us know. We are here to help in the best ways we can. You’ll find us on Discord, the cPanel forums, and Reddit.
