Headless WordPress: The Complete Guide
Written by Dan Knauss on
February 28, 2023
Last Updated on February 28, 2023
As you probably already know, WordPress is a powerful platform for creating websites. As a Content Management System (CMS), WordPress offers publishing features that are easy to use. And you can expand WordPress to do nearly anything you want to do. But have you heard of “headless” WordPress?
In this guide, you’ll learn exactly what headless WordPress is. You’ll understand the situations that may lead you to use it and the times when using headless WordPress isn’t the best idea. Beyond that, we’ll look at some of the most popular front-end and stack solutions that are typically used with headless WordPress deployments.
In This Guide
The Best WordPress Security Plugin to Secure & Protect WordPress
Before getting too deep into WordPress as a headless CMS, it’s important first to understand what exactly a CMS is and the problems it was designed to solve. What would make one “headless,” and why might this be useful in some cases? Who might find it useful?
What Is a Content Management System (CMS)?
A server-side content management system or CMS dominates “back end” of the vast majority of websites you browse today. In the early days of the Internet, all sites were built directly from static HTML page. To create a new post or article, you would have to create a brand new HTML document. Then you would add it to the server along with its assets, like images, other media, and CSS files. Then you would need to link to the new page in your site navigation and from other pages referencing it.
Content Management Before Content Management Systems
Website development from about 1995-2000 could be incredibly inefficient. Creating and uploading new files any time you had new content was relatively easy. But inevitably the new content called for changes in the older content. And as sites grew to include hundreds and thousands of pages, making changes quickly was impossible as a manual process. Even with some automation, it could be slow.
Presentation and Content Were Mixed
A related problem was that the content and its presentation (e.g., layout and design styles) were inflexible and often mixed together within the HTML document. CSS had to come into its own to truly solve this, but a CMS was needed to take advantage of it by separating design from content.
Workflows and Roles Were Mixed
The difficulty of making global changes to content and design around functional, interactive parts of a website made it a very slow and challenging process to publish and maintain content. Teams responsible for the content, front-end design, and back-end engineering didn’t have clear boundaries either.
The Dynamic, Database-Driven CMS Solution
The content management system was born around this idea: instead of creating entirely new HTML files every time a new webpage was needed, all of the content for each page would be stored in a relational database like MySQL. A CMS written in a server-side language like PHP would then be used to query and include variable pieces of content from the database on dynamically generated pages. Each page request from a visitor might cause a new and unique version of the requested content to be generated for them.
The Limitations of a Dynamic CMS
A CMS uses design templates written in PHP or another server-side scripting language mixed with HTML to generate the final HTML document served to visitors. Compared to the ease of publishing dynamic pages with a CMS, it’s hard to believe there’s anything useful about static file-based web publishing — until you consider security and performance at scale with and without a database that’s queried on almost every page load.
Headless as a Hybrid Approach — The Best of Both Worlds
Headless is a hybrid approach to serving up web pages from largely static assets in a front-end framework. This front end only uses the CMS and database on the back end to fetch dynamic content or receive user input when it’s absolutely necessary. This allows for pages that can be rendered “on the fly” for visitors — and cached when it doesn’t need to change often.
Headless WordPress and Other Headless Content Management Systems
Headless WordPress is a way of deploying WordPress with the back end decoupled from the usual front-end features. No theme is used. The back end is only responsible for:
Database management
Content management
Interacting with external services
The front-end presentation layer typically consists of a React.js or other JavaScript-based front end and HTML/CSS framework. Content is gathered from the back end through an API, like the WP GraphQL (the WordPress implementation of GraphQL) or the WordPress core REST API.
There may also be multiple front ends handling different channels for different devices visitors may use. Additionally, there’s no requirement for the front end(s) to share the same server as the back end. This is the infrastructure you need for efficient omnichannel publishing. Omnichannel lets you serve unique content to mobile apps and all kinds of devices in the Internet of Things.
There are quite a few popular open-source static site generators for building headless websites, like Hugo and Jekyll. These are completely flat file systems without the database and content management tools WordPress offers in headless or traditional deployments. Gatsby and Next.js can be used to generate static sites too, but they also offer advanced front-end frameworks that can be used in headless WordPress deployments. But keep in mind, the real strength of headless WordPress is not that it uses a database far less but that it optimizes database usage for many more possibilities than the traditional CMS’s single-theme, single-purpose front-end. With headless WordPress, you can build multiple front-ends or support a progressive web app (PWA) or native mobile app.
Why Headless WordPress Is the Best Headless CMS
WordPress is such a powerful and widely used platform, it’s in a unique position to succeed as a headless CMS.
Here are five reasons why WordPress may be the best choice for your headless CMS.
1. You Are Already Using WordPress and So is Everyone Else
Chances are, you already use WordPress, so chopping off its head is a simple step forward.
Since WordPress is front-end agnostic, existing sites with databases full of content can go headless fairly painlessly. Or, a headless WordPress site can have a “head” reconnected to it. Moving in either direction isn’t difficult with WordPress.
Many of your employees and future hires have or will have WordPress experience. You can count on an easier onboarding experience with familiar technology.
2. Your Front-End Developers Don’t Need To Touch WordPress or PHP
Since PHP is considered a back-end application language, it usually isn’t a key part of modern front-end development training. The WordPress platform is coded in PHP, however. Its typical (non-headless) front-end development solutions involve custom theme development using WordPress API functions and code that will be familiar to PHP developers but not others. There is a great solution that you can use to lean less on PHP or bypass it completely in favor of modern front-end frameworks. That solution is headless WordPress.
If you are hiring front-end developers to work on a standard (non-headless) WordPress project, you may find you have a smaller labor pool to draw on. A developer who is not grounded in PHP or a similar server-side scripting language may find their WordPress learning curve is high. But if they excel in front-end development with complex CSS and JavaScript frameworks like React, this is perfect for a headless WordPress site. Why not play to their strengths? In another scenario, if you aren’t already using WordPress or a similar CMS but you do have experienced front-end developers, you may not want to make them learn how to work with an entirely new CMS. This is when headless WordPress can be a great solution.
Developers don’t have to be familiar with WordPress to build a front-end for a headless WordPress site. You could hire just about any capable front-end developer. You can spend a little or a lot but get a completely custom front end. A completely unique, bespoke site design will almost always serve you best if you have very unique needs.
3. Enterprise-Class Hosts Support Headless WordPress
Nearly every website hosting platform offers WordPress hosting. They may have over a decade of experience supporting it. Managed WordPress hosts support enterprise WordPress sites, and many major Managed WordPress hosts offer specialized headless hosting, tools, and support. They make the security and performance of your site their priority.
4. Headless WordPress is Fast
Every CMS posts slower load speed times for visitors compared to a static site. Dynamic page generation requires more server resources, and a heavily built-out CMS may have a lot of server overhead. Even a highly performant WordPress site with solid hosting and efficient caching will be slowed by high traffic loads and many active logged-in front or back-end users. Headless WordPress sites still get the benefits of the CMS but work more like static site generators with a database. Visitors get mostly fast-loading static files when they come to a headless site.
A website that takes too long to load is one of the biggest problems for site owners. With the exponential increase in mobile site browsing, speed is more important than ever. On e-commerce sites, slow loading means losing sales. A typical user isn’t going to sit and wait for your site to load for more than a few seconds. If it doesn’t load immediately, they’ll move on to the next thing.
Decreasing the load times of your site is crucial. Moreover, Google takes into account page load speeds when it ranks sites for search results. If SEO is a big priority to you, it may be smart to consider a different front end for WordPress.
5. Headless WordPress Can Increase Security
An ordinary WordPress installation leaves the back-end admin interface exposed and not just the login screens. Even low-level non-admin users can potentially access the back-end admin. Sometimes hackers can exploit this through a vulnerable plugin or theme. Headless WordPress sites typically won’t use a theme at all, and content-focused headless sites can limit users to a few trusted users. The login process can be locked down tightly in this scenario, and other possible targets for hackers might be shut down because they’re not needed.
You can use a powerful WordPress security plugin like iThemes Security Pro to fully secure a headless WordPress site. It’s just as useful on any kind of WordPress site for securing the back end, setting proper user access roles, and enforcing secure login policies.
When Is It a Bad Idea To Use Headless WordPress?
While headless WordPress is an incredibly powerful tool to have in your belt, it does come with a few disadvantages.
It Can Be Complex
Building a headless CMS isn’t for inexperienced developers unless they’re prepared to do significant learning. Unlike WordPress, which is 100% plug-and-play, a headless CMS isn’t. You begin with a simple WordPress installation and then decouple parts of it, mainly the front end. Then you’ll need to develop your own front end. If this is unfamiliar territory, there will be a significant learning curve. Unlike normal WordPress sites, headless WordPress isn’t nearly as widely understood or as well documented. It will pay to connect with and follow the work being done by major headless WordPress hosting and development experts.
Some Things Won’t Work
Newer site editing features in WordPress won’t be useful or usable on a headless site. Getting the block editor within the Gutenberg post editor to work well with your headless front end poses some challenges too. Many WordPress plugins may not work well or at all in a headless environment. WordPress hosts and developers are working to improve and support headless WordPress development, so this is an area that is always changing. Carefully research the current state of headless WordPress technology and plan your project accordingly.
Maintenance is Mandatory
Maintaining your own front-end code can be time-consuming. And since the Gutenberg post editor lives on the WordPress backend, if you want to use it with your headless site, you’ll have to sync its back-end styles with your decoupled front-end framework for true a WYSIWYG experience. That front-end framework will need constant maintenance as well. Headless deployments require careful advance planning for ongoing maintenance that goes beyond a traditional WordPress or CMS-driven website.
Get the bonus content: A Guide to WordPress Security
Getting Started With Headless WordPress
Install WordPress, and cut off the front end!
As is usually the case in WordPress, some plugins can help you do this. One is aptly named the Headless CMS plugin. Install and activate it like any other WordPress plugin.
Next, begin working on your site’s front end. You can take a few different approaches. You might decide to choose an already-existing front end or framework to build on, like Gatsby. Or, you may consider building a Progressive Web App.
Jamstack
If you’re unfamiliar with Jamstack , it’s a frequently-used platform for web development. Using it would serve you well as a front end for headless WordPress or any other CMS.
Loose coupling is one of Jamstack’s biggest strengths. If you’ve ever gone through the process of decoupling WordPress, this is a feature that you’ll find highly useful.
Progressive Web Applications (PWA)
A PWA is similar to a website in a lot of ways. But unlike websites, a PWA will employ a huge range of Javascript libraries that give users a native mobile experience
For this, you’ll need to use a framework such as React or Vue to develop the app.
Gatsby
Are you looking to fast-track your development process while maintaining most of the freedom you get with a headless CMS?
Gatsby is a good choice, and there’s a plugin for it.
Is Headless WordPress For You?
WordPress is an incredible tool on its own. But there are times when you may require your own front end by using a headless CMS.
In this guide, you’ve learned the methods, reasons, and approaches to take when you set up headless WordPress.
If you’ve decided that going headless is the best way to meet your site development needs, now you know enough to get started.
The Best WordPress Security Plugin to Secure & Protect WordPress
WordPress currently powers over 40% of all websites, so it has become an easy target for hackers with malicious intent. The iThemes Security Pro plugin takes the guesswork out of WordPress security to make it easy to secure & protect your WordPress website. It’s like having a full-time security expert on staff who constantly monitors and protects your WordPress site for you.
