Using WordPress as a Headless CMS

Sufyan bin Uzayr
Sufyan bin Uzayr
Share

Content management systems (CMSs) are very useful, allowing you to create, edit and manage your content as needed.

But as powerful as they might be, traditional CMSs such as WordPress don’t meet everyone’s requirements. In some cases, a higher amount of flexibility is desired. You may, for example, want to integrate your CMS with a different coding methodology and not use the front end so often. In such cases, WordPress may still be the answer, since we can change the way we use it. We can use it as what’s called a headless CMS.

In this article, we’ll be discussing how to use WordPress as a headless CMS. But before getting into that, let’s first fully clarify what a headless CMS is and what it can do for us.

A Headless CMS Defined

In the simplest of terms, a headless CMS is one that has no front end. As such, it includes just the API and the back end that is required to store and manage content, organize data and handle the workflow. There’s no front end display of the said content. Naturally, this means any front-end templates tend to become unnecessary in a headless CMS.

Thus, in stark comparison to a traditional CMS, a headless CMS offers just a content management back end and API. Since there’s an absence of a front end, a headless CMS can’t be used for content “publishing” in the true sense of the term. On the other hand, traditional CMSs such as WordPress often model their entire existence around the content publishing features. This is, by and large, the biggest difference between a headless CMS and a traditional one.

Now, naturally getting rid of the front end can pose a decent set of challenges for the everyday user. The biggest drawback is that in the absence of a true front end, there’s hardly any proper method to figure out how content or output may look when rendered.

Furthermore, in the absence of proper security measures, a headless CMS can pose some serious security issues. This is because, on the back end, it’s necessary to ensure that different user roles have only the right amount of privileges in order to prevent unwanted access to sensitive data.

With that said, what are the major advantages associated with headless CMSs? More importantly, when should you consider using one?

Advantages of Headless CMSs

Perhaps the biggest and most obvious advantage associated with headless CMS architecture is the fact that it offers great flexibility and control to developers. You can control virtually every aspect of development, handle how data is managed, how content is stored in the back end and even decide on the best possible front-end solution for your needs.

With such flexibility, coupled with the fact that every headless CMS comes with its own API for managing calls to and from the back end, you can save a good deal of development time. It’s easier to reuse existing modules, push updates and bug fixes and perform other similar tasks when working with a headless CMS.

Additionally, it’s worth noting that applications and websites built atop a headless CMS architecture tend to be easier to scale. A high level of scalability is an obvious advantage. The back end is already separated from the front end, so the downtime for the end users is minimized.

Beyond that, a headless CMS is generally compatible with most platforms, as the front end in itself is missing and can be integrated as per the user’s needs. Since there’s no content publishing solution native to a headless CMS, chances of DDoS attacks are reduced as well.

Why You Might Use WordPress as a Headless CMS

We’ve seen the various advantages that headless CMSs bring to the table.

In general, a headless CMS is preferable in cases where a traditional CMS may not fit in, or be too restrictive in nature. Take, for example, the case of mobile development. You can easily use API calls in a headless CMS to deliver content to an iOS or Android platform. Similarly, you can make use of JavaScript frameworks in your apps and rely on headless CMS architecture for pushing content to various platforms.

Obviously, for smaller and simplified projects, a traditional CMS is still the way to go. However, for cases where you need greater control over the back end, and wish to employ API calls to push your content to various platforms, or even wish to integrate a custom front-end mechanism totally independent of the back end (or just do not wish to have a front-end solution at all), a headless CMS is an ideal fit.

In terms of using WordPress as a headless CMS, it already has REST API built in, which means we have the API part sorted. Furthermore, we can make use of the familiar WordPress back end to manage the content.

Obviously, this means with just a few basic steps, we can have our own headless CMS in the form of WordPress. Considering the fact that WordPress is highly popular, using it as a headless CMS also implies that our CMS can perform well on a varied range of hardware and software combinations and also be under regular maintenance and security updates.

While there are various headless CMS platforms and options out there, and many of them are really amazing in their own right, WordPress still has one very common aspect in its favor. It has been around for a good while now, and requires just a simple MySQL and PHP stack to run. You can cut down on overhead costs and cloud storage bills by making use of WordPress over other headless CMSs that may otherwise have a bulkier set of requirements.

Using WordPress as a Headless CMS

WordPress has three major parts:

  • the database, where the content is stored
  • the admin panel to manage the content (API)
  • the HTML view, or front end, to display the content.

Naturally, as a headless CMS, the last option is of little use to us. When using WordPress as a headless CMS, content is treated merely as data.

Step One: Setting up WordPress

It’s important that you use a fresh installation of WordPress. Considering the fact that there are various tutorials out there on how to install WordPress, and the official documentation too is rather detailed on this step, we will be skipping the installation details here.

Furthermore, most web hosting providers nowadays offer one-click install feature for WordPress. Just bear in mind: change the database and table prefixes from the default wp_ values to something else, and use strong passwords!

Step Two: the Blank Theme

Remember that we mentioned the front end has little role to play in a headless CMS? WordPress has a big ecosystem that’s famous for its amazing themes. But we don’t need any of that. With that said, though, WordPress does need a theme to run, even if the front end isn’t going to be used. A good idea, therefore, is to just use a blank theme.

When working on WordPress as a headless CMS, all that’s needed is to add an index.php file and a style.css file specifying the theme name, author details, etc. for WordPress to work with.

Your theme’s index.php file should redirect users to the static site’s home page, thereby ensuring that the back end is untouched and the front end is done away with. Here’s a sample JS redirect code that you can put in the index.php file (or you can choose to use any code snippet of your own):

<script type="text/javascript">
  window.location = 'http://homepage.com';
</script>

