loading…
  • Author
    Hugues Lismonde
  • Date
    22.05.2024
  • Reading time
    3 min
  • Categories
    Technical case

Headless & Wordpress

Headless & Wordpress
Understand our infrastructure

Introduction

EPIC uses WordPress to manage the content of the websites it produces, and has been doing so in ‘headless’ mode for several years now. This approach allows development to be decoupled, but is not without precautions.

Why WordPress?

WordPress is still the most widely used CMS in the world, benefiting from a large community that ensures its constant evolution. Numerous commercial and free plugins are available, covering a wide range of functionalities (unfortunately not always headless-aware, as we will come back to…). The administrator experience remains one of the best compared to any established CMS.

All in all, WordPress remains the optimal solution for EPIC in managing content both ergonomically and efficiently.

Why headless ?

A headless CMS separates the presentation layer (frontend) from the content management layer (backend). This division enables content to be managed on one side and exploited across different digital channels on the other. Such separation facilitates the work of developers, who can focus on their respective areas of expertise and speed up development. Unlike in monolithic CMS, where content is integrated into templates, in headless CMS, content is structured, making it reusable in a multitude of ways. This approach opens up to many possibilities that were previously unattainable

In terms of performance, this separation facilitates the introduction of numerous optimization techniques at different levels, enabling much more dynamic scalability.

Alternatives?

Considering that WordPress was originally not designed as a headless CMS and that new offerings regularly appear on the market, why choose WordPress? Unfortunately, most of these alternatives have major shortcomings, making them unsuitable for EPIC.

  • Immaturity: many of these CMS are very (too) recent and not yet sufficiently stable. The community behind them, though dynamic, remains too small and offers no guarantee of the tool’s longevity.
  • i18n: in Belgium, and very often in Europe, it is absolutely essential for a CMS to effectively manage content translations to offer a multilingual site. Most natively headless CMS are either monolingual or offer a translation management system that is too simplistic to be fully exploitable. WordPress, with Polylang Pro, is a powerful and flexible solution that meets virtually all of these requirements.
  • Price and openness: many of these headless CMS are either completely proprietary or “open-core”, offering a limited set of features for free and keeping most of the advanced functionality behind a subscription. Some require several thousand or even tens of thousands of euros per year to use.

How?

Since EPIC chose WordPress, which is not natively headless, we had to tailor the solution to meet our needs.

What we didn’t do 

WordPress offers a Rest API that, theoretically, exposes content automatically. The problem with this API is that it doesn’t “know” the ACF fields we use to structure content (a topic for another article), which severely reduces its usefulness.

MVC

So we developed our own MVC (Model-View-Controller) on WordPress. Controllers expose data in JSON via “decorators”, a development pattern that wraps an object to enhance its capabilities without directly modifying it. In our case, this pattern mixes native WordPress posts with ACF fields and transforms the whole thing into JSON that can be consumed by the frontend.

EPIC’s objective is to provide a first-rate user and developer experience, while always keeping site performance and security in mind. To achieve this, it was very important for us to never modify the core of WordPress but rather to exploit native functionality to the full extent. This ensures that we can update as frequently as possible and install useful compatible plugins without adaptation.

Problems?

Obviously, none of this is “free”. Since WordPress wasn’t originally designed for headless operation, certain difficulties had to be overcome.

Performance

This has less to do with headlessness than with the extensive use of ACF fields, but particular attention had to be given to the way content is constructed to avoid exponential queries generation. Once all the performance tricks are implemented, our internal cache plugin pulls the average performance of our sites under 50ms.

Compatibility

As WordPress is not a natively headless CMS, most plugins offering front-end functionality don’t work as is. Research is therefore critical to determine their usability. “Admin” plugins, on the other hand, are usually much easier to integrate. EPIC has in its toolbox a series of indispensable plugins such as Polylang Pro, ACF Pro, iThemes Security, etc., which make our day-to-day work easier.

Finally

WordPress is a mature CMS with a very large community, and despite its “age”, it remains modern and high-performance. While EPIC is constantly on the lookout for the “next generation” solutions, at the moment there is nothing that can effectively replace this venerable CMS.


Reward your future customers with a game

We all love surprises, don't you? Check out our charming bunny ice-skating game!

  • Technical case
READ THE ARTICLE

Motion Design

Level up your motion design skills.
  • Technical case
READ THE ARTICLE

Tip top kids

A technical case study
Province de Liège - Tip Top - Playscreen
Each game round is personalised according to the particularities of each school and the children playing .

The province of Liège approached us to come up with a tablet app to tackle physical and mental health issues in children. The app will be deployed in all primary schools of the province.

  • Technical case
READ THE ARTICLE

EPIC's new home base
This website uses cookies
We use cookies and similar techonologies to adjust your preferences, analyze traffic and measure the effectiveness of campaigns. You consent to the use of our cookies by continuing to browse this website.
  • Essentials Essentials

    Those cookies are essentials to the functioning of the site and cannot be disabled in our systems. They are generally set as a response to actions you take that constitute a request for services, such as setting your privacy preferences, logging in, or filling out forms. You can set your browser to block or be notified of these cookies, but some parts of the website may be affected. These cookies do not store any personally identifying information.

    pll_language

    The server saves the language chosen by the user to display the correct version of the pages

    _dc_gtm_(property-id)

    Cookie set by Google Tag Manager. Google Tag Manager enables to manage website tags without editing code. All tags handled via Google Tag Manager are conditioned to the acceptance of the relevant cookie category.

    epic-cookie-prefs

    Cookie that remembers the user's cookie settings preferences. It allows to avoid asking the user about their preferences each time they visit the website.

  • Advertising

    By using these cookies, we are able to show you advertisements on third-party websites that may be relevant for you. We can also measure their effectiveness.

    Facebook pixel

  • Performance

    These cookies enable us to know how many people visit our websites and from which sources they come to our websites. They help us to understand which (parts) of our websites are popular and how visitors navigate their way through our websites. This enables us to analyse our websites and optimise them so that you can find everything you want more easily. All information gathered by these cookies is aggregated and is therefore anonymous.

    _pk_ses

    Cookie set by Matomo to temporarily store data for the visit. Matomo is a web analytics application to track online visits to one or more websites and display reports on these visits for analysis. All data tracked with Matomo are anonymous.

    _pk_id

    Cookie set by Matomo to store anonymously a few details about the user such as the unique visitor ID. Matomo is a web analytics application to track online visits to one or more websites and display reports on these visits for analysis. All data tracked with Matomo are anonymous.

    _ga_(container-id)

    This Google Analytics cookie is used to persist session state. Google Analytics is a web analytics service offered by Google that tracks and reports website traffic anonymously.

    _gid

    This cookie name is associated with Google Universal Analytics. It appears to store and update a unique value for each page visited. Google Analytics is a web analytics service offered by Google that tracks and reports website traffic anonymously.

    _ga

    This Google Analytics cookie is created when you first visit our site. It contains the version of Google Analytics, a randomly generated ID and a datetime group of your first visit. Google Analytics is a web analytics service offered by Google that tracks and reports website traffic anonymously.

This website uses cookies

We use cookies and similar techonologies to adjust your preferences, analyze traffic and measure the effectiveness of campaigns. You consent to the use of our cookies by continuing to browse this website.