What is Headless WordPress? How to Create One? [Tutorial]

---

---

---

What are the pros and cons for WordPress headless CMS?

Headless WordPress comes with a lot of advantages and disadvantages, each of which can affect your work in different scenarios. To get a clear picture, let us compare its Pros and Cons in the Comparison Table format.

Pros	Cons
1. The decoupled architecture allows for more flexibility in frontend development	1. The steeper learning curve for developers
2. Ability to leverage WordPress’s robust backend content management features	2. Requires additional setup and configuration
3. Seamless integration with WordPress plugins and ecosystem	3. Limited support compared to traditional WordPress
4. Improved performance due to reduced server load	4. Potential complexity in managing multiple systems
5. Enhanced security by reducing the attack surface on frontend	5. Increased development and maintenance costs
6. Better scalability and performance optimization options	6. Dependency on third-party tools and services

---

---

Is headless WordPress good?

If you ignore the limitations that we mentioned previously, there are certain scenarios where using headless WordPress might be beneficial for you.

• If your website security is an utmost priority and the data handling is very sensitive or critical.
• If you enjoy custom design and limitless possibilities without the constraints of WordPress’s limited theme options, and you’re seeking a unique frontend design, then go for Headless WordPress.
• If you like to keep your website isolated with WordPress’s frequent updates and upgrades.
• If you want to make your website or application future-ready and adapt to new technologies, trends, and user behaviors without having to overhaul your entire infrastructure, consider headless WordPress.
• A Headless setup can be a good option if you are looking for demo websites, small or short-term projects, or tutorials.

---

How does Headless WordPress work?

While talking about standard WordPress, comes with a user-friendly interface and an easy-to-use admin panel through which you can easily edit, create, and delete content as well as manage the website.

For the front end, it provides thousands of theme options combining built-in themes as well as third-party themes to make a visually appealing website on the screen.

But when you decouple WordPress, you can enjoy the best of both worlds. To make it possible WordPress has an API called WordPress REST API.

It is a programming interface that allows developers to access and interact with WordPress website data using standard HTTP methods.

It allows developers to retrieve, create, update, and delete WordPress content remotely, which makes it easier to integrate WordPress with other application platforms or other front-end- technologies like React.js, Angular.js, etc to create a custom website.

---

How do I make WordPress headless? (Headless WordPress Tutorial)

There can be various ways through which you decouple the standard WordPress, depending upon the technology you are going to use, resources, preferred languages, and frameworks. No matter whichever method is used, you should be comfortable with the front-end languages as well as WordPress Rest API.

But for now, we are going to choose the simplest method since the majority of the individuals are beginners. Check out the steps given below:

Step 1: Set Up WordPress

The first thing you need to do is to create a WordPress website like you normally would on your server. It means the website should be live, has its domain, and a proper web hosting account.

But choosing the right WordPress hosting platform is itself a very difficult task and it’s even a very crucial step when setting up WordPress and creating a headless CMS.

It is so important because, even though the front end and back end are decoupled, the back end still needs to reside on a server that requires hosting.

The server not only provides a home to store all your website content but its performance, security, and reliability are also very crucial to delivering website content smoothly to the front end, no matter which technology it uses.

Therefore, it becomes essential to choose a host that offers Blazing Fast Server performance and tightened security.

Considering this, you can choose WPOven, one of the Fastest and leading Fully managed WordPress hosting companies that provide a blend of speed, enterprise-level security, and concierge support, ensuring your headless WordPress journey is smoother.

• Specifically, WPOven provides managed hosting on top-tier cloud provider Linode ensuring high-speed performance and scalability.
• The platform offers pre-WordPress installation, making the setup of WordPress and other tools hassle-free.
• Also, With the built-in advanced caching system and Cloudflare’s content delivery network (CDN), your content gets delivered faster, irrespective of the user’s location.
• Additionally, WPOven ensures enterprise-level robust security through in-build web protection firewalls and SSL installation, helping protect your backend data and interactions.
• Automated backups and easy restore options provide an added layer of data protection and peace of mind.
• Furthermore, WPOven’s 24/7 customer support and extensive knowledge base ensure that any issues are swiftly addressed, allowing you to focus on building and managing your headless CMS without hosting-related hassles.

Step 2: Enable REST API

The next thing, you need to do is to make sure that the WordPress REST API is enabled. By default, it is enabled on all new WordPress installations.

But still, you need to verify whether it’s enabled on your website or not. You can do this by simply making an API request by entering the following URL in your browser,

https://example.com/wp-json/wp/v2/

Change the ‘example.com” with your actual domain name and if the API is enabled, it will display a JSON response with some information about your website’s posts.

Alternatively, you can take the help of a plugin such as the WP REST API plugin.

---

Read: 🚩 The WordPress REST API : Getting Started Guide

---

Step 3: Fetch Post Data via API

If you like to fetch post data, follow these steps:

• Open your WordPress dashboard > Settings > Permalinks and select Post name.

• After that, you need to download Postman API testing tool.
• Now inside the Postman API tool enter the URL as in the given below format.

https://mydomain.com/wp-json/wp/v2/posts

This will fetch the post data inside your WordPress website.

Step 6: Set up the React Application

Now we are done with the backend, it is time to start working on the front end. First, we create a React Application by executing the given below code in the Terminal.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

This command will create a new React application using Vite and also install necessary external libraries or packages.

Plus, you also need to include Axios to handle HTTP requests. For this run the following command to install it.

npm install axios

Now, you can start a local development server for your application by running the command npm run dev in your terminal or command prompt.

When you run this command, it will start a server on your local machine, and it will make your application available at the URL https://127.0.0.1:5173.

The next thing you need to do is to open your project in the code editor (whichever you like, Visual Studio Code, Subkline Text, Atom, etc.) and also remove unnecessary files such as index.css, app.css, etc.

Step 7: Retrieve Posts from WordPress

In your App.jsx file, at the top, import the useState hook from the React library. This allows you to use state in your functional component.

import React, { useState } from 'react';

Inside your functional component App, initialize a piece of state called posts using the useState hook. This state will hold an array of posts. useState([]) initializes posts with an empty array as its initial value.

const [posts, setPosts] = useState([]);

After initializing the posts state with an empty array using useState([]), you need to add code to fetch posts from the WordPress REST API. This involves making an HTTP request to the API endpoint that serves the posts data.

You need to add the code necessary to fetch the posts data after the state declaration. This code will typically involve using a method like fetch() or a library like Axios to make an HTTP GET request to the WordPress API endpoint that provides posts data.

Next, add the following code after the state declaration to retrieve posts data from the WordPress REST API and update the posts accordingly.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

This code fetches posts from a WordPress website’s REST API when the component mounts, and updates the component’s state with the fetched data using useState hook’s setPosts function.

Step 8: Creating a Blog component and Rendering it

Now create a new folder named “components” inside the src folder and create two new files Blog.jsx and blog.css (inside the components).

Next, add the following code to the Blog.jsx file first:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

This component fetches and displays the title, date, excerpt, and featured image of a blog post passed as a prop.

After that add the following style to the blog.css file,

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

Finally, insert the following code snippet inside the return statement of the App.jsx file. This is where you define the structure of your component’s UI using JSX syntax.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

Save the file and refresh your browser. Now you will be able to see the rendered blog posts on the screen.

---

Headless WordPress Examples

For your reference and to build confidence, here we are providing you with some Headless WordPress Examples:

1. Techcrunch

If you are a tech enthusiast, you must be familiar with TechCrunch. which is a leading technology media outlet and news website. They redesigned their website’s front end to provide a seamless user experience.

To achieve this, they went for the Headless WordPress approach and used the React application to create the front end and headless WordPress for the back end.

2. Facebook Brand Resource Center

Facebook now popularly known as Meta, a social media giant uses this Headless WordPress approach in their Brand Resource Center website as a style guide for its brand assets.

The website uses a unique blend of unique and elegant web design with a smooth user experience. If Facebook/Meta like a big tech giant can. trust headless WordPress, so can you.

---

---

Conclusion

In conclusion, apart from its certain limitations, cons, or disadvantages. A headless approach can do wonders if implemented correctly. Especially it can be highly advantageous for developers or content creators who like to create headless web applications.

No doubt, decoupling the standard WordPress can open up a World of possibilities such as gaining the freedom of designing a website UI using React and also managing the content using WordPress.

This technology allows you to enjoy the complete power of each technology along with the benefits of flexibility, scalability, and SEO optimization.

Throughout this blog, we have attempted to address all the generic queries regarding headless WordPress and have also provided you with some steps on how to create a headless WordPress for your reference. (However, there can be multiple ways to decouple WordPress, so follow whichever you feel is easiest for you).

---

Frequently Asked Questions

---