- Published on
Headless WordPress Explained And Why You Need It
The chances are, I don’t need to tell you about the benefits of using WordPress as the content management system for your website.
It’s straightforward, familiar and easy to use.
With web technologies advancing quickly as ever, there’s a new way to use WordPress that you should be considering.
You may have heard of the following phrases:
- Headless WordPress
- Decoupled WordPress
These are similar terms for pretty much the same thing.
Headless or decoupled, the strategy is to detach the WordPress back end from the front end.
Bringing with it the best of both worlds for those that want to serve a modern front end and manage their content within WordPress.
In this article, I’ll explain what headless WordPress is and why you might want to use it for your next project.
What Is A Headless Content Management System?
Before we look at headless WordPress specifically, we need to think about headless CMS methodology in general.
A headless architecture approach makes no assumptions about the presentation layer. In other words, the back end does not care about the front end.
The CMS is built to create content, store content and serve it as an API.
The API (Application Programming Interface) acts as the bridge between the two pieces of software (back end and front end), allowing them to communicate.
This allows a PHP back end to interact with a JavaScript front end, for example. This being the typical reason you’d want to consider a headless approach.
A separation of concerns between the back end and front end of your web project can be beneficial because:
- You can change one without having to change the other, leaving each to evolve at their own pace. This can lead to faster development overall.
- It’s possible to appropriately source and place-specific expertise within your development team.
- Separating your codebase into two repositories makes it easier to implement tests, deployment pipelines and to revert changes should something go wrong.
In summary, a headless content management system has the following traits:
- It stores content in a database.
- Creation of said content is done in a back end admin area.
- This content can be served to any given front end and/or device via an API.
So How Does Headless WordPress Work?
Relating this approach to WordPress; the overall premise of a headless WordPress project is to utilise the REST API.
The REST API was introduced to WordPress core in December 2015 as a way to extend the classic usage of the CMS.
It allows external websites and applications to interact with the CMS remotely via JSON objects.
WordPress core includes endpoints of data for much of the default data sets. For instance, posts and pages.
You can further customise the API depending on your projects’ requirements.
Technically, this can be done using existing plugins or by creating a custom plugin.
A purpose-built headless WordPress plugin could bring the following to your API:
- Custom post type data.
- Custom taxonomy data.
- Custom field/meta data within your post objects.
- Bespoke object structures for each post type.
- Firing of other WordPress functions upon requests to your API.
- Third-party service integrations.
From a development point of view, the REST API allows you to use WordPress in a more modern, resilient, scalable, secure and performant way.
From a content editor’s perspective, the REST API is a gateway to the content you have in your WordPress admin panel.
It allows your data to be consumed by any type of (and number of) channel(s).
What Front End Frameworks Can Be Used With Headless WordPress?
You can use a headless WordPress back end with any number of front ends strategies.
Commonly, this would be JavaScript based. So frameworks like:
- React
- React Native (for native mobile apps)
- Preact
- Vue.js
- Angular
Or static site generators like:
These are all viable presentation layer options for a headless WordPress website.
If you’re not sold on one of the popular JavaScript frameworks, you could go even simpler:
- Bring in your data from WordPress with vanilla JavaScript fetch.
- Display this data with HTML markup.
- Style with CSS.
Why Do I Need Headless WordPress?
There are many benefits to going headless WordPress for businesses, developers, website owners and end-users.
These include:
Separation Of Concerns
As touched on earlier in this article, it can be a good idea to separate the back and front ends of your web project.
This carries forward specifically into WordPress.
Having your WordPress back end on one server, optimised for server-side tasks and your front end hosted on a separate CDN can help to secure your website and increase performance.
Two important areas of interest for all web projects.
Security
Due to the sheer amount of WordPress websites on the web, they are often targeted by hackers.
Using headless WordPress increases security two-fold.
Firstly, you won’t be using many (if any) public plugins. Or a theme. This is where most vulnerabilities in WordPress websites usually arise.
Secondly (and perhaps most importantly), because you’re using WordPress in a decoupled fashion, hosted separately away from your public-facing front end, it’s difficult to tell that you’re using WordPress at all.
Many attacks are initiated by automated bots. These bots scan thousands of websites to determine the type of software they’re using.
If it’s tricky to tell that your site is running WordPress, it’s much harder to exploit it in that fashion.
Performance
It can be a difficult task to make a traditional WordPress website fast.
A bloated premium theme and lots of plugins mean this is going to be a struggle.
When using WordPress headless with a statically generated front end, performance comes with the territory.
The Google PageSpeed Insights tool tests your site against many parameters, including:
- First contentful paint
- First meaningful paint
- Speed index
- First CPU idle
- Time to interactive
- Max potential first input delay
Most sites using the headless approach will score well here.
Using my own website as an example. With WordPress for blog post management and Gatsby on the front end, my pages load super fast. Typically under a second.
Using this methodology can also bring your website into the PWA (Progressive Web App) bracket.
The reason being, it’s possible to add features like making your website installable for viewing offline or when your connection is slow.
Performance is a key metric of a websites’ success.
Google uses page speed as a ranking factor for both desktop and mobile searches.
And, people expect your site to be fast. On all devices.
If your users can’t look something up quickly or go through a checkout process in a reasonable time, they’ll often abandon their efforts.
A Google study discovered that 53% of mobile site visitors leave a page that takes longer than three seconds to load.
In business terms, this could mean missed leads and sales. Directly due to lacking performance.
Making your website fast benefits everyone.
Scalability
Lots of enterprise-scale projects are moving towards headless architecture because of its scalability.
Headless WordPress can help your website scale easier than is standard.
As your back end and front end is separated you can scale each in order of priority as you grow. This can be beneficial if you’re looking for a quick time to market.
For example, you might want to create an app in the future. But right this minute, your focus is to get your website live.
In this instance, headless WordPress would be a good choice because you can create a REST API that first serves data to your website, and then to your app when the time comes.
Due to the statelessness of the REST API, cloud scalability also comes into play.
This is an advantage because if your site goes viral all of a sudden, with many users at once, your CDN can compensate.
Modern Build Tools And Processes
Having a headless WordPress website means you can utilise the most modern web development technologies.
Using WordPress headlessly brings it into JAMstack territory.
JAM (JavaScript, API and Markup) stack is “a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”.
Many see this methodology as the future of web development due to its associated advantages.
Headless WordPress inherits these benefits. It also encourages the use of modern tools and processes for things like:
- Version control.
- Automated testing.
- Code formatting/linting.
- CDN (content delivery network) usage.
- Deployment/continuous integration.
Multichannel Publishing
Imagine publishing a piece of content once and having it go live across all your websites and apps at once.
Headless WordPress can make this possible.
This is especially valuable to organisations that have a lot of quickly updating data. Like news agencies.
A headless WordPress install could be the data source for just about anything.
To illustrate, you could create an Amazon Alexa skill that reads out data from your API.
Or, you might want to push updates out to someone else’s website.
Multichannel publishing saves you time and improves content consistency across your network.
Get Ahead Of Your Competition
To finish up on the topic of why you need headless WordPress:
You’ll get ahead of the game against your competition.
Without being tied to monolithic architecture, you can use headless WordPress to increase your sites security, performance and scalability to move past your peers.
Making use of this modern approach will help you stand out in the marketplace.
All the aforementioned advantages of using headless WordPress can result in a direct boost to your business objectives.
Is Headless WordPress The Right Approach For My Project?
Are you set on using WordPress as your CMS?
Are you looking to use a modern front end framework like React or a static site generator like Gatsby?
If so, it’s the perfect avenue to explore.
Are you looking to add lots of functionality via readily available plugins?
Then you could be met with a few stumbling blocks.
If you’re unsure about this decision, you could hire a headless WordPress specialist to discuss your specific requirements in detail.
Wrap Up
Choosing an architecture and methodology for your WordPress project is important to get right from the off.
With massive performance benefits, in particular, you should definitely consider headless WordPress for your next project.
I firmly believe that headless has a big part to play in the future of WordPress for everyone.