There are plenty of reasons why WordPress is the most popular CMS on the planet. Chief among them are its general ease-of-use and flexibility. Both of these attributes are keys to the rise of the “headless” WordPress trend. That is, using a WordPress back end to feed content to an outside, non-WordPress application.

While that may sound a bit confusing – not to worry! Today, we’ll introduce you to the headless concept and the types of things you can do with it.

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month!



From WordPress to Anywhere

Think of a headless WordPress setup the same as, well, any other installation of the CMS. You install it just as you normally would. You log into the Dashboard and create pages or posts the same as always.

The main difference? You aren’t depending on WordPress to display the public-facing front end of your website. Instead, the content you create is meant to be used somewhere else. In essence, this could be just about anywhere. But among the most popular uses are:

  • Mobile apps;
  • Progressive web applications using JavaScript libraries such as React;
  • Static websites;

There are several advantages to this approach. For one, it allows content creators to use a familiar tool. They can use WordPress as always, without making major changes to their workflow.

It’s also incredibly flexible. For instance, maybe you have multiple mobile apps that need the same content. Or perhaps you have a mixed bag of places to use it (a mobile app and a static website, etc.). A headless configuration allows you to feed content to any number of targets.

And, because a headless install separates content from design, redesigns can be much simpler. Developers won’t have to set up another instance of WordPress while the new design is being created. Thus, no worries about shuffling content from the production version of the site to development.

Plus, there are potential performance and security benefits. A static website doesn’t have a database – or a back end that can be hacked. Therefore, it’s going to load a lot faster and will be less likely to fall prey to brute force attacks.

Headless WordPress Diagram

Getting Data (The 60-Second Version)

So, how do you get your content from WordPress to another application? It’s actually built right in.

Making WordPress data available to other applications can be accomplished through use of the REST API. Think of it as the bridge between WordPress and other languages and libraries, like Java, Node.js, Swift and more. The API offers up queried data as a JSON response. This allows you to grab, among other things, the pages and posts that you create within the CMS.

Among the niceties of the REST API is the fact that it respects any authentication restrictions. That means, for example, that any content you mark as not public (like a post draft) isn’t available via the API without authentication.

There are alternatives, of course. WPGraphQL is a free plugin that can perform similar functionality, only it uses the GraphQL open source query language. Depending on your particular needs, it could be a good fit for your project. For example, it’s built to work in tandem with the Gatsby static site generator. Going that route would make WPGraphQL the natural choice.

Regardless of the method you use, you’ll have the ability to push WordPress-generated content to just about any type of application.

Code displayed on computer screens.

Considerations and Potential Drawbacks

Beyond the method for querying data from your WordPress installation, there are some other items to think about. That includes a few potential drawbacks.

Building and Maintenance

Since you’re not using a traditional WordPress theme as your front end, maintenance becomes a bit different.

Static websites, for example, require a separate system (such as the aforementioned Gatsby) to covert WordPress content into static pages. If you’re building a single-page JavaScript application, then you have a whole other codebase to maintain.

In short, the build and upkeep processes for the front end can be much more involved for developers than a standard WordPress website.

Functionality

The functionality of any WordPress plugins you’ve installed won’t carry over to another application. This probably isn’t a big deal for a mobile app, as whatever you need it to do will be built within those confines. But it is something to consider for other use cases.

Static websites or progressive web apps will need system-specific plugins or, potentially, functionality that’s written from scratch. You lose the ability to just add a WordPress plugin anytime you need features like a form or a shopping cart.

Performance

Super-fast performance is one of the biggest reasons to go headless. This helps in everything from SEO to conversions. But you still need to ensure that your WordPress install is optimized for speed.

If you intend to publish a lot of content and/or have API calls from multiple sources, things can slow down. Specific tweaks may be required to keep the back end running smoothly.

Person holding a smartphone.

Resources

Decoupling WordPress from the front end is increasing in popularity as more developers experiment with its potential. As such, a number of great articles have been published on the subject. Below is a selection of helpful tips, tutorials and useful background information.

Headless WordPress: The Ups And Downs Of Creating A Decoupled WordPress

Denis Žoljom shares his experiences in building a headless project and offers some helpful code snippets. There’s also a section dedicated to improving REST API performance.

Using WordPress as a Headless CMS

A simple guide by Sufyan bin Uzayr offering the basics of why and how you might use a headless CMS.

Decoupled CMS

A nicely illustrated explanation of what a headless CMS is, plus a number of resources to help you learn more.

Headless WordPress: How To Use Their Blog Data In Your App

Fernando Doglio looks at the advantages and disadvantages of headless WordPress. There’s also an example project to help get you started.

Headless WordPress + Next.js — What We Learned

A behind-the-scenes look from Resi Respati at how one company rebuilt their blog using headless WordPress.

Unleashing Creativity, Maintaining Practicality

In the right circumstances, the use of a headless WordPress configuration can be just the thing your project needs to stand out. The ability to create something like a progressive web app embraces the cutting edge of technology and allows more creative freedom than your average theme-based website.

On the more practical side, utilizing this setup for a mobile app or a static website makes sense on a lot of levels. Content creators can simply do their own thing without the risk of potentially messing up the front end. And you still get all of the convenience of using a CMS.

While going headless isn’t necessarily right for every situation, it’s certainly presents a valid option. And, as its use becomes more widespread, the tools for making it work will only become that much more sophisticated.

Even if you’re not ready to dive in just yet, it is an important niche to keep an eye on.

This post may contain affiliate links. See our disclosure about affiliate links here.