WordPress has been the go-to Content Management System (CMS) for developers and non-developers to quickly build and create stunning websites.

Using a microservice architecture, where the content management backend is separate from the frontend, allows maximum control of both the “ends.”  This separation addresses a key issue, one that headless content management systems, such as headless WordPress, aim to solve.

With a headless approach, businesses have more granular control over the content management backend. They’re also free to use any frontend library or framework of their choice, including React, Vue, Angular, etc.

This guide explores in detail headless WordPress, what it is all about, when and why you should consider using it. You also learn how to create a headless WordPress environment, building out the frontend with Vue.js, deploying the headless WordPress using Kinsta’s WordPress Hosting and the frontend with our free Static Site Hosting.

What Is Headless WordPress?

WordPress is a monolith application where the backend and the frontend parts are tightly wound together. The backend is where the management comes in, where you can create, edit, add, and delete content, including changing appearance configurations. In contrast, the frontend is responsible for displaying the content to the user.

Headless WordPress is the term used to describe decoupled WordPress. The backend (management) part is separate from the frontend part of the WordPress CMS. You can develop and manage the frontend as a standalone application with any frontend framework of your choice.

Pros and Cons of Headless WordPress

Headless WordPress offers a host of advantages and drawbacks, each impacting your project in distinct ways. Let’s explore the pros and cons to give you a better understanding of the concept.

The Pros

  1. Super-Fast Performance

    In this era of super-fast performing applications, your website should not take more than a few seconds to load and avoid losing visitors. Since the frontend is separated from WordPress and can be developed with high-performance and scalability in mind using modern frontend tools, employing a headless WordPress approach is of great benefit to the overall user experience of your website.

  2. Granular Control

    Opting for headless architecture gives you more control over your design layout, content presentation, and how users interact with the frontend of your application. It also allows your backend content to be secured and accessed from a central location.

  3. Increased Scalability

    Scaling WordPress can be complicated sometimes because you don’t have complete control of all the components and codes that powers WordPress, mainly if you aren’t a developer. But with the decoupling of WordPress, it is effortless to scale each part in isolation, and you can easily detect which part needs scaling.

  4. Tighter Security

    We can not stress the security benefits of headless WordPress enough since decoupled WordPress has high-security benefits against hackers and DDoS attacks. The headless WordPress approach makes it difficult for hackers to access your sensitive backend data since it is separate from your frontend, the user-facing website.

  5. Lightweight Design

    You will have more control over the structure and layout of your frontend design. In addition, you can work on the frontend with more freedom and customized design; thanks to the REST API calls, you’ll be able to take advantage of modern web tools and deploy them on the frontend.

  6. Multi-Channel Content Publishing

    Since headless WordPress uses an API-based system to communicate your content to the frontend, you can display your content anywhere and on any platform, including desktop, website, mobile apps, and touch screen kiosk. It is also possible to make full use of Augmented Reality, Virtual Reality, and Internet of Things devices to display and present your content coming from the API-based system.

The Cons

We’ll explore the cons of headless in more depth as we go, but its main drawbacks are:

  1. Separating the backend and the frontend gives you an extra load when managing different website instances.
  2. It can be costly to implement since it needs additional members on your team and extra capital for running different instances.
  3. Making your content available on different platforms can cause an inconsistent experience for your users if the content is not presented consistently across all platforms.

When Headless WordPress Might Not Be the Best Option

Since headless WordPress is an incredible innovation with great benefits, there are some things you use to keep in mind when deciding whether or not you should go with it.

  1. Headless WordPress can be expensive to maintain. You will maintain two different instances of one website from infrastructure to multiple developers. However, leveraging our free Static Site Hosting service, if you opt for a Node.js based SSG like Gatsby, Next.js, Nuxt, etc., your focus narrows down to hosting WordPress alone.
  2. Headless WordPress does not support all features of WordPress. For instance, great WordPress features like the WYSIWYG editor and live preview won’t work when using a separated frontend.
  3. It is more expensive to set up a headless WordPress. Hence, always keep its increased cost in mind.

Is Headless WordPress Right for You?

Consider these scenarios where using headless WordPress might be the ideal choice:

  1. If safeguarding your website’s security is your foremost priority and critical for your business.
  2. If your website doesn’t necessitate frequent updates and upgrades, opting for a headless setup could be advantageous.
  3. If you seek a tailored design beyond the capabilities of standard WordPress themes, aiming for a unique frontend design, headless WordPress becomes an enticing option.
  4. For short-term websites or demo platforms designed for presentations and tutorials, exploring the headless approach might be worthwhile.

