What is Headless WordPress and who is it suitable for?

Headless WordPress is an advanced technology that combines the power of the WordPress system in managing websites and editing content with the capabilities of modern front-end technologies in customizing the way it is presented, whether through websites, smartphone applications, or other methods of delivering content to the public.

In this article, we will learn about WordPress without a interface in more detail, as we will explain how it works, and review its advantages and disadvantages. We will also provide a simple practical example to illustrate how to use it, and in the end, we will identify the cases in which it is appropriate to adopt this technology.

What is Headless WordPress?

By default, WordPress has two sides or interfaces, namely the backend and the frontend . The backend represents the control panel through which the site is managed and content is edited by the work team, and the frontend represents what visitors see when they visit the site.

In the Headless WordPress approach, the WordPress backend is used to manage the site and edit content only, and another technology different from WordPress is used to display content to visitors on the front end (or front-ends), such as JavaScript frameworks and libraries such as React, Next, and Angular. And Vue, the Gatsby technology used to create a static website.

How does WordPress work without an interface?

The WordPress headless system works based on the REST API (WordPress Application Programming Interface), where the REST API built into the system is used to transfer data from the WordPress backend to the front end developed with another technology.

The REST API represents a set of operations that allow communication with WordPress to fetch, update, remove, or create data. Rules are built based on these operations to connect the two interfaces together.

In the communication process between the two interfaces, a basic data format is used that provides raw data called JSON. For example, if the front end requests a specific publication from the back end, the latter responds as follows:

{

“id”: 123,

“date”: “2023-04-15T10:30:00”,

“title” : “post title” ,

“content” : “post content” ,

“author” : “author’s name” ,

“categories”: [

“Class 1” ,

“Class 2”

]

}

The front end receives this data and converts it into an HTML page ready to be displayed in the browser, adding the necessary designs and formatting based on the display technology used (React, for example).

Benefits and advantages of using Headless WordPress technology

The WordPress system without an interface has many features related to customization capabilities, speed, and security. It also makes it much easier to publish and manage content if the company has more than one platform (website – Android application – iOS application). Below we explain the most prominent features and benefits of this technology:

Greater customization potential : The frameworks and technologies that are used to design the front-end in WordPress without a front-end offer higher customization capabilities than those offered by WordPress, and therefore this technology can give you greater control over the design of your site than using traditional methods in WordPress (customizing the template through the customization tool Or through the full site editor, for example).
Better performance : Every time someone visits a traditional WordPress website, PHP and MySQL scripts are run and an HTML page is created to send to the visitor. This takes time and can put a heavy load on the server. If you use WordPress without an interface, the HTML page is almost ready, and is only filled with the required data from the database, and therefore not many PHP scripts are run, which is why the page is displayed faster.
Higher security : Because the front-end of WordPress websites is separate from the back-end, it will be difficult to access and hack your website’s database, and this adds an additional layer of protection to the site.
Publish content across multiple platforms : If you want to publish your content on multiple platforms such as smartphone applications, websites, social media platforms, and virtual assistants (such as Alexa), then Headless WordPress will be a suitable and effective option for you, as you can Connect all of these platforms to WordPress via the REST API, so that any new content or modifications to existing content are automatically published across all connected platforms, as soon as you publish or edit from the WordPress control panel.

It is worth noting that the previous benefits and features of WordPress without an interface are not all specific to it only, as the performance of the WordPress website can be improved and its security level raised, for example, in the traditional WordPress with two interfaces in other ways.

Disadvantages of using WordPress without an interface

Although WordPress without a interface sometimes offers many benefits to users, the way it is set up and how it works imposes disadvantages, including:

High cost : Creating a website based on Headless WordPress requires hiring professional developers to design the front end and connect it to the WordPress control panel, and this raises the cost of relying on it.
The need for programming experience : After setting up the site, you may not need any programming experience to publish, modify, and manage the content, but you will need programming experience or to hire a programmer in order to make any modification to the front-end design or to add any feature to it.
Requires more effort and time : Setting up a website based on this technology or making modifications to a site that uses it requires more effort and time because you will need to ensure that the two interfaces are compatible with each other due to the fact that they are not linked by default.
It does not work with all plugins : Not all WordPress plugins can access data through the Rest API, and these plugins will not work in WordPress without an interface, but many popular plugins support the Rest API, such as Rank Math , Yoast SEO , and Jetpack .

If you decide to rely on WordPress technology without an interface, we advise you to hire professional developers who are proficient in working on the technologies that you will rely on on your site. We advise you to hire professional developers from an independent site who are proficient in working with the technologies that you want to use to create your site. If you want to create a site that uses React for the front end, you hire a React developer, and if you want to create an Android application as a front end, you hire an Android application developer, and of course in addition to a WordPress developer who has Experience in dealing with it as a backend, and the same applies to the rest of the technologies depending on the complexity of your project.

How to use WordPress technology without a interface?

Here we will explain how Headless WordPress technology is used to create websites by reviewing a simple example of creating a web page that fetches article titles and some other data related to articles from the WordPress website and displays them within a web page of our design.

There are many front-end technologies that can be used to create the page and fetch data, but in order to simplify the example and the setup steps needed to get started, we will rely on the jQuery JavaScript library and the HTML and CSS languages , and you must have some programming experience in this library and languages to fully understand the example.

First we have a demo WordPress site that includes a collection of published articles.

