WordPress is powerful — currently, over 40% of all websites use it to some extent, and most of these use the standard WordPress setup you’re likely familiar with. If you’re not, here’s our guide to WordPress websites.

But, even WordPress has its limitations. Though it offers a lot of flexibility by way of themes and plugins, website owners are limited to these tools if they want to customize their site. What if, for example, you wanted to design the visuals of your website outside the constraints of a theme?

If that sounds like you, consider a headless WordPress setup. With headless WordPress, your website’s content database is decoupled from your website’s display, providing more flexibility, easier multi-channel distribution, and faster performance.

In this guide, I’ll introduce you to the concept of headless WordPress: what it means for a CMS to be headless, the benefits of a headless CMS configuration, and why (or why not) you should change how your site is set up.

Grow Your Business With HubSpot's Tools for WordPress Websites

And yes, I know “headless” sounds morbid, but I promise it’s just an analogy. Let’s dive in.

What is headless WordPress?

To understand what makes a headless WordPress configuration different from traditional WordPress, we first need to talk about headless content management systems in general. For a more detailed explanation, you can read our intro guide to headless CMSs. For now, though, here’s what you need to know:

Most CMSs you’ve likely worked with are meant to handle both the front end of the website — the interface that visitors interact with, such as a web page — and the back end of the website — the files stored on servers, including scripts and a content database. The back end is where you create, organize, and manage the content before publishing it to the front end.

We can refer to this setup as a “coupled” CMS architecture, since the front-end editing tools and back-end management tools are paired in the same system. A coupled architecture lets website owners manage their entire website from inside one intuitive program (such as WordPress), making this setup popular with beginners.

A headless CMS works differently: It removes the front-end tools, leaving only the back-end content management tools. Essentially, you’re separating the “head” (the front end) of your website from the rest of its “body” (the back end).

Headless CMSs still allow you to upload, create, edit, and organize content. But, instead of pushing content directly to the front end, a headless CMS makes its resources available to a separate front-end solution through a REST API. It doesn’t concern itself at all with how the content looks to visitors.

wordpress headless cms vs traditional cms diagram

Here’s where headless WordPress comes in: The WordPress as you and I (and most people) know it uses a coupled architecture. You manage your website’s assets in the dashboard and control its appearance through themes and plugins.

But, by eliminating themes and instead sharing content via the WordPress REST API, any WordPress installation can be made headless. In a headless WordPress configuration, the content management tools are still available, but front-end features like themes and the block editor are not. Another front-end application handles how your WordPress website actually looks.

A headless setup isn’t the best solution for all — or even most — WordPress users. However, there are times when this configuration is ideal. Next, let’s discuss why a business might want to try headless WordPress.

Benefits of Headless WordPress

Why would anyone forgo the convenience of traditional WordPress for headless? In some cases, a headless setup may be better suited for a business website than a typical WordPress installation. Here are some key reasons why:

Front-End Flexibility

WordPress allows you to do a lot with the front end, with its huge selection of customizable themes and plugins. Still, not everyone may want to control their website front end this way — you’re still constrained to WordPress.

With a headless CMS, you can keep the “content management” part of the WordPress CMS that you know and love, and outsource your front end to virtually any other software you want, as long as that software can make requests to the WordPress API.

This is especially beneficial for front-end developers who want to work inside another application, use different coding languages than what WordPress uses, and/or add a front-end framework like React to make their jobs easier.

WordPress is built mostly of PHP and JavaScript, but headless WordPress lets developers retrieve site content, package it however they want without WordPress’s limitations, and stick it on a web page for your audience to see. Meanwhile, your content team can continue to work in WordPress without worrying about what tools these developers are using.

Additionally, what if you need to change your front-end system? Or, what if you want to redesign your site, or build it back up from scratch? Headless WordPress arguably makes these all easier, since your content is decoupled from the front-end. You can alter your website’s face as much as you want, but the content remains unchanged.

Multichannel Publishing

When starting with WordPress, you’ll be using it for your standard desktop and mobile websites, and that might be all you need it for. However, some scaling businesses may want to send their content to additional interfaces, like mobile apps, social media sites, smart devices, and virtual assistants like Alexa.

If this is the case, a headless CMS can serve as a centralized source for multiple publishing channels. When you make a change to some content in the CMS, this change is automatically reflected across every device connected to it.

Imagine trying to do this with a traditional CMS. You’d need to reformat your content for every interface — that’s simply not scalable.

Improved Performance

Traditional WordPress renders web pages dynamically. This means that, instead of storing static HTML pages to send to users when requested, the hosting server constructs an HTML page each time a request comes in. In simple terms, WordPress uses PHP to fetch all the necessary resources from the database, assemble them into a page, then send this page to a user.

As you might guess, this process isn’t always the fastest, and slow page loads can hurt the user experience and reduce conversions. By leaving the front-end delivery up to a separate application, you can potentially speed up your site. For example, you can fetch content from WordPress and assemble it into static HTML pages, then ship the static pages to clients upon request.

While there are many simpler things you can do to improve performance in a standard WordPress installation, faster speeds are another compelling reason why some businesses may opt for headless WordPress.

Improved Security

Again, there are things you can do to protect your WordPress site without going headless, but the security benefit is one more bonus of a headless setup.

If your front-end is separated from your content, it will be much more difficult to locate and access your content directly through your website, as long as your back-end server is sufficiently hidden.

Drawbacks of Headless WordPress

Before you start messing with your WordPress back end in an attempt to go headless, keep in mind that this solution isn’t ideal for the majority of WordPress users, and the benefits may outweigh the drawbacks. Namely, headless WordPress requires a lot of effort, and skilled effort at that.

A big draw of the WordPress CMS is the code-free experience. With headless WordPress, that promise pretty much goes out the window. You’ll need to either already be very comfortable with front-end development languages like JavaScript, or hire someone who is. For example, headless WordPress gets rid of the visual editor, so there’s no more dragging-and-dropping to build your interface.

On top of the necessary skills, running a headless WordPress website is a significant time investment — you now have two systems to look after instead of just one. If you’re not publishing content at a high rate, then the time, cost, and energy needed to run such a website aren’t worth the switch. That’s why you tend to see headless configurations adopted more often by larger companies with enough resources to handle the job and enough content and channels to justify the investment.

Setting up WordPress as a Headless CMS

If you’ve weighed the pros and cons and decided it’s worth pursuing, you can find many tutorials online that explain in-depth and step-by-step how to implement a headless configuration in your copy of WordPress. Your method will vary based on your preferred languages, frameworks, and general approach.

But, as mentioned, you should be comfortable with front-end languages (including JavaScript) regardless of your method. No matter how you slice it, you’ll be coding the front-end yourself or paying someone to do it for you.

So, while headless WordPress is not a traditional WordPress killer, it’s a feasible option for businesses large enough to support the cost of implementation and maintenance. It might seem like more work at first to get started, but a headless approach could save you tons of time down the road and grant you more front-end flexibility than WordPress ever could out-of-the-box.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Nov 23, 2021 7:00:00 AM, updated November 23 2021

Topics:

WordPress Website