How to use WordPress as a headless CMS

• Understanding Headless WordPress
• Why Go Headless?
• Setting Up Your WordPress Backend
• Connecting to the Frontend
• Using ACF with Your Headless WordPress

WordPress, originally known for its blog hosting, has grown into a comprehensive Content Management System (CMS). Today, it is widely used to create and manage all types of websites, from personal blogs to corporate websites. One of the exciting developments in WordPress is its use as a headless CMS. This article will guide you on how to use WordPress as a headless CMS.

¶Understanding Headless WordPress

In a traditional WordPress setup, WordPress handles both the backend and frontend of your website. This means that WordPress is responsible for storing data and displaying that data in a web browser.

In web development, anything "headless" simply means to have no interface. By it's very nature an API is headless, as it just provides a way for data to pass from one system to another.

When we talk about "headless" WordPress, we're talking about decoupling these two sides. WordPress is used only as a backend service to store and manage data, while the data's display is handled by another technology (usually a JavaScript framework like React, Vue, or Angular).

¶Why Go Headless?

The primary advantage of using a headless CMS is flexibility. It allows you to choose any frontend technology to display your content while still benefiting from the powerful content management tools that WordPress offers.

Aside from adding flexibility when creating the website it also makes it easy to plugin multiple frontends. For example, you may have an app, or need to feed content to an in-person display at an expo.

¶Setting Up Your WordPress Backend

1. Install WordPress: This one is obvious. If you haven't already, install WordPress on your server. You can download it from the official WordPress website.

2. Set up the WordPress REST API: WordPress comes with a REST API out of the box. This API will allow your frontend to interact with WordPress. You can check the REST API by appending /wp-json/ to your WordPress site URL, like so: http://yourwebsite.com/wp-json/.

3. Create Content: Go ahead and create some content on your WordPress backend. This could be posts, pages, or any custom post types.

¶Connecting to the Frontend

Now that we have a WordPress backend set up, we need to connect it to our frontend. In this example, we'll use JavaScript to fetch data from the WordPress REST API.

In the examples in this article we will be using vanilla JavaScript, however there are many frontend frameworks that include plugins to handle this for you. Two great examples being Gatsby and Gridsome.

fetch('http://yourwebsite.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(posts => console.log(posts));

In this example, we're fetching all posts from the WordPress API and logging them to the console. You'd replace this with your code to display the posts in your frontend application.

¶Using ACF with Your Headless WordPress

Advanced Custom Fields (ACF) is a popular WordPress plugin that lets you add custom fields to your WordPress content. We're big fans of ACF so decided to include info on how to plug it in here. If you're using ACF with your headless WordPress, you can access your custom fields in the REST API.

First, you need to install and activate the ACF to REST API plugin. Once activated, your ACF fields will be accessible in the REST API.

Here's an example of how you can fetch a post with ACF fields:

fetch('http://yourwebsite.com/wp-json/acf/v3/posts')
  .then(response => response.json())
  .then(posts => console.log(posts));

Now, along with the default post data, you should also see your custom fields in the logged output.