How to Set Up WordPress As A Headless CMS

Headless WordPress is a website or omnichannel app that uses WordPress content, delivered by the REST API or GraphQL to frontends developed outside WordPress (e.g., Next.js, Nuxt.js, React, Vue). Before you start building a frontend site that connects to your WordPress backend for content, you need to configure your WordPress site with some recommended plugins.

Installing Plugins

WPGraphQL

WPGraphQL is a plugin for WordPress that extends the WordPress API to support GraphQL requests. This plugin is highly recommended, as it makes it much easier to work with WordPress content. In most cases, you can use the default configuration for WPGraphQL, so installing the plugin is enough to get you started.

Advanced Custom Fields

Advanced Custom Fields (ACF) lets you take full control of your WordPress edit screens and custom field data. It supports a ton of different field types that you can attach to content types in WordPress. Assuming you are using WPGraphQL, you should also install the companion WPGraphQL For Advanced Custom Fields plugin. This companion plugin will let you extend the WPGraphQL API with ACF information. There is no configuration necessary before you can start working with ACF.

Faust.js

Faust.js provides a set of tools to make building frontend applications with WordPress as the headless CMS a pleasant experience for developers and publishers. The plugin helps with post previewing, authentication, fetching data, and more. It is used in conjunction with the Faust.js framework to build out the frontend of your headless site.

The Faust.js plugin requires some customization when you first install it. You can find the settings for the plugin in Settings → Faust. You will want to configure your Frontend site URL to be your frontend website’s root URL. For example, if you are running a Node site on your local machine on port 3000, your Front-end site URL should be “http://localhost:3000”. You will need to connect it with the frontend Faust.js app in a .env.local file.

After you install the plugins listed above, your WordPress site will be ready for headless development. While there are certainly more plugins you can use; these are the base plugins we recommend based on what we commonly use to build headless WordPress sites!