Get a page content using Vanilla JavaScript - WP REST API

       Extracting the content of a single page created by the WordPress back-end theme can be done via vanilla JavaScript. No JavaScript libraries, frameworks or PHP code required.

       This is possible because WordPress has a built-in endpoint that can be accessed through the REST API. Request–response will be returned as JSON (JavaScript Object Notation) file that will be easy for us to read and display.

       Let's develop a working example with WordPress REST API and vanilla JavaScript code that will get the content from a WordPress page and display it!

       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 earth-for-all.com.

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

WP REST API - Get a page content using vanilla JavaScript, AJAX and JSON

       The standard way to access pages through the WordPress REST API is:

GET /wp-json/wp/v2/pages/<id>?_embed

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

https://earth-for-all.com/twentyseventeen/wp-json/wp/v2/pages/2?_embed

       Now we'll use plain Vanilla JavaScript code, that we'll put into get-page.js file.

       We'll declare the following variables:

       wpThemeURL – the path to WordPress Backend Theme, that initiate the page

       pageFile – the page identifier ( ID ), the page that we want to extract and display.

       The rests of variables contributes to visualize the page. In our case we'll use page ID = 2, that has the name of "Sample Page".

       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.

       The returned JSON file is the result of the request:

       Once received the JSON file, function grabPageFile calls the function parsePageResponse, that read the received JSON file from WordPress REST API and desplay it to the screen.

Get a page content using Vanilla JavaScript - Reading of the JSON file and displaying the page content

       Function parsePageResponse 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 example is part of 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!