This site broadcasts the data of the published articles in the form of a JSON file when you visit the link designated for that, which is (http://localhost/wpar11/wp-json/wp/v2/posts). This is a general default link for all WordPress sites, as all sites WordPress broadcasts this data when you visit it, just replace /localhost/wpar11 with the site’s domain name.

**Article data is in the form of a JSON file**

Note that Arabic text phrases appear in Unicode, but will appear as they appear when inserted into a web page.

What we will do is create a jQuery code that will ask WordPress for this data shown in the JSON file, and display it what we want in the way we want it. To do this, we will first create an almost blank web page using HTML, where articles will later be added within <div id=”posts”></div> via jQuery code that we will write within the <script></script> tag .

<!DOCTYPE html>

<html lang=“ar”>

<head>

<meta charset=“UTF-8”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

< !–Page title– >

<title>WordPress Posts</title>

< !–Include jQuery library– >

<script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script>

</head>

< !–beginning of page body– >

<body>

< !–An empty element that will be used to display posts– >

<div id=“posts”></div>

<script>

// jQuery code will be written here

</script>

</body>

</html>

We will now write a jQuery code that fetches some article data (article title – article featured image – article excerpt – author name), and displays it within the page.

$ ( document ) . ready ( function () { // Wait for the page to complete loading before executing the code

// Store the JSON data link in a variable

var siteUrl = “http://localhost/wpar11/wp-json/wp/v2/posts”;

// Call the REST API to fetch posts

$.get(siteUrl, function(posts) {

posts.forEach(function(post) {

var postHtml = ‘<div class=”post”>’ ; // Create an HTML string to store the post content

// Post title

postHtml += ‘<h2>’ + post.title.rendered + ‘</h2>’;

// Post image

if (post.featured_media && post._links[“wp:featuredmedia”] && post._links[“wp:featuredmedia”][0]) {

$.get(post._links[“wp:featuredmedia”][0].href, function(media) {

postHtml += ‘<img src=”‘ + media. source_url + ‘” alt=”‘ + media. alt_text + ‘”>’ ; // Add the main image of the post to the HTML string

});

}

// Post excerpt

postHtml += ‘<p>’ + post.excerpt.rendered + ‘</p>’;

// The name of the post author

$.get(post._links[“author”][0].href, function(author) {

postHtml += ‘<p lang=”en”>By ‘ + author. name + ‘</p>’ ; // Add the author’s name to the HTML string

postHtml += ‘</div>’ ; // Close the div element of the post

$ ( “#posts” ) . append ( postHtml ) ; // Add the HTML string containing the post data to the element with ID “posts” on the web page

});

Now we put the previous code between <script> and </script> in the first code, so we get one code. We put the code in the HTML file, open the file using the browser, and notice that the data appears on the page.

**Article data appeared on the web page**

As you can see, the page design is bad, and this is because we did not add formatting codes to the elements. The page design can be enhanced by the front-end technology that is adopted or by any design techniques that go with it. In our case, for example, we can use CSS code within the web page itself to improve the design, as the following code can be added within the <head></head> tag .

<style>

body {

background-color: #f2f2f2;

font-family: Arial, sans-serif;

text-align: center;

}

.post {

background-color: #fff;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

padding: 20px;

margin: 20px auto;

max-width: 600px;

text-align: right;

display: flex;

flex-direction: column;

align-items: center;

}

h2 {

color: #333;

font-size: 24px;

margin-bottom: 10px;

}

p {

color: #555;

line-height: 1.5;

margin-bottom: 15px;

}

.post img {

max-width: 100%;

height: auto;

object-fit: cover;

border: 1px solid #ddd;

border-radius: 5px;

margin-bottom: 10px;

}

.post p:last-child {

color: #888;

font-size: 14px;

}

</style>

This improves the page design a little.

Note that when you change the domain of the site in the JQuery code, the articles that appear on the page will be changed, as data will be fetched from the domain mentioned in the code. For example, when changing a part:

var siteUrl = “http://localhost/wpar11/wp-json/wp/v2/posts”;

var siteUrl = “https://www.ar-wp.com/wp-json/wp/v2/posts”;

Arab WordPress articles appear on the web page, because we have included a link to the Arab WordPress website.

**Arab WordPress website articles appear after changing the domain of the site that is communicated with through the Rest API**

Also, if new articles are added to the site, existing articles are deleted, or any modifications are made to the content, the web page will be updated to comply with these changes.

Front-end WordPress websites are based on exactly this idea, where when additions or modifications are made through the WordPress back-end, the changes appear to the visitor in the front-end (web page) that was created using another technology different from WordPress (in our case JQuery), and the front-end is created Completely in the same way as we showed in this example, several different front-ends can be created.

Who is this technology suitable for?

Using Headless WordPress requires designing the front-end of the site in a programmatic way, which costs more money and more time, but it provides more customization options and allows managing multiple platforms at the same time from one control panel, which is the backend of WordPress.

Therefore, using this technology is a suitable option in projects that have a large budget, and need to custom design the front end using a technology different from WordPress that the project team is proficient in working on, or in the event that there is a need to have several platforms on which the same content can be published.

Using WordPress without an interface is not suitable for small blogs or websites with a limited budget, nor is it appropriate to use this technology for the purpose of speeding up the site or improving its security, because there are other effective, easier ways to improve these aspects of traditional WordPress.