by Web technologies come and go very frequently, but some tend to stick longer than others. WordPress is a big example of that. For its simplicity of use and easiness of getting started, it’s often used to create simple websites such as blogs, business websites, noncomplex e-commerces, and much more. But although WordPress might be a good solution for simple applications… It also may be a good solution for larger applications!
Headless WordPress
WordPress is a popular CMS often used to create simple websites. As a CMS it allows users to create a website easily without thinking too much about things like what CSS library is going to be used, what state management library are we going to use, and other thoughts that come to mind in modern web development.
Although there is a learning curve, it isn’t as large as the learning curve for a framework like React or Vue, and this attracts developers and clients that want a website built quickly and without costing too much.
Let’s say you want to build a blog and focus more on the interface and the user experience, make your blog have a “glow”, have different functionalities and maybe scale to a larger application in the future.
When deciding what technologies to use, you could consider using wordpress, but your blog would just be more of the same, very static and a lot like other blogs that were created with the same default plugins and themes.
Let’s build everything from scratch then!
Maybe that’s not the best option. Even if you have the time to build everything from scratch, wordpress already has pretty much everything you need for a blog. So maybe you can get the best out of wordpress without losing quality when delivering an end product to a user.
WordPress has a “headless” solution that will decouple the frontend from the backend, hence why it’s called “headless”, the head (frontend) is separated from the body (backend).
In this approach, WordPress provides data with their REST API, and the frontend will be created with any other web framework like React or Vue.
It also makes your application scalable, since you have complete control over the frontend, you can easily implement any additional features that might be needed on your blog and make your app seem more dynamic overall.
This also applies to the backend. It is possible to integrate your site with other APIs other than wordpress in a headless configuration.
Normal WordPress can be rely on many plugins that could slow down your application depending on how many are installed. With this approach the necessity for such plugins and themes reduces significantly, which lead to faster http requests overall.
Rendering and handling data is always tricky and can lead to bad experiences for the end user if done poorly.
In a standard wordpress configuration, you wouldn’t have much control over that, but by having a modern javascript framework on the frontend where you can choose how to handle the data, you can significantly reduce the loading time for your website and handle your data more efficiently, creating a better experience for your users.
Let’s create a simple example of how fetching and rendering posts would look like in React.
First, create a WordPress application and a React app. The REST API is activated by default when a new wordpress application is created, so no additional configuration should be needed after creation.
After that is all set up, let’s create a function that will make a http request to the wordpress api we just created and fetch all the posts:
export const fetchPosts = async () => {
const response = await fetch(`${wordpress_api_url}/wp-json/wp/v2/posts`);
return response.json()
}The wordpress_api_url will depend on the url of your wordpress application, but wp-json/wp/v2/ is standard when using this api. In this case we are fetching all posts, but if you want to fetch the comments, for example, simply replace posts with comments. The url would look like this in this case: /wp-json/wp/v2/comments. But you can take a look at the handbook to see everything else you can do with the API:
WordPress’s API sends a JSON with tons of information about the post. In this example, we won’t need all of that. For now let’s create a function to grab only the data that we want.
export const postMapper = (post) => {
return {
id: post.id,
title: post.title.rendered,
excerpt: post.excerpt.rendered,
};
};We’ll need to update the function we created earlier that fetches the posts.
export const fetchPosts = async () => {
const response = await fetch(`${wordpress_api_url}/wp-json/wp/v2/posts`);
const posts = await response.json();
return posts.map(postMapper);
}Now we’ll create a simple page that will render all the posts.
const App = () => {
const [posts, setPosts] = useState([])
useEffect(() => {
const fetch = async () => {
const posts = await fetchPosts();
setPosts(posts);
}
fetch();
}, []);
return (
<div>
<header className='...'>
<h1 className='...'>My Blog</h1>
</header>
<div className='...'>
<main className='...'>
{posts.map((post) => (
<Post
key={post.id}
title={post.title}
excerpt={post.excerpt}
/>
))}
</main>
</div>
</div>
);
};And a Post component that will be the card for each post that is displayed:
const Post = ({ title, excerpt }) => {
return (
<div className='...'>
<h4 dangerouslySetInnerHTML={{ __html: title }} className='...' />
<p dangerouslySetInnerHTML={{__html: excerpt}} />
</div>
);
};Notice that here we use dangerouslySetInnerHTML instead of passing the props inside the HTML tag, that’s because wordpress already returns the HTML tags that the post contains. So, in order to, read the rich text we need to use this method that will read the HTML sent from wordpress.
And the result looks like this:
Pretty simple, right?
Final Thoughts
It can be a great tool to use in the correct context, those usually being projects where WordPress already excels at, and you want the frontend to feel uplifted compared to a normal WordPress website. It also saves a lot of time compared to building a backend from scratch, which is crucial depending on your deadline to finish the project.
Migrating from an existing wordpress website to a headless website can also be a good idea! Maybe you already have an existing website built with wordpress but didn’t think scaling this application would be necessary. In this case, migrating to a headless environment would make your frontend more flexible.
A blog is a great example of a project that would benefit from using this approach. WordPress already has everything you need, so you would only need to focus on the frontend. Depending on your use cases and functionalities you expect to have in the future, building a backend from scratch is unnecessary in this case and would only increase the development time and probably the cost of the total project.
Using a tool like “headless” would keep the simplicity of wordpress in the backend, without having to build that on your own.
There are tons of benefits choosing this approach, it just depends on what you need on your project. I hope this helps you understand when headless wordpress is best suited.
We want to work with you. Check out our "What We Do" section!