Who Should Avoid Using Headless WordPress

Here are some cases in which using headless WordPress is not a good option:

  1. When your website relies solely on specific plugins and functionalities that control and work best with the frontend of your application, you should stick with WordPress unless the plugins offer API-based options to consume the data.
  2. Suppose you’re not interested in coding your website, or your website requires daily maintenance, and you’re not hiring a professional for routine maintenance due to your low budget. In that case, WordPress is a suitable option for you.
  3. If you’re not a seasoned developer and want to create and manage your website alone, you should be using WordPress.

How To Make WordPress Headless (Build an App)

This section will explore building and developing a news blog with headless WordPress for the backend and Vue 3 as the user-facing frontend.

Setting Up Headless WordPress With Kinsta

There are three methods to build a WordPress site using Kinsta. You can either create the site locally or utilize our user-friendly dashboard. Additionally, the Kinsta API is available for use.

For the purpose of this guide, we’ll be using DevKinsta. It’s a well-known WordPress local development environment developed by the Kinsta team, enabling you to design, develop, and deploy WordPress sites seamlessly from your local machine’s comfort.

DevKinsta is free forever and offers you great benefits and comfort in developing and building WordPress with it.

You can download and install DevKinsta from the official website and follow the instructions in the documentation to get started.

If you have DevKinsta installed already, open it and follow the steps below to set up your first headless WordPress:

  1. On the DevKinsta dashboard, create a new WordPress site using Nginx, MySQL, and any PHP version. Also, you can import an existing WordPress instance or create a custom WordPress instance from the dashboard.
  2. Next, give your newly created WordPress instance a name, admin username, and password, then click Create and copy out the details while DevKinsta creates a new WordPress instance in your local machine.
  3. Next, click Open Site to open your newly created WordPress instance on your default browser.
  4. Finally, log in to the admin dashboard by accessing the http://site_name.local/wp-admin link and typing in the admin login credentials you entered when creating the new instance.

Configuring Our Headless WordPress

After successfully logging into your WordPress dashboard, you can go ahead to install any plugins and configuration of your choice.

You can completely deactivate the theme because we solely require the content accessible through the WordPress REST API-based endpoint. To achieve this, install any website redirect plugin (e.g. Simple Website Redirect plugin) and configure it accordingly.

The WordPress plugin installation screen.
WordPress plugin installation.

