Mar 2024

Headless WordPress is a thing

What is Headless WordPress CMS?
Share

You may have heard of a Headless CMS before, however, if you're normal and haven't, it's a version of WordPress which is so stripped down, you're only using WordPress as a backend dashboard whilst you use your own solution for taking the content and turning it into pages on the frontend.

With the standard version of WordPress, you leave WordPress to manage the backend and the frontend, so it uses PHP to create the HTML pages on the frontend. If you don't want to use PHP to create HTML pages in this way and to be able to use something like a React, Angular or mobile app, you need to go headless. In that sense you're using WordPress to handle all the data and serving that data up to the site or app in your own way.

If you're familiar with WordPress you probably know WordPress websites use a theme - a collection of template files used to display content. These template files tend to mix HTML with PHP to control the layout of particular pages or page types. The drawback for this is that content on pages has to be available as HTML. In addition to this PHP uses server-side rendering, which is not good for performance.

A headless WordPress css will instead of returning HTML, return something called JSON via the WordPress REST API. Using this content API allows you to be flexible with the frontend you use, so you can output this content using something a native mobile application, Gatsby or Vanilla JavaScript.

The main benefits to Headless WordPress can be seen here...

Performance

Faster performance with smooth delivery due to the frontend being powered by something like GatsbyJS instead of PHP and HTML.

Security

Using a frontend such as GatsbyJS there is no reachable database or active web server to attack, meaning a smaller attack surface.

Flexibility

You can integrate WordPress managed websites into complex websites which can also combined content from other CMSs and web services, to create a flexible and powerful setup.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Related Services...