Awon

< AWON Blog

3 simple steps to create WordPress headless website

Aakash @ July 16, 2022

3 simple steps to create WordPress headless website

This article assumes that you already have a WordPress website and you would like to use it as a headless content management system (CMS).

What is headless WordPress

Headless WordPress simply means that back-end of the site remains separated with front-end. Backend of the WordPress manages the data and front-end simple queries it and display it. Front-end can be in any tech specs namely modern JavaScript based JAM stacks or any other python or ruby based front end. To access the back-end data, front simple makes API calls.

How to turn your existing WordPress to Headless CMS

To convert your existing WordPress website into headless CMS, follow the simple steps.

Step 1: Install WPGraphQL plugin

First thing you should install is WPGraphQL plugin. Install it from here https://wordpress.org/plugins/wp-graphql/

WPGraphQL plugin allows you to access the data in GraphQL language format. This is much easier to use than the traditional REST API which WordPress already provides. REST API is also a popular method to use WordPress in headless mode, however, if you are starting today, I recommend you to use the WPGraphQL plugin provided by GraphQL API.

Once you install it, you can see settings available for it in WordPress admin like the following image.

Step 2: Install your front-end

The next step is to decouple your front-end with the back-end. To do that, you will need to install your front-end app in some other location. Your front-end can be any technology you would like. A popular framework such as Gatsby could be a great choice.

You can also use a framework like Frontify: https://frontity.org/

Step 3: Connect

Now it’s time to connect your front-end with your backend. If your front end just wants to display data this process is much easier. After installing WPGraphQL plugins, you can now access the data using the /graphql endpoint.

For example, you can access the posts like the following by making a request on your website (https://example.com/graphql)

query GetPostsEdges {
  posts {
    edges {
      node {
        id
        title
        date
      }
    }
  }
}

Generally, posts are publicly viewable so fetching public data is a simple job. However, you might want to use your front-end for updating the existing data or fetching private user data. You can do that too, but you need to make the authenticated request for this.

You can read more about how can you make an authenticated secure request here: https://www.wpgraphql.com/docs/authentication-and-authorization/

Conclusion

Making WordPress headless is not a too complicated process in itself, however, having a separate front-end means your overall hosting environment becomes a bit more complex than the traditional one. You now have to manage both environments separately which will add management overhead. It will also give you the freedom to work on your favorite technology stack and extend the front-end as you like.

Aakash
Aakash
Founder of AWON

AWS Solution Architect and WordPress Developer.

Twitter: https://twitter.com/skydodiya

You may like following posts too...

Why my WordPress website is slow?

Your WordPress website can be slow for many reasons. The most common reasons could be one or a combination of a few of the following: Your WordPress Webhosting environment Plugin conflicts or circular dependencies Too many plugins Unoptimized theme Blocking third-party dependencies Unoptimized custom code Unoptimized images No CDN Lets check all of above in […]

Top 3 Mistakes to Avoid When Choosing a Web Hosting Company: A blog about how to make sure your small business thrives on top quality cloud hosting.

If you’re a small business owner, you know that every penny counts. When it comes to websites, cost is an important factor in selecting a web hosting provider. However, your choice of an inexpensive host can quickly become costly if the company fails to provide reliable service or goes out of business unexpectedly. That’s why […]

Subscribe for updates

Deploy your WordPress to the cloud.