{"id":56233,"date":"2020-07-15T10:32:07","date_gmt":"2020-07-15T15:32:07","guid":{"rendered":"https:\/\/blog.cpanel.com\/?p=56233"},"modified":"2020-07-15T10:32:07","modified_gmt":"2020-07-15T15:32:07","slug":"how-to-use-wordpress-as-a-headless-cms","status":"publish","type":"post","link":"https:\/\/devel.www.cpanel.net\/blog\/tips-and-tricks\/how-to-use-wordpress-as-a-headless-cms\/","title":{"rendered":"How To Use WordPress as a Headless CMS"},"content":{"rendered":"\n

Headless WordPress is a new and increasingly popular way to build web apps that combine WordPress\u2019s peerless content management with the power and flexibility of JavaScript front-end interfaces. Many developers, including WordPress creator Matt Mullenweg<\/a>, see headless as the future of web app development. <\/p>\n\n\n\n

We\u2019re going to take a closer look at what headless WordPress is, how to use a headless content management system, and why you\u2019d want to. But first, let\u2019s talk about how a traditional WordPress site works and how headless WordPress is different.<\/p>\n\n\n\n

Headless WordPress<\/strong><\/h2>\n\n\n\n

When you load a page on a WordPress site, the server runs code that builds an HTML document. That document is then sent to your browser. That\u2019s why WordPress and web apps that work in the same way are called server-side apps.<\/p>\n\n\n\n

Headless WordPress is a different way of building web apps, sometimes called decoupled or client-side development. As you might have guessed from the name, the app\u2019s interface is created and managed in the client\u2014usually a browser, and not on the server. More accurately, a JavaScript application running in the browser creates the interface with content retrieved from WordPress.<\/p>\n\n\n\n

WordPress\u2019s head, its PHP-based front-end interface, is bypassed in a somewhat gruesome metaphor, leaving the body (the CMS itself) on the server, controlled remotely by an external app.<\/p>\n\n\n\n

How Does A Headless CMS Work?<\/strong><\/h2>\n\n\n\n

A client-side web app and a server-side content management system need a way to talk to each other. That\u2019s the API\u2019s role, which gives this approach to app development yet another name: API-driven development.<\/p>\n\n\n\n

An API is an Application Programming Interface, a standardized way for two pieces of software to talk to each other. When an application needs to ask for information or tell other software what to do, it communicates via an API.<\/p>\n\n\n\n

WordPress has a REST API, a type of web-based API that allows the software to talk to it over the internet using HTTP web addresses called endpoints. Endpoints look just like the web addresses we use every day to visit websites, and they accept various types of request: GET requests to retrieve information, POST requests to submit information, and so on.<\/p>\n\n\n\n

For example, WordPress has a \u201cposts\u201d endpoint that looks like this:<\/p>\n\n\n\n

https:\/\/example.com\/wp-json\/wp\/v2\/posts<\/em><\/p>\n\n\n\n

When software sends a GET request to a WordPress site\u2019s \u201cposts\u201d endpoint, it returns a list of posts and related information. If the request includes a post ID, it returns the contents of the specified post. We can also use this endpoint to tell the CMS to create a new blog by sending an HTTP POST request with information such as the title and body text.<\/p>\n\n\n\n

The API allows any compatible software to communicate with WordPress, acting as the headless back-end of a combined client-server system. To complete the partnership, we also need a front-end, the client-side app that runs in the browser. These apps are often called Progressive Web Apps, or PWAs, and we\u2019ll look at how they work in the next section.<\/p>\n\n\n\n

What is a Progressive Web App?<\/strong><\/h2>\n\n\n\n

WordPress was first released in 2003. Back then, apps had to live on the server because browsers couldn\u2019t run complex interactive applications. JavaScript, the only programming language that runs natively in web browsers, was far less capable than server-side languages like PHP.<\/p>\n\n\n\n

Over time, browsers, the web, and JavaScript evolved. Today, JavaScript is as capable as other programming languages, and browsers are packed with sophisticated features web developers use to build rich applications like Google Docs.<\/p>\n\n\n\n

Progressive Web Apps: a term coined by Google, are JavaScript apps that provide a native app-like experience.<\/p>\n\n\n\n

Unlike server-side applications, PWAs can:<\/p>\n\n\n\n