Get Categories with Vanilla JavaScript- WP REST API
Get Categories with Vanilla JavaScript using WordPress REST API is not difficult and could be done without using JavaScript libraries, frameworks or PHP code. The Endpoint that is built into WordPress core allow remote interaction, send request and get response from it as JSON (JavaScript Object Notation) file.
In this working example we will use this opportunity to list all categories without using WordPress plugins or PHP code.
Categories entered in WordPress can be retrieved by this request to the WordPress REST API:
GET /wp-json/wp/v2/categories
The recently declared 10 categories will be returned. If we want to show only 5 of them we will have to use per_page = 5 as follows:
GET /wp-json/wp/v2/categories?per_page=5
We'll continue to the accepted already principle- we'll use WordPress as back-end Content Management System only and we'll develop independently our own front-end theme. For back-end we'll use WordPress 5.2.2, and standard theme Twenty Seventeen, that is installed in https://W3Design.mobi.
We need of a simple HTML page with one container: section class="content". We will display the categories in it:
The file get-all-categories.js is included in the end of the page. This file contain necessary pure Vanilla JavaScript code.
Get Categories with JavaScript using WP REST API and AJAX
Let's write the code for the request that will retrieve all categories declared by the backend WordPress theme. We'll use standard AJAX request to the REST API endpoint ( with addition of several rows / window.ActiveXObject .... / that allow it to be executed by older versions of Internet Explorer) :
The wpThemeURL variable indicates the URL of the WordPress backend theme. Assigning value to the variable, the exact WP REST API reques looks like:
https://earth-for-all.com/twentyseventeen/wp-json/wp/v2/categories
The result from request- the JSON file will include all declared categories:
To get categories with vanilla JavaScript all you have to do is read this file and display it on the screen.
Get Categories using WordPress REST API and JSON
Once received the JSON file, function grabAllCat calls the function parseAllCatResponse, that read the file and desplay it to the screen. This function contains the following code:
You can see the live demo of this really working example here and the same information from the backend theme Twenty Seventeen here.
This is in general terms. We hope this working example is simple and straightforward for anyone with basic HTML5 and JavaScript knowledge.
This example is a part from Elf - WordPress REST API Starter Theme, which has a FREE version developed using pure vanilla JavaScript code.
Look at the Elf - WP REST API Theme DEMO ! Download FREE VERSION of Elf-WP REST API Theme !Have a good time and create useful and beautiful WordPress sites and applications with Elf - WP REST API Theme. Good luck!