If you’re like most organisations, you’re always looking for ways to improve your website, provide a better customer experience and generate more revenue. One way to do this could be using WordPress as part of a headless setup.
Headless WordPress is the idea of utilising the traditional WordPress content management system (CMS) and adopting a different front-end for the customer-facing website. This can provide several benefits such as enhanced site speed and stronger security. There are also several potential drawbacks if not built correctly such as a clunky back-end, longer development cycles, and cost.
In this article, we’ll explore headless WordPress (otherwise known as ‘decoupled WordPress’) in-depth and see why it’s becoming so popular among enterprise organisations. We’ll also cover some of the basics on how to go about setting up a headless site as well as some potential drawbacks if not built correctly.
Contents
- What actually is headless?
- Is WordPress a good platform for headless?
- What are the benefits of building a headless website (using WordPress)?
- What should you look out for when building a headless website (using WordPress)?
- What does it look like to build a headless website using WordPress?
- Who can help with developing a headless WordPress website?
A quick note before we get started
This article is the result of over 6 months of research and development into headless WordPress and progressive technologies, as well as our work directly with clients.
If you’d like to find out more about our R&D, you can read more here: Research & Development at Illustrate Digital.
If you’d like to delve into our headless service offering, you can find out more here: Headless Development for WordPress
What actually is headless?
If you’re like most people, you probably don’t think about content management systems (CMSs) all that often. But if you’re in charge of creating or managing content for a website, then you know just how important they are.
A CMS is basically a platform that helps you store and present your website’s content. It makes it easy to add new pages, update old ones, and manage your site’s overall look and feel.
There are all sorts of different CMS out there, the most popular options are the traditional ones – platforms like WordPress and Drupal. These platforms were designed to store and present a bunch of content and media, things like text, images and video.
As the digital age progresses, enterprise brands are finding that they need to change with the times. The standard requirements for content have shifted, and brands now need to be able to serve their content beyond their website to multiple different platforms, or in different ways. This includes apps, conversational tools, and more, as well as expanding the website experience itself beyond static images and text.
So what is the headless approach?
Put simply, a headless CMS is a type of back-end content management system where the content is stored in a different place, using a different technology, than where it’s shown. The content is sent to different devices using APIs in a format that works well for the range of apps or devices.
A simple example of this is a bank that uses the same content displayed on their banking app’s help section as they display on the product FAQ section of their website. The content is the same, provided by the same CMS, it’s just displayed in different places using different technologies.
Is WordPress a good platform for headless?
Out of the box WordPress isn’t set up to operate as a headless solution, but that doesn’t mean it isn’t a fantastic option as part of a headless setup. In fact, it’s probably the best. But we won’t want you to think that’s an unfounded claim written by the WordPress experts, so let’s explore why!
WordPress is a platform built for content
When WordPress was first released as an open-source project in 2003 it was completely centred around the idea of allowing everyday people to create and publish their own content. To this day it remains arguably the best platform in the world for managing content in a simple and effective way and, like a good wine, it only gets better with age!
When it comes to headless, WordPress manages and organises content in a way that most marketers and site owners have become accustomed to, making it the perfect focal point for distributing content across multiple platforms.
WordPress can easily be decoupled
Because it’s continually developed by a worldwide community of incredible volunteers and contributing organisations, WordPress and its codebase were built like lego. You can take it apart, develop as required, and then put it back together again in a working solution.
This means it’s ready and raring to be used in a headless context (there are more complex requirements to really make this work, but we’ll cover those shortly).
The process of ‘decoupling’ means removing the front-end and back-end elements of a website to be used independently, something that’s easily achievable in WordPress.
WordPress has a fantastic API
One of the most fundamental criteria for any platform, in order to be used in a headless capacity, is its ability to easily pump its content through to a different application or technology.
The REST API in WordPress, along with the many useful coding hooks, allows it to be easily integrated with various front-end options through which to serve its content.
Even though the WordPress API is fantastic, it’s worth considering introducing a powerful API query tool such as GraphQL, especially if you’re looking to really hone the performance of your site.
What are the benefits of building a headless website (using WordPress)?
We’ve already explored why WordPress is a great option for those looking to find a content management system that’s perfect for headless. But what are the benefits of using headless for your brand’s main website?
There are several important factors that can provide real gains to enterprise organisations when thinking about headless WordPress. Let’s explore them here.
Headless can significantly increase security
When it comes to website security, there’s no such thing as being too careful. Hackers are always looking for new ways to exploit vulnerabilities, and even the most well-protected site can be at risk.
One way to significantly reduce the chances of a security breach is to take a headless approach. Headless websites are not tied to one specific server or domain, which makes them much more difficult for hackers to target.
In decoupling the front-end and back-end of your site, hackers are less able to take advantage of vulnerabilities in the frontend code. Since the content is delivered to users via a secure API, it’s much trickier to gain access to the website’s codebase and this means a headless site is much more difficult to compromise.
There’s an added benefit here, too… even if the front-end part of your website is successfully taken offline, headless makes it possible to deploy all of your valuable content to a new copy of the front-end, in a different location, really quickly. Restore your backup, change the server settings and you’re back online without losing any of your content or sensitive user data.
Better performance is often a key benefit of headless
A fast, responsive website or app is essential for keeping users happy and engaged. It’s also a big metric for Google and other search engines in their decision to display your content to searchers!
One of the key benefits of headless is performance. By decoupling the front-end and back-end of a website or application, headless architectures can offer increased performance and speed, as well as enhanced scalability.
Without having to render everything from a single server, a headless website can load much faster. This is especially beneficial for users on mobile devices or with slow internet connections.
Centrally manage and deploy content and media using headless
Taking a headless approach to your online presence can help to simplify content management and deployment across different apps and websites.
By decoupling the content layer (CMS) from the presentation layer (front-end), it becomes easier to make changes in one place and have those changes shared instantly across all of the connected applications.
In addition, a headless website can provide a single source of truth for content, making it easier to ensure consistency and accuracy across all of your digital properties. Ultimately, operating a headless website can help you to save time and effort when it comes to managing your web content.
Headless makes room for scalability and innovation
The ability to access greater levels of scalability and flexibility is a great benefit of headless when compared with traditional website architectures.
Headless means you’re not tied down to a single front-end development framework, or a single server setup. This means you can pull the same, valuable content into an entirely different design, app, or even a completely different server setup.
If you’re operating a large-scale site that needs to be able to handle large amounts of traffic or rapidly changing content, a headless website will be ready to scale with your organisation and the needs of its users.
Not many brands are taking advantage of headless
The job of many marketing and IT departments is to understand how to get ahead and stay ahead of the competition in their sector, as well as to deliver the best experience to their customers.
Headless provides so many brilliant opportunities for brands to take advantage of, many of them we’ve named above such as speed, security, and overall experience.
According to the technology profiler BuiltWith, as of 2022 headless accounts for only 0.3% of the world’s top 1 million websites. Whilst the actual number is likely to be higher due to headless being less detectable, these stats still show that there isn’t a great number of organisations yet picking up on the benefits of headless. This means there’s a real and immediate opportunity for the brands who are willing and able to make headless work for them.
In years gone by, headless was something little understood by agencies and brands alike, but this is no longer the case. With heavy research and experience from agencies like Illustrate Digital, there’s a safe and innovative route to a better digital experience for the brands willing to be early adopters of headless.
What should you look out for when building a headless website (using WordPress)?
Building a headless site isn’t a decision to be taken lightly. In fact, it’s something that is best left to large and enterprise organisations, or brands that are particularly progressive and innovative. And this is for good reason. We’ll outline a few of the reasons worth thinking about here.
Headless is easy to mess up in the wrong hands
We’ve witnessed our fair share of headless WordPress projects that have gone wrong and consulted with companies on how to bring the situation back around. The majority of the time, a messy headless project has been caused by two things: a lack of fundamental knowledge of the WordPress platform and a lack of sensible, realistic planning.
It’s important to recognise that decoupled WordPress is very different from the ‘traditional’ way of developing with WordPress. Headless will change the workflow, mindsets, and even the skillsets of a development team.
And without careful planning, one small piece of the puzzle out of place can make the world of difference. With more potential technologies at play, it’s important to ensure they work in harmony with each other and not against each other.
Be aware… it’s absolutely possible to create a slow, low-performant website when building headless.
Over-engineering with headless
We’ve seen this time and time again and, to be fair to those who’ve done it, it can be easy to do. Remembering that headless isn’t the right solution for everyone is the first key to avoiding over-engineering. Beyond this, it’s important to know exactly why you want headless, what it’s being designed to achieve, and then stick to the plan.
A headless WordPress site is very different from traditional WordPress. Be careful not to be over-ambitious with the number of plugins you’re looking to add, keep this to a minimum. Not least that plugins can have an impact on your website speed and be detrimental to your load times, but there’s also a time and money implication for each plugin that needs re-engineering for your decoupled WordPress setup.
There’s certainly power in taking an MVP approach to headless, starting with a first essential-only version and then building from there. Taking on a headless project is a big undertaking and focus will be critical.
Headless can be costly and time-consuming
You’ll know by now that operating a headless website offers some clear benefits in terms of speed, performance, scalability and security, but these benefits do come at a cost. There are a few reasons that a headless project can be more costly and time-consuming than a traditional website setup.
First, you may need to purchase and configure a separate content management system (CMS) before thinking about your front-end, look and feel, and so on. This can be an expensive proposition if you’re licensing a premium CMS like Sitecore or Adobe Experience Manager. However, if you’re heading down the route of WordPress as an enterprise CMS then of course the obvious benefit is the lack of ongoing licence fees!
Second, you need to develop custom code to query and display your content in the front-end application. This adds complexity and often requires additional development resources.
Third, you need to manage and deploy two separate codebases (one for the CMS and one for the front-end application). Again, there are obvious benefits to this like security and scalability, though it can add some decent overhead in terms of coordination and release management.
All things considered, it’s no wonder that headless projects often come with a higher price tag. If you’re considering going headless, be sure to factor in all of the above costs before making the final decision.
Headless is (being honest) the wrong choice for most websites
Whilst the headless approach may have grown in popularity in recent years, it certainly isn’t the answer to every requirement in the world of web and digital experience. In fact, we’d go as far as to say that it’s potentially the wrong choice for the majority of website projects out there.
Some of the time, headless becomes a passion or vanity project for a developer or development team who fancy “having a go” and expanding their horizons. This is an obvious scenario when headless isn’t the right fit.
For brands that need ultimate security, require brilliant scalability, need to serve content to multiple places, or simply have the passion to be using and exploring the latest tech, headless is absolutely the right choice and should be a strong consideration.
You’ll be missing out on WordPress’ plug-and-play approach
Headless WordPress is absolutely not like traditional WordPress, especially where plugins are concerned. Since your headless front-end is ‘integrated’ with your back-end, the majority of the time installing a WordPress plugin is going to do absolutely nothing, if not break your website.
The plug-and-play approach that most people have become accustomed to with WordPress simply isn’t possible when building a headless site. Be aware that each plugin will need to be customised to work with your choice of setup.
Fear not though, at Illustrate Digital we’ve already created a library of plugins that we’ve made compatible with a headless WordPress setup. If you’re interested, reach out and speak to us about it!
What does it look like to build a headless website using WordPress?
Building a website using headless from a developer’s perspective can be costly and time-consuming, but it provides increased performance and scalability. We know by now that, when done correctly, a headless website can provide a single source of truth for content and make it easier to manage changes across different digital properties. Let’s explore what it looks like to go about creating a headless website with WordPress.
Choosing a front-end framework
This will be the biggest and possibly also the hardest decision for any developer thinking about building a headless website. With so many options out there including React, Next, Vue, Gatsby, and a heap of others, it’s important to choose the front-end framework that provides the best fit for the organisation and the team of developers working on it.
Without going into really fine detail, here are the main things worth thinking about when choosing a front-end framework for headless:
- What is your team of developers already familiar with?
- What is the knowledge gap between what your developers already know and what they’ll need to know?
- How long will it take to upskill developers for the framework?
- What does the market look like for developers who specialise in your chosen framework, are they readily available, expensive, etc?
- How well supported is the framework in terms of documentation, a global community, and so on?
Above everything else, engage your development team in the decision-making process. There’s nothing worse than being told to work with something you don’t believe in and it’s always more productive to have a highly engaged group of devs!
Choosing your integration method
A headless backend takes care of content management tasks like publishing new posts or pages, moderating comments etc. When it comes to passing this content through to the front-end you’ll need to think about the best way to integrate and publish it.
There are several different ways to integrate and your choice depends on your requirements. Here are a few options to consider:
- GraphQL – this is a query language for your API and makes integrating faster. It’s well supported and has become the most popular option for integrating WordPress with a headless front-end. This is largely because it boasts higher performance than some alternative options.
- Hosted, e.g. WP Engine’s Atlas platform – taking advantage of a platform like Atlas takes away some of the manual work in creating your own integration and is mostly ready out of the box. This will also allow you to use most, if not all, front-end frameworks for your headless site.
- Hosted, e.g. Gatsby Cloud – if you’re considering using Gatsby as your front-end framework, then Gatsby Cloud may be a decent option. Similar to Atlas, Gatsby have created an already-integrated solution for headless using WordPress. The big downside here is that it’s designed to work with a Gatsby front-end only, so no other front-end frameworks can be used with this solution.
- Developing with the WordPress REST API – developing your own solution is certainly the most difficult of these options, however it’s the one that’ll give you the greatest control and flexibility. There’s an element of reinventing the wheel here, but if you’re using a little-known front-end or have some really unique functions then this may be the best option for you.
Choosing the right hosting infrastructure
By now you’ll have gotten to grips with the idea that a headless approach is more complex than a straightforward WordPress setup. This also means it’s going to take more effort and thought around how and where you host the different aspects of your headless infrastructure.
Before we share some of the options available to you, it’s worth pointing out that one of the brilliant things about headless is your ability to choose when it comes to hosting. Put simply, not everything needs to be in the same place and it may be the case that your back-end and front-end are better optimised in different locations, or indeed all-in-one.
Here are some of the ways you can think about hosting WordPress as part of a headless setup:
- WP Engine’s Atlas platform – this is our favourite and recommended option for one main reason, simplicity. WP Engine has put a lot of effort into building a highly optimised, all-in-one solution for your managed headless infrastructure. With your choice of front-end frameworks, a ready-to-go API, and some other really helpful features it’s a seriously strong contender for your headless hosting with WordPress.
- Managed WordPress and unmanaged front-end – at the very least, when using WordPress, we would advocate using a managed hosting platform for the CMS aspect of your headless site. There are plenty of platforms to choose from such as WordPress VIP, WP Engine, Pagely, Kinsta, and so on. With many of these options, you’ll need to think about where to place your front-end(s) but you’ll have a great deal of flexibility here. As a suggestion, think about places such as Amazon Web Services (AWS), Google Cloud Platform (GCP), or DigitalOcean.
- Unmanaged front-end and back-end – this isn’t the approach we’d advocate but it’s certainly an option. Choosing unmanaged for both your front-end and back-end is essentially choosing ‘beast mode’. You’ll get a lot of fine-grained control over all aspects of your platform, but you’re largely on your own when it comes to optimisation, performance and security.
Choosing and reengineering your WordPress plugins
One of the most important things to recognise when using WordPress as part of your headless architecture is that all of your normal plugin choices won’t just work out of the box!
Here’s some advice on what you need to think about when it comes to plugins and headless WordPress:
- Be picky about the plugins you’d like to use – you’re going to need to spend more time developing plugins for compatibility than you’d like to. For this reason, be as picky as possible about the plugins you’d like to use. Keep it to the basics, for example you could use an SEO plugin like Yoast, a form plugin such as Gravity Forms and something to help manage your blocks like Advanced Custom Fields.
- Consider your multiple front-ends (if required) – in a headless setup you’re not just installing a plugin to work with WordPress, it also needs to work with as many front-ends as you’re outputting to. This may require more work, so be sure to think about how the plugin will affect your website, app, web app, and so on.
- Use as few plugins as possible – similar to the first point, always use the lowest number of plugins possible as part of your WordPress setup. Why? Because you’re going to need to keep on top of updating, maintaining, and patching these plugins as part of your headless site. Don’t create more work for yourself than is needed and don’t put too much reliance on a third party, especially for vital functionality.
- Research before developing – what’s great to know is that a bunch of developers have gone before you in creating solutions to headless WordPress challenges. Always Google the plugin you’d like to use, alongside the word ‘headless’ to see if anyone has solved the challenge and open-sourced their code. This could save a heap of time and means you won’t need to reinvent the wheel.
Who can help with developing a headless WordPress website?
It’s always going to be a great idea to get an experienced WordPress agency like Illustrate Digital involved as part of your headless WordPress project. That doesn’t mean that an agency needs to do it all for you, either!
If you’re thinking about embarking on a headless WordPress project then there are two really useful ways that you can get help with planning, designing and developing your website, these are…
Consulting with the WordPress experts
Don’t feel like you need to embark on this strange and wonderful project all on your own. With a team of experts at your disposal, Illustrate Digital can help to consult and coach you through the process of building a headless website.
Encouraging your team and providing knowledge transfer are the keys to helping you to succeed with a complex WordPress infrastructure.
Hiring a WordPress agency to work on your project
If you don’t have in-house developers who are geared up to complete a headless WordPress project for themselves, then you’ll certainly need an agency to deliver and manage your website.
From planning and understanding your end goals, to designing and developing your headless solution, the experienced implementation team at Illustrate Digital is here to help.
