Using Wordpress Restful API

Wordpress RESTFul API tutorial

Wordpress is arguably the most widely used content management software (CMS) available. It allows novice users the ability to create fully functionally websites or blogs without the need to engage a web developer.

Customization of Wordpress requires some knowledge of PHP, the language powering Wordpress and this to some may add an additional set of complexity on top of learning HTML, CSS and JavaScript.

Fortunately, Wordpress has now included a RESTFul API for those dreading to learn how to customize the CMS. As the website states:

“The WordPress REST API makes it easier than ever to use WordPress in new and exciting ways, such as creating Single Page Applications on top of WordPress.”

I’ve been experimenting with idea of using front end frameworks such as Angular to consume endpoints exposed by the new Wordpress RESTFul API . Wordpress would now become a content management admin while Angular handles the presentation and front end logic to the user. This is a true example of separating concerns in a web application.

Let us create a simple project that will demonstrate how we use RESTFul API provided by Wordpress. The project will focus on displaying a list of our posts. There are other endpoints which you can explore here, but for the sake of simplicity, we will only focus on simply displaying our posts.

Using the command line, copy the below to create a project folder called wp-restful-app.

$ mkdir wp-restfull-app && cd wp-restful-app && mkdir api/

The command will also create an api folder in which our Wordpress installation will reside.

Once the folders are successfully created, we now proceed to install Wordpress. This link provides the necessary steps in successfully installing Wordpress on a Linux:

https://www.howtoforge.com/how-to-install-wordpress-on-ubuntu-14.04-lamp.

Whilst the instructions specify installing Wordpress in the var/www/html folder, we will be following the instructions to install Wordpress in the api folder.

After installation, you can create a view posts. If your not familiar with creating posts in Wordpress, you can follow this useful article https://codex.wordpress.org/Writing_Posts

Its now time to build out our front end to consume the RESTFul API. We will be creating in the root of our project folder an index.html file. Copy and paste the following code:

<!DOCTYPE html>
<html>
 <head>
 <meta charset=”utf-8">
 <title>Wordpress Restful API</title>
 <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script>
 $.ajax({
 url:’/api/?rest_route=/wp/v2/posts'
 }).done(function(posts){
 var list = ‘’, 
 len = posts.length,
 i = 0,
 el = document.getElementById(‘posts’)
 for(; i < len; i++){
 list += ‘<a href=’ + posts[i].link + ‘>’ + posts[i].title.rendered + ‘</a><br />’
 }
 el.innerHTML = list
 })
 </script>
 </head>
 <body>
 <h1>Posts</h1>
 <div id=”posts”></div>
 </body>
</html>

Not too complicated is it? Let me walk you through the above code. We are using JQuery’s AJAX function to get the posts from Wordpress. The url specifies the endpoint corresponding to the resource or posts available to us. Based on our example, we are interested in getting our posts from Wordpress, hence the inclusion of posts in the url. There is another url that can be utilized to consume resources exposed by the API, however, it involves further configuration outside the scope of this tutorial.

To run the project, we will be using PHP’s built in web server. To run the application on port 3000, type the following command in the root folder of the application:

$ php -S localhost:3000

After the AJAX call is complete, we now display the posts to the user. We achieve this by:

  1. Getting the container of the posts on the webpage. This is taken care of by the this statement el = document.getElementById('posts')
  2. Creating a list of anchor tags representing each post by iterating over the list of posts returned from our Wordpress API. This is achieved by the following code snippet

for(:i<len;i++){

list += '<a href=' + posts[i].link + '>' + posts[i].title.rendered + '</a><br />

}

Finally we add the newly created list of posts to the container of posts by assigning the list variable to the innerHTML of the post container which was stored in the el variable.

After all instructions have been carried out, you should see a list of your posts similar to the image below by navigating to your favorite browser and typing into the address bar localhost:3000

List of posts from Wordpress RESTful API

If there are no errors, you have now successfully used the new Wordpress RESTFul API. Please feel free to comment if you have any issues with the instructions. Happy coding!