Get page content using ECMAScript & WP REST API

       Get a page content using ECMAScript & WP REST API can be easily done. No JavaScript libraries, frameworks or PHP code required. This is possible because ECMAScript ( and more precisely ES6 ) has many new opportunities that we can use.

       Built into the core of WordPress ver. 4.7. endpoints are improved and enriched in each subsequent version and make REST API more usable and popular. The JSON (JavaScript Object Notation) file returned as a result of the request to REST API contains more and more rich and detailed information that can be easily read and displayed.

       This creates an incredible opportunity - WordPress to be used only as a Headless Content Management System (CMS) and to completely separate the front end, using the WordPress REST API to extract information from databases.

       One of the previous posts showed how to Get a page content using Vanilla JavaScript and WP REST API. We will now do this using the new features of ECMAScript (ES6).

       Let's develop a working example that will Get a page content using ECMAScript & WP REST API and display it!

       We'll use WordPress as a Headless Content Management System and we'll develop independently our own theme /front-end/. For the back-end, we'll use WordPress 5.5.1, and standard theme Twenty Seventeen, that is installed in the domain of our colleagues from W3Design.mobi.

       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-ECMA.js is included in the end of the page. This file contain necessary ECMAScript code.

Retrieve the content of a page using WP REST API & 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 ). We'll use page ID = 2, that has the name of "Sample Page". In our case it will look like this:

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

       If you launch this link in your browser, you will receive the answer as a JSON file. The returned JSON file is the result of the request:

Using ECMAScript Fetch API and WordPress REST API

       We explained how the Fetch API works in one of the previous posts Get Post using ECMAScript - WP REST API. Now we'll use Vanilla ECMAScript code, that we'll put into get-page-ECMA.js file.

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

       Fetch API provides a more powerful and flexible feature set, but browsers have started to add experimental support for it soon. Which browsers support Fetch APIs and to what extent you can view the MDN web docs.

       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 PHP code.

       The example above is included in the new version of Elf - WordPress REST API Starter Theme, which is being developed using ECMAScript. The working version of the theme, created through plain Vanilla JavaScript code, can be viewed live and downloaded free here:

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