Get posts from a tag using Vanilla JavaScript - WP REST API

       Get posts from a tag using vanilla JavaScript and WordPress REST API is simple and could be done easily without using libraries and PHP code.

       In one of the previous posts in the series for using of plain JavaScript WP REST API Get Posts by Category using vanilla 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 tag.

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

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

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

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

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

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

       Request–response will be returned as JSON file that will be easy for us to read and display.

       First we need of a HTML page with two containers: section class="header-content" and section class="content". We’ll visualize the tag header into the first one and posts content into the second one. The file get-tag-posts.js is included in the end of the page. This file contain pure Vanilla JavaScript code.

Get a Tag content using AJAX and pure JavaScript

        Now we’ll use Pure JavaScript and begin to code the pull request for the content that has been created by WordPress. We’ll declare the following variables into the get-tag-posts.js file:

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

tagFile – the tag identifier ( ID ), whose posts we want to extract and display.

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

       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 tag 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:

       WordPress REST 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 parseSingleTagResponse, that read the received JSON file and desplay it to the screen:

Get Posts from Tag using WP REST API, AJAX and vanilla JavaScript

       Now let's write the code for the request that will extract the content of all posts from one tag.

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

       It only remains to read this file and display it to screen. We'll do it by function parseTagResponse, that contains the following code:

       We hope that this working example is clear for all with initial JavaScript and HTML5 knowledge. There is no need of WordPress REST API plugins and JavaScript libraries or frameworks.

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

       This example is a part from Elf - WordPress REST API Starter Theme, which has a FREE version developed using pure vanilla JavaScript code.

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