WordPress provides a powerful but tightly interconnected frontend and backend with its strong core and community support. A wide selection of plugins and themes, as well as it’s quite large developer community enable it to provide solutions for many different uses and needs. Moreover, the increasing use of smart devicees (phones, watches, tv’s etc.) and new frontend development techniques and technologies shaped the needs, especially the frontend needs of content management systems. Although WordPress is still a strong player in this regard, it has started to fall short in certain situations.

What is Headless WordPress?

A special application of CMS’ that separates backend and frontend architecture is called as Headless CMS. In our case, the special WordPress application that removes the dependency of the frontend and backend and serves as a backend only is called Headless WordPress.

Why Headless WordPress?
Pros of Headless WordPress.

Headless WordPress comes with the following benefits;

  • Your Frontend Team can focus on the frontend development without any knowledge about Custom WordPress Theme Development or WordPress Backend. You can choose any stack for your frontend and even use different stacks for different devices.
  • It removes the dependency between Frontend and the Backend. You can consume different sources, a single or multiple WordPress backend in a single frontend application.
  • As the frontend and backend is decoupled, they can be scaled separately.
  • You can feed different channels from a single source. Your website, mobile application or any other application can consume the same API.

When is Headless WordPress not suitable?
Cons of Headless WordPress.

Headless WordPress can be more expensive solution in terms of both money and time, but why?

  • A classic WordPress setup gives you the power of the plugins, themes and core WordPress features. An headless WordPress on the other hand may require a dedicated frontend team or at least a full stack developer also focused on the frontend. The backend also may require a team or a developer who is experienced in Headless WordPress management and developing headless supporting plugins if required.
  • You may need to manage a separate server infrastructure for the backend and frontend. Small setups may use a single server, but you may think twice if you really need a headless setup for such a small website.
  • You may not be able to use even standard features of WordPress without additional development effort. Moreover, you will definitely lose the power of extensive plugin support that WordPress provides you and you may need to develop customized solutions even for basic requirements.

What Headless Developers need to know?

The page you are currently on is powered by an Headless WordPress backend. The backend is a standard WordPress serving over GraphQL and the frontend is one based on Next.js (React.js). Such a WordPress site may be completed in 3-4 days with a classic approach but it took more than a month with the headless structure. I am going to list some steps that I had to manage myself that you never have to deal manually on a classic WordPress setup.

  • I have implemented a GraphQL based API as I thought the standard REST API would be more cumbersome.
  • Managing custom posts, custom fields, mutli-language support and etc. would be easier on a classic WordPress setup, however you have to deal with queries and frontend code for your headless setup.
  • Now, no piece of code will be automatically injected to the frontend, but you have to manually gather the data and inject/render everything you need.
  • You need to write serious code on the frontend for the redirect process that you can easily manage with Yoast’s redirect feature or using the Redirection plugin. Since it is the frontend side that welcomes the visitor, it should also make the redirects and unfortunately you have to write all the code on both the frontend and the backend.
  • While the redirection plugin captures and logs 404s in classic a WordPress setup, now you have to create these records manually in case of 404 or any other error. And again you should write all the frontend and backend code yourself.
  • The form submission process, which you normally do easily with plugins, is now getting more difficult. If you want the forms to be managed on the backend rather than hard-coding all the forms, you need to write extra code to display, validate and submit the form.
  • Now you won’t be able to install a plugin and start using it right away. If it is essential, you may need to write extra code to integrate that plugin. For some plugins, it may even make more sense to write code from scratch rather than trying to integrate the plugin.

Even though there were moments that I regret to make the headless transition, I worked hard till the end because I enjoy learning new topics and win against development challenges.

Consequently, I can say that Headless WordPress is way too luxurious for a personal or small business website, but may add a lot to a high-traffic news or e-commerce site.

Headless WordPress Development

My experience was full-stack, so I dealt with all WordPress backend and the Next.js frontend code. It was a very challenging but enjoyable process. I am going to write separate articles for most of the necessary steps, but you probably will need more than these articles, a lot of reading and practicing yourself.

Hoping to welcome you back in the next articles of this serie.