Once the blank theme is ready and uploaded to the themes directory, activate it in WordPress admin. That’s it, we’re one step closer to using WordPress as a headless CMS.

Step Three: Working with API Requests

Now, as a final step, we just need to make AJAX requests to consume the API calls. We’ve already placed a blank theme in place, so now we can make data requests in order to work with content the way we wish to.

There are various ways of doing so. The easiest is to probably use the Fetch API that can handle asynchronous data requests. You can learn more about the Fetch API here.

However, certain older web browsers still don’t play well with the Fetch API, so it’s a good idea to use a polyfill that can create the fetch API function in case the browser doesn’t natively support it.

Here’s what our code may look like:

<!DOCTYPE html>
<html>
<head>
  <title>Using WordPress as Headless CMS</title>
</head>
<body>
  <div id="posts-list"></div>

  <!-- polyfill -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js" charset="utf-8"></script>

  <script type="text/javascript">
    const pContain = document.getElementById('posts-list')
    fetch('http://localhost:8080/wp/wp-json/wp/v2/posts')
// response
      .then(r => r.json())
      .then(posts => {
        posts.map(post => {
          const pDiv = document.createElement('div')
          pDiv.innerHTML = post.title.rendered
          pContain.appendChild(pDiv)
        })
      })
  </script>
</body>
</html>

In the above code, we’re simply working the content via RESTful API calls.

Doing More with Headless WordPress

For most practical purposes, you may need to add additional content fields when working with WordPress as a headless CMS. In order to do that, using the popular Advanced Custom Fields (ACF) plugin is a good solution.

ACF, as any WordPress developer would tell you, lets you easily add custom fields to your content, which you can then call via and API. You can refer to the ACF documentation for plugin-specific guidelines.

However, note that when you’re calling custom fields via a RESTful API, you may need to employ the ACF to REST API plugin as well so as to properly structure the calls. This plugin can be used to expose ACF endpoints for use with the WordPress REST API.

A lesser-known and rarely used WordPress plugin also deserves a special mention here — WordPress Headless. This plugin lets you create a headless WordPress CMS within minutes. It removes the front end and ensures that post permalinks go to the editor, not the view (logged in users only). If you’re trying to quickly get started with development and wish to convert a WordPress installation into a headless CMS, WordPress Headless plugin can do just that without you having to set things up yourself. Obviously, the API calls and other development tasks will still need to be handled by you.

Conclusion

When using WordPress as a headless CMS, the general usage scenario involves cases in which you might need to work with content management, such as teams handling their own data in the back end, etc. Should you ever wish to display content on the front end as a dedicated page, or have search engines properly index your site’s content, you’ll have to re-convert WordPress back to a traditional CMS.

For all other headless-usage purposes, this particular model works rather efficiently and you can further tweak it by means of custom fields and other data structures so as to get the desired results.

Frequently Asked Questions (FAQs) about WordPress Headless CMS

What are the key benefits of using a WordPress Headless CMS?

The primary benefits of using a WordPress Headless CMS include increased flexibility, enhanced security, and improved performance. With a headless CMS, developers have the freedom to build the front-end of the website using any programming language, which allows for more customization and innovation. Additionally, since the front-end and back-end are decoupled, potential security threats are minimized. Lastly, a headless CMS can deliver content faster because it only needs to serve raw data, not complete web pages.

How does a WordPress Headless CMS improve website performance?

A WordPress Headless CMS improves website performance by serving only the necessary data to the user, reducing the load time. Traditional CMSs render the entire webpage, including design elements, which can slow down the site. However, a headless CMS only delivers the raw content, allowing the front-end to handle the rendering. This results in faster load times and a better user experience.

Is it difficult to transition from a traditional WordPress CMS to a Headless CMS?

The transition from a traditional WordPress CMS to a Headless CMS can be challenging, especially for those unfamiliar with modern development practices. It requires a good understanding of both front-end and back-end development, as well as knowledge of APIs. However, with the right resources and guidance, it’s certainly achievable.

Can I use WordPress plugins with a Headless CMS?

Yes, you can use WordPress plugins with a Headless CMS. However, not all plugins will work as expected because some rely on the WordPress front-end to function. It’s important to test each plugin thoroughly to ensure compatibility.

How does a Headless CMS enhance website security?

A Headless CMS enhances website security by separating the front-end from the back-end. This means that even if a hacker gains access to the front-end, they won’t be able to reach the back-end where the data is stored. Additionally, a headless CMS reduces the risk of security vulnerabilities associated with traditional CMSs, such as outdated plugins.

Is a Headless CMS SEO-friendly?

A Headless CMS can be SEO-friendly, but it requires additional configuration. Unlike traditional CMSs, which come with built-in SEO tools, a headless CMS only provides the content. Therefore, SEO elements like meta tags, structured data, and XML sitemaps need to be handled on the front-end.

Can a Headless CMS handle dynamic content?

Yes, a Headless CMS can handle dynamic content. It delivers content via APIs, which can be consumed and displayed by any device or platform. This makes it ideal for websites with dynamic content, such as e-commerce sites or news portals.

What skills do I need to manage a WordPress Headless CMS?

To manage a WordPress Headless CMS, you need a good understanding of front-end development languages like JavaScript, as well as knowledge of APIs. Familiarity with back-end development and database management can also be beneficial.

Can I use a Headless CMS for e-commerce websites?

Yes, a Headless CMS is a great choice for e-commerce websites. It allows for more customization, faster load times, and improved security. Plus, it can handle dynamic content and deliver it to any device or platform, which is crucial for e-commerce sites.

How does a Headless CMS affect website maintenance?

A Headless CMS can simplify website maintenance. Since the front-end and back-end are decoupled, developers can update or modify one without affecting the other. This reduces the risk of breaking the site and makes it easier to implement changes. However, it also requires a higher level of technical expertise to manage.