Next, navigate to the plugin’s Settings and input your frontend-based URL (e.g. http://news-blog.local), click on the Advanced setting options, and add the following paths — /wp-admin, /wp-login.php, and /wp-json — to the Exclude Paths section.

Lastly, enable the Plugin by selecting Enabled in the Redirect Status dropdown:

Simple Website Redirect plugin settings page.
Simple Website Redirect plugin settings.

That’s it! You can complete this step at any time; it’s not mandatory to do it immediately, especially if you haven’t set up a frontend URL yet.

In addition, if your JSON API is not enabled when you visit http://site_name.local/wp-json by default, you can enable it by opening your Permalinks under WordPress Settings and selecting Post Name or any other one of your choice except Plain:

The WordPress Permalink settings page.
WordPress Permalink settings.

Now when you visit your http://site_name.local/wp-json, it should present you with JSON data like below:

{
  "name": "Headless WordPress News Blog",
  "description": "Just another WordPress site",
  "url": "http://headless-wordpress-news-blog.local",
  "home": "http://headless-wordpress-news-blog.local",
  "gmt_offset": "0",
  "timezone_string": "",
  "namespaces": [
    "oembed/1.0",
    "wp/v2",
    "wp-site-health/v1"
  ],
  "authentication": [
    
  ],
  "routes": {
    "/": {
      "namespace": "",
      "methods": [
        "GET"
      ],
      "endpoints": [
        {
          "methods": [
            "GET"
          ],
          "args": {
            "context": {
              "default": "view",
              "required": false
            }
          }
        }
      ],
...

Setting Up Vue.js (Frontend)

We will be using the Vite web development tool to create our Vue 3 application to connect with headless WordPress. You can read more about Vue 3 and Vite development tools.

In this article, we will be building a news blog. To get started, run these commands in your terminal to initialize Vite in a news-blog directory:

npx create-vite-app news-blog
cd news-blog
npm install
npm run dev

Next, open your Vue 3 codebase with any code editor of your choice, such as VSCode, and let’s get our hands dirty with codes.

Consuming WordPress REST API in Vue.js

The WordPress REST API provides endpoints to access different types of content like posts, media files, comments, and users. For instance, to retrieve posts from your site using the REST API, you’d use the endpoint /wp-json/wp/v2/posts:

http://site_name.local/wp-json/wp/v2/posts

Similar endpoints exist for other types of content; you’d just replace /posts with /comments, /media, and so on.

Now, let’s explore how to fetch posts from your WordPress CMS and display them in your Vue.js application.

To achieve this, we’ll utilize the Fetch API (or Axios can be used alternatively). The goal is to fetch data as soon as the application loads and display it. For this purpose, we’ll use the onMounted composition API lifecycle hook.

<script>
  import Posts from './components/Posts.vue';
  import { ref, onMounted } from 'vue';
  export default {
    name: 'App',
    components: {
      Posts,
    },
    setup() {
      const posts = ref([]);

      onMounted(() => {
        const fetchPosts = async () => {
          const res = await fetch(
            'https://site_name.local/wp-json/wp/v2/posts'
          );
          const data = await res.json();
          posts.value = data;
        };
        fetchPosts();
      });

      return {
        posts,
      };
    },
  };
</script>

This code fetches posts from a WordPress site via its REST API using the Fetch API. Upon the application’s loading, it uses the onMounted hook to retrieve this data. The retrieved posts are stored in the posts variable within the App component and then passed as props to the posts component.

<template>
  <div id="app">
    <Posts :wpPosts="posts" />
  </div>
</template>

Display Data from WordPress REST API in Vue.js

Now that the posts array has been fetched from WordPress; you can now loop through the array in the costs component to display all posts:

<template>
    <div class="container">
        <h2>All Posts</h2>
        <div class="posts">
            <div v-for="post in wpPosts" :key="post.id" class="post-card">
                <h3>{{ post.title.rendered }}</h3>
                <div v-html="post.excerpt.rendered"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Posts',
        props: {
            wpPosts: {
                type: Array,
                required: true,
            },
        },
    };
</script>

The posts component displays the fetched posts by iterating through the wpPosts array. For each post, it showcases the title and excerpt rendered in HTML format using v-html due to the content’s inherent HTML structure.

The REST API opens up endless possibilities within Vue.js. With access to it, you have the freedom to customize your blog extensively. You can design and style your blog exactly as you envision, leveraging Vue.js to implement any feature or layout without constraints. The flexibility of the REST API empowers you to tailor your blog to your heart’s content.

Deploying Headless WordPress With Kinsta

Lastly, deploying your headless WordPress is made very easy with DevKinsta using the Kinsta hosting service.

To deploy your headless WordPress to Kinsta, click on the Push to Staging button on your DevKinsta dashboard and sign in to Kinsta with your login credentials.

You can learn how to push changes to the staging environment to deploy your headless WordPress to Kinsta hosting services in a single click.

Deploying Your Vue.js Frontend To Kinsta

Finally, you can deploy your Vue.js frontend to our Static Site Hosting for free. This can be done by pushing your code to your preferred Git provider (Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.

Don’t forget to adjust your headless WordPress endpoint to match your live production environment when testing your application. For instance, if you’ve deployed your WordPress CMS from DevKinsta, your live URL will change from .local to .kinsta.cloud. Updating this endpoint ensures that your application communicates with the live production setup for accurate testing and functionality.

Once your repo is ready, follow these steps to deploy your static site to Kinsta:

  1. Log in or create an account to view your MyKinsta dashboard.
  2. Authorize Kinsta with your Git provider.
  3. Click Static Sites on the left sidebar, then click Add site.
  4. Select the repository and the branch you wish to deploy from.
  5. Assign a unique name to your site.
  6. Add the build settings in the following format:
    • Build command: npm run build
    • Node version: 18.16.0
    • Publish directory: dist
  1. Finally, click Create site.

And that’s it! You now have a deployed site within a few seconds. A link is provided to access the deployed version of your site. You can later add your custom domain and SSL certificate if you wish.

As an alternative to Static Site Hosting, you can opt for deploying your static site with Kinsta’s Application Hosting, which provides greater hosting flexibility, a wider range of benefits, and access to more robust features. For example, scalability, customized deployment using a Dockerfile, and comprehensive analytics encompassing real-time and historical data.

Summary

Headless WordPress and the benefits it comes with are here to stay for a while. Its popularity will only continue to grow as more developers and site owners come to understand the upsides of a headless option.

In this guide, we’ve introduced you to headless WordPress’ benefits, pros, and cons, and we’ve shown you how to build and deploy your first headless WordPress with DevKinsta. You’re now well on your way to having your headless WordPress implementation.

What are your tips for deploying a headless WordPress site? Please share them in the comments section!

Solomon Eseme

I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me