Creating a static HTML page to access the WordPress REST API and pull in the article titles without requiring PHP or any other language engine.
In our previous post “Scalable WordPress for the masses” I explained how to set up a WordPress instance with Docker.
In this article, I’m going to describe how I created a simple HTML page that would list the articles posted on my WordPress site using the REST API of WordPress.
A big shout out to Mr. Cal Evans for writing the book “How to Start Using the WordPress REST API“, generously provided for free by SiteGround. This book gave me lots of insights I used to make WordPress truely scalable.
Create a static HTML page
I’m not much of a designer, so please don’t judge me on lacking any form of design on the website. In general, I put a single index.html page up with the following contents.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<meta charset=UTF-8">
<title></title>
</head>
<body>
<h1></h1>
<h2></h2>
<h3>Latest posts</h3>
<div id="latest-posts"></div>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="application/javascript">
$(function () {
var backendUri = "http://localhost:8000/wp-json";
$.getJSON(backendUri, function (data) {
$("title").html(data.name);
$("h1").html(data.name);
$("h2").html(data.description);
});
$.getJSON(backendUri + "/wp/v2/posts", function (posts) {
var postElement = $("#latest-posts");
var postList = $("<ul/>");
$.each(posts, function (i) {
var postItem = $("<li/>");
var postText = $("<b/>").text(posts[i].title.rendered).appendTo(postItem);
$(postItem).appendTo(postList);
console.log(postItem);
});
$(postList).show();
$(postList).appendTo(postElement);
console.log(postElement);
});
});
</script>
</body>This page will fetch the title and description from my WordPress site and will iterate over the articles posted, all using the REST API.
In my next article I’m going to secure and control the interaction between my static HTML frontend and my WordPress backend.
