Using WordPress as a Headless CMS

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

--ADVERTISEMENT--

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.

Sponsors