WordPress as Headless CMS

WordPress has made a long way from its inception as a simple tool for occasional bloggers to a tool used for creating websites, and even to a powerful and practical eCommerce engine. Currently, WordPress powers around 65% of websites around the world that use CMS and with the integration of the REST API into the WordPress framework, we can now experiment and use it independently.

REST API has made WordPress more versatile and flexible, enabling the implementation of a Headless CMS model, where we separating WordPress’s back-end area from the front-end that visitors see.

But let’s start with some of the basic knowledge of headless solutions.

What is a headless CMS?

We recently talked about website development using headless solutions, where a Headless CMS operates on a separated architecture. This unique setup positions it as a backend service, connected via an API or SDK to the website interface and it’s play dual roles, acting as both the content repository (back-end) and presentation layer (front-end).

In the realm of a Headless CMS, content manipulation are made on a separate domain of the CMS, leaving the visual layer to be overseen by an independent solution. As an example, at our website, we build the blog part of the website, running on headless WordPress.

How headless WP (WordPress) works?

Headless WordPress refers to websites that employ WordPress as the backend software for content and data management, while adopting distinct technologies to display this information on the frontend interface.

The extension of WordPress’s structure with the REST API allowed us (developers) to adopt the headless architecture for the CMS itself. For example, the currently popular native editor, Gutenberg, is written in React.js and employs the API. This demonstrates that WordPress can successfully function as a headless CMS, thanks to the well-implemented WordPress API.

The great advantage of using WordPress admin panel, is that website’s content creators can continue using the familiar WordPress interface, but development teams can utilise modern front-end layout and using fresh tools to communicate with the WordPress API, such as React and GraphQL.

A customised and fastest front end

In the process of developing a headless WordPress site, developers harness the REST API to retrieve data from WordPress. Subsequently, this data becomes accessible for utilization within applications or alternate frontend technologies such as React.js, Angular.js, Faust.js, among others, enabling the creation of a personalised website. Nowadays require a website to be not just a template, but something that communicates with your client in a unique way. This was hard to archive with WordPress itself, but became more popular and easy to do.

Here is an example:

Usually WordPress handles both aspects within a single comprehensive software package and by employing any WordPress theme, website presentation becomes straightforward. This can lead to a standard appearance, while the use of a usnique WordPress website design might inadvertently lead to sluggish performance.

Some designers, developers and website owners may have different requirements where they may need to use other technologies to archive the great visuals and ideas.

This is where the Headless WP solution comes into action. It allows designers to use more creativity and flexibility, and developers can use new technologies while still using WordPress in the backend for easier content management.

That sounds great I think!

Why should you use headless WordPress? The advantages

• Headless WordPress will be much faster – On our example we did some tests, and we can confirm that headless WordPres can deliver superior website performance. By isolating the frontend and utilising technologies like React.js, we aim to optimise code efficiency beyond the capabilities of traditional WordPress themes.
• 3rd party app data integration directly from CMS – the headless architecture facilitates the integration of WordPress data into external applications. For instance, if one aspires to incorporate their WordPress blog into a mobile app, the headless approach can seamlessly bridge this gap, offering a cohesive user experience. This can come to complex products where you have user manuals that you want to share on a website and also in your app, but manage and update from one place, to be sure, that information is accurate.
• It is more affordable than other headless CMS – Headless WordPress is often considered a more affordable alternative compared to proprietary enterprise content management systems (CMS) like Contentful. The cost-effectiveness of headless WordPress combined with its robustness makes it an appealing choice for many.
• It’s more secured – Since CMS will be placed on different domains, this reduces the attack surface, preventing malicious requests, DDoS attacks, and unintended data exposure.
• More flexible – you are very flexible with what you can create on a front-end. Some of the creative designs were not so easy to implement using WordPress without slowing down the website. We have developed our perfect solution of using Astro Framework on the front-end and connecting to WP via GraphQL during static pages generation.

What are the disadvantages?

• Headless WordPress is more expensive while developing, but in short term only – adopting a headless WordPress strategy can lead to increased expenses, since developers should build everything out of the box. But in long terms – maintaining the website, making updates and integrating new functionality are more cost effective.
• Some WordPress plugins are not working here – WordPress is well known for its vast collection of plugins, enriching its functionality. However, the headless approach may limit use of certain plugins, disrupting the seamless incorporation of features and functionalities. But no worries – it’s a lot of plugins that you can work with.
• The website is too fast – yes, your website will be super fast. Adding some additional animations and transitions will be a great idea to slow it down. (joke)

Traditional or Headless WordPress?

Most WordPress CMS installations utilise themes, which consist of template files for content visual presentation.Traditional WordPress delivers website content to visitors through server-side rendering, utilising PHP and this can impact performance when compared to other methods like static site generation. With each visit to a new webpage, the browser contacts the server to fetch all required content, leading to slow loading times and compromised user experience.

An alternative approach is the Headless CMS, where the WordPress REST API returns JSON instead of HTML. Using the API provides more flexibility in terms of the user interface, allowing for headless website creation, including platforms like Gatsby.

How to make a Headless WordPress website?

There are two ways of setting up WordPress as a Headless CMS

Using a Framework

Streamlining WordPress front-end development can be achieved using frameworks like React and it will save time and complexity. Employing the React JavaScript library facilitates developing a tailored front end, seamlessly accessing WordPress CMS data through its REST API. This efficient approach minimizes re-rendering, bolstering headless projects by loading fundamental code once. React’s selective re-rendering caters to component state changes, particularly advantageous for Single Page Applications (SPAs).

Using Plugins

Second method involves leveraging plugins to simplify headless WordPress configuration, providing a multitude of options to expedite various tasks.

Our choice is WP GraphQL – a complimentary plugin tailored for retrieving data from headless WordPress and it is equipped with an integrated GraphQL development environment. WPGraphQL essentially transforms a WordPress site into a GraphQL API, enabling interaction via clients capable of HTTP requests to the GraphQL endpoint. This plugin harmonises seamlessly with frameworks like Astro.

Headless WordPress examples

Our team has build a lot of different websites using WordPress. Headless solutions is something new and all new projects are build using this system (if WP is required).

HostPresto

HostPresto, a leading web hosting provider in UK and it’s our first case study for the implementation of headless WordPress. Embracing a decoupled approach, HostPresto leveraged WordPress as the backend content management system, while opting for distinct technologies for the frontend. This strategy enabled streamlined content management while empowering flexibility and performance optimization. HostPresto’s experience showcases the advantages of headless WordPress in enhancing user experiences and delivering dynamic, efficient websites.

Website: https://hostpresto.com

Roud Studio’s blog

Our own blog showing a headless WordPress as a great architecture. We decided that we don’t want to edit a content on the main website frequently, but we wanted our blog to use some pretty common tool for writing and publishing. WordPress serves great as the backend content hub. This approach ensures efficient content management while enabling dynamic, responsive design. Our blog highlights the benefits of headless WordPress, allowing seamless content updates and enhanced user experiences through a modern, flexible, fast frontend. And believe – this is soo good for SEO.

Website: https://roudstudio.com/blog

We will continue adding our new work in the future and keep you posted.