WordPress is one of the most popular Content Management Systems. A CMS helps businesses to manage all their content and WordPress has been amazing with that. Off late, there has been a trend of decoupling the backend and frontend of a website through headless CMS. It is especially very good practice for the companies to integrate better UX in their web applications. 

WordPress has a market share of more than 60.8% in the CMS market. So, it is easily the leader of content management of websites on the internet today. But, before the concept of headless CMS emerged, most websites needed to code extensively to reflect the change in data at the front-end into the modules of the backend. 

A headless CMS can help you keep the representation and database separate. Once, you achieve that you can choose different front-end technologies like Angular, React, and others for the greater user interface. Here, we are going to explore an integration of front-end Angular with a headless WordPress. But, before we go with the integrations, let’s get to know headless CMS and its benefits. 

Read More: WordPress vs Custom CMS: Choose the best solution for your Content Management System

What is Headless CMS? 

A headless CMS is like a library without the librarian. It means that you will have only an admin interface between the representation and the backend. This admin is accessible to all the content contributions.

For example,  a guest blogging forum, allows all its guest contributors to post their blogs, edit snippets, descriptions, metadata, add images and even have a preview of the entire article. They are given specific rights to the CMS. But they do not have access to the view part and it’s controlled by the admin. 

There is no front-end and that is why it is called headless. If your project is based on such logic, Angular can help you cover the view part. 

How to create a Headless WordPress?

If you want to create a Headless CMS with WordPress, a static copy of the website should be created. You can use any provider in the market. For example, you can use Amazon Web Services for creating a static copy of WordPress.

AWS can provide you static hosting service at a low cost of almost $0.50 per month. You need to choose the object storage service from the AWS catalogue for your website. You can simply signup through an existing Amazon account or create a new one.

Next, you will need to have WordPress installed for creating a static environment. If you are creating a static website with WordPress, the use of a localized site to avoid double hosting cost. You have to create static content for the front-end representations. It is a part that we will cover in the Angular part. 

There are many ways for you to create a localized WordPress website. You can use a XAMPP for the WordPress installation locally. But, you will need to have MySQL, and PHP knowledge. 

Another way is to use WordPress Development tools that can help with localization on your PC. One such tool is MAMP (MySQL, Apache, macOS, PHP) environment that can instantly provide a static website on a MAC. 

You can even integrate swift with the website and create web-apps with features like Social login. Everything works in complete synchronization. While there are other tools like Local that don’t need macOS as a prerequisite. 

Here, you can use plugins already available on WordPress for static websites like WP2Static or create a custom plugin through a WordPress Development Company. Once you are ready with all the customizations, and plugin installed, you will need to access the plugin tab on your dashboard and deploy the static website. 

Next, you need to create a destination URL for all your visitors. The dashboard will ask you to select the hosting provider, which in our case is AWS. 

Once you do that, you will have to link the site with AWS through access ID, secret access keys, and region from where you are deploying the website. After punching in all the keys, just click on the start button at the bottom for exporting the static website. 

Now, we are ready with a Headless WordPress! But, what if you need dynamic content for your website? That is why we are going to integrate the Angular!

Angular Integration with Headless WordPress:

There are two ways to integrate Angular into your headless WordPress. One is by installing WordPress directly into the Angular application. Another is installing WordPress outside the applications and then integrated through an API or Application Programming Interface. 

Here, we are going to use the second method. We already have a Headless WordPress website ready. So, the next thing is to integrate the Angular application API.  For this integration, you will need to have a REST API plugin installed to extract the JSON data. Once you install the plugin, you can extract the JSON data like this. 

http://softaox.info/wp-json/wp/v2/posts?_embed

The above URL presents an example of a simple post you can display using Angular and Headless WordPress.  Before you get on with the display of the post through the contents of the WordPress website, you will need to install the Angular app, Considering the same example for a post display, let’s see how you can implement the front-end of your website. 

Step-1:  

You need to access the app.module.ts and import a module called, HttpClientModule.

import { BrowserModule } from ‘@angular/platform-browser’;

import { NgModule } from ‘@angular/core’;

import { HttpClientModule } from ‘@angular/common/http’;

import { AppRoutingModule } from ‘./app-routing.module’;

import { AppComponent } from ‘./app.component’;

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Step-2:

Once you imported modules, you need to declare the post variable and retrieve data from the destination URL created in the static WordPress website. Here, is an example of the code for process.

import { Component, OnInit } from ‘@angular/core’;

import { HttpClient } from ‘@angular/common/http’;

@Component({

  selector: ‘app-root’,

  templateUrl: ‘./app.component.html’,

  styleUrls: [‘./app.component.css’]

})

export class AppComponent implements OnInit {

  posts = [];

  constructor(private http: HttpClient){}

  ngOnInit(): void{

    this.http.get(‘http://localhost/project/admin/wp-json/wp/v2/posts?_embed’).subscribe(data =>{

      for(let key in data){

        if(data.hasOwnProperty(key)){

          this.posts.push(data[key]);

        }

      }

      console.log(this.posts);

    })

  }

}

Step-3:

Now that you have declared the post variables, you can display the post on a loop with ul > li tags. This is just an example, but, you can create features like post image, videos, text, and even blogs. It can be completely a user-generated content platform with Headless CMS at its core. 

<ul>

  <li *ngFor=”let post of posts”>

  <h1>{{post.title.rendered}}</h1>

    <p>Posted on: {{post.date | date:’longDate’}}</p>

      <img src=”{{ post._embedded[‘wp:featuredmedia’][‘0’].media_details.sizes.thumbnail.source_url }}”>

      <p [innerHTML]=’post.excerpt.rendered’></p>

  </li>

</ul>

Conclusion:

The rapid growing content paradigm needs more advanced approaches to create a seamless experience. Here, we have tried to give you a practical approach towards the creation of a static website through the Headless WordPress as a backend and created a view representation through Angular for the front-end deployment. This is especially good practice for businesses that rely on the scalable user-generated content. They can scale better, and handle multiple postings at the same time. 

So, if you are looking for a scalable, and flexible solution through the integration of Angular with the Headless WordPress, then get in touch with us for a free consultation!