Blog

WordPress, "Decapitated"

Most WordPress websites are monolithic. That is, when we request a web page, a complete HTML page (with CSS and JavaScript) is sent to our web browser, using the style/theme of the site. However it's also possible to only request the content from a WordPress site, and to style it ourselves. To do that, we need our own client, and our client only requests content from a headless WordPress server.

Terminology

On a monolithic website, everything happens on the website. The site delivers complete HTML pages to the user's browser. Styling on a monolithic WordPress site is done via its theme. The beauty of separating content from styling is that we can choose from many different themes to display the same content.

When we split a monolithic site into two parts, they are called the server (or back end) and the client (or front end). Now the server concentrates on managing the (unformatted) content. The client is an additional program we didn't have before, and it gets loaded into the user's browser when we first access the server. All communication between client and server is done, behind the scenes, via WordPress's REST API, with all data being passed back and forth in JSON format.

This configuration is called headless WordPress because now the server is only responsible for sending unformatted content to the client, and the client, as the "head," determines how the content will be displayed to the user.

Note that by default, a WordPress site is capable of both: It can behave like a monolithic site, delivering complete HTML pages with styling and interactivity to one user's browser, and at the same time it can behave like a headless server, sending just the contents of the page to a client running in another user's browser.

Head 4 WP

Head 4 WP is a prototype client that communicates with headless WordPress servers. By receiving unformatted content from WordPress sites, it can offer a consistent design to the user across all sites the user visits.

(Click on a thumbnail to enlarge.)

Fig 1: WP Tavern page
Fig 2: Displayed in client
Fig 3: EZ Read mode in client

Figure 1 shows a post from WP Tavern, a site about "all things WordPress." When visited via a web browser, it returns complete HTML pages (as all good monolithic websites do). It has its own design and layout.

Figure 2 shows the contents of that page in the Head 4 WP client. The left-hand column contains the titles for most recent posts. The right-hand column contains the content of the current post.

Finally, Figure 3 shows the client in EZ Read mode, using a bigger serif font, greater line spacing, and less contrast between background and text. This functionality exists completely in the client, since the client receives only content from the server, then adds its own (minimal) styling.

Pros and Cons, From a User Perspective

A headless WordPress configuration is useful if we want to use a WordPress site more as a data server, and we want to be in complete control of design. This can be useful to remove/reduce clutter (including advertisements!).

However, when we receive only content from a WordPress site, we are not receiving the CSS or JavaScript files that are used on the monolithic site. This can result in less-than-optimal display on the client when (for example) a page contains a lightbox that requires CSS and JavaScript that the server doesn't provide (because it's not content). To help minimize this inconvenience, the client always shows a link to the original page on the monolithic site.

Other important factors, like complexity, cost, and speed of headless WordPress sites, are mentioned in this headless WordPress post (already mentioned above).

Under the Hood

The Head 4 WP client was implemented with the Vue front-end JavaScript framework. Styling was done using the Ant Design for Vue User Interface toolkit.

Published: 13 Sep 2023