WP REST API Get Posts by Category using vanilla JavaScript

       Get Posts by Category using plain vanilla JavaScript and WP REST API is simple and could be done easily without using libraries and PHP code.

       In the previous post in the series for using of plain JavaScript "WordPress REST API- Get post with JavaScript" we have shown how can it be done by a simple way using the build-in WordPress endpoints. The next step to developing the complete WP REST API theme is extract the content of all posts from one category.

       Again we'll continue to the accepted already principle – we'll use WordPress as back-end Content Management System and we'll develop independently our own theme /front-end/.

       For back-end we'll use again WordPress 5.2.2, and standard theme Twenty Seventeen, that is installed in the domain of our colleagues from W3Design.mobi. We'll use the build-in endpoint, without any plugins or PHP code.

Retrieve Posts from Category using WP REST API, JSON and vanilla JavaScript

       The posts could be done from one category by this request to WordPress REST API:

GET /wp-json/wp/v2/posts/?categories=<id>

where <id> means category identifier ( ID ). In our case it will look like this:

https://earth-for-all.com/twentyseventeen/wp-json/wp/v2/posts/?categories=9

       Request–response will be returned as JSON (JavaScript Object Notation) file that will be easy for us to read and display.

       Enough theory! Let's develop a working example with WordPress REST API and vanilla JavaScript code that will extract the posts from a category and display them!

       We'll create a sample HTML page with two containers: section class="header-content" and section class="content". We'll visualize the category header into the first one and posts content into the second one. The file single-category.js is included in the end of the page. This file contain necessary JavaScript code.

       Now we'll use plain JavaScript code, that we'll put into single-category.js file.

       We'll declare the following variables:

       wpThemeURL – the path to WordPress Backend Theme, that initiate the post. In this case we use Twenty Seventeen;

       singleCatID – the category identifier ( ID ), the post that we want to extract and display.

       The rests of variables contributes to visualize the post. In our case we'll use category ID = 9, that has the name of "Travel to the islands".

Request to WordPress REST API using AJAX

       We'll use standard AJAX request, adding some rows ( window.ActiveXObject ....) to fulfill the request by the older versions of the so called “browser“ Internet Explorer.

       Here we'll use two requests. We'll extract general information for the category by the first one, the second one will extract the posts content.

       The first request to WP REST API will be done by the following way:

       The request to WP REST API is generated by

https://" + wpThemeURL + "/wp-json/wp/v2/categories/" + singleCatID + "?_embed"

and uses the built in the WordPress kernel endpoint. Assigning values to the variables, the result looks like:

https://earth-for-all.com/twentyseventeen/wp-json/wp/v2/categories/9?_embed

       API returns the following JSON file with the results from request:

       This is a plain JSON file, that could be easily read and displayed by few rows of vanilla JavaScript code. After request fulfillment, function grabCategoryFile calls the function parseCategoryResponse, that read the received file from WP REST API and desplay it to the screen:

       Let's write the code for the request that will extract the content of all posts from one category.

       The result from request – the JSON file will include the contents of all posts of the particular category (category with ID=9 and called "Travel to the islands"):

       It only remains to read this file and display it to screen.

Get Posts by Category using WP REST API - display the JSON file

       We'll do it by function parseCatPostsResponse, that contains the following code:

       If you look carefully the returned JSON file by the last request, you'll see that there is no direct link to the images included into the posts. That is why we need to make another request to WP REST API to extract them and show to the screen. For this reason, and not to delay the page loading, the mentioned-above script will load the posts content first and than will call the function getImage, that will extract and display the images from the posts. It contains the following code:

       The function getImage includes three functions that fulfill the same activities as the previous requests:

       - getImageHTTPObject and grabImageFile fulfills request to API and get the result (the returned JSON file);

       - parseImageResponse read the file and display images in the corresponding posts.

       You can see the live demo of this really working example here and the same information from the backend theme Twenty Seventeen here.

       That is. We hope that this working example is simple and clear for all with initial JavaScript knowledge. There is no need of WordPress plugins, JavaScript libraries or Frameworks or PHP code.

       This example is a part from Elf - WordPress REST API Starter Theme, that is a FREE theme developed under plain vanilla JavaScript code.

Have a good time and create useful and beautiful WordPress sites and applications with Elf - WP REST API Theme. Good luck!