Integrate WordPress API to display posts to an HTML website using JavaScript

A WordPress site can be used to store posts for your HTML website. Post can be managed like a regular WP site from WP backend. You will need to add some JavaScript to load the posts from the WP site and display them onto your site. You can find more info from the WordPress developer site. https://developer.wordpress.org/rest-api/reference/posts/

You can make a GET request in JS using fetch() to get a list of posts. You can track page and post per page with get parameters ‘page’ and ‘per_page’ respectively. Your site URL will replace example.com.

function getPosts(page, perPage) {
fetch('https://example.com/wp-json/wp/v2/posts&page=${page}&per_page=${perPage}')
.then(response => {
const contentType = response.headers.get('Content-Type');
if (contentType && contentType.includes('application/json')) {
return response.json();
}
throw new TypeError('The format is not JSON.');
})
.then(posts => {
// Display posts to your site.
})
.catch(error => {
console.error('Error', error);
});
}

The response will be in JSON similar to the following.

[
  {
    "id": 10,
    "slug": "example-page-slug",
    "title": { "rendered": "Example title" },
    "content": {
      "rendered": "Example content",
      "protected": false
    },
    ...
  },
  ...
]

To load an individual post you can use the ID you have from the post or you can also use the post slug.

function getPost(id) {
  fetch('https://example.com/wp-json/wp/v2/posts/${id}')
    .then(response => {
      const contentType = response.headers.get('Content-Type');
      if (contentType && contentType.includes('application/json')) {
        return response.json();
      }
      throw new TypeError('The format is not JSON.');
    })
    .then(post => {
      // Load post information into your page.
    })
    .catch(error => {
      console.error('Error', error);
    });
}

To load a post by post slug you can use the GET parameter ‘slug’.

https://example.com/wp-json/wp/v2/posts?slug=${pageSlug}

Posts can also be filtered further with categories and tags. You can get a list of categories by making a GET request. Categories and tags can

https://example.com/wp-json/wp/v2/categories

Similarly a list of tags can be retrieved.

https://example.com/wp-json/wp/v2/tags

Data from tags and categories will return an id, name, slug, count among other things.

[
  {
    "id": 15,
    "count": 1,
    "description": "",
    "name": "Example category",
    "slug": "example-category",
    "taxonomy": "category",
    "parent": 0,
    ...
  },
  ...
]

To filter posts by categories and tags. An additional get parameter can be added to the posts GET request.

https://example.com/wp-json/wp/v2/posts?categories=${postCategories}&tags=${postTags}

Multiple categories and tags can be used separated with a “,” this will return posts in any of the listed categories/tags.
Using WordPress to store and manage posts can be a convenient way to add posts to your website.