How to Integrate a WordPress Blog into a Static Site

You have a fast, modern static website, but you want the powerful content management capabilities of WordPress for your blog. The great news is you can have both! By using the WordPress REST API, you can use WordPress as a "headless CMS" and pull your blog posts into any website, including this one.

What is the WordPress REST API?

The REST API provides a way for other systems (like our static HTML site) to interact with your WordPress site by sending and receiving data as JSON (JavaScript Object Notation). By default, WordPress makes all your public content like posts, pages, and comments available via the API.

You can access it by adding /wp-json/wp/v2/ to your WordPress site's URL. For example, to get posts, the endpoint is https://your-wp-site.com/wp-json/wp/v2/posts.

Live Demonstration

Below is a live example that fetches the 3 most recent posts from a public WordPress demo site and displays them on this page using JavaScript.

How It Works (The Code)

The following JavaScript code fetches the data and injects it into the page. You would place this in your script.js file or a dedicated blog script.

const postsContainer = document.getElementById('blog-posts-container');
const wpApiUrl = 'https://live.static-press.com/wp-json/wp/v2/posts?_embed&per_page=3';

async function fetchPosts() {
  try {
    const response = await fetch(wpApiUrl);
    if (!response.ok) throw new Error('Network response was not ok');
    const posts = await response.json();
    
    postsContainer.innerHTML = ''; // Clear loading message
    
    posts.forEach(post => {
      const postElement = document.createElement('div');
      postElement.className = 'border-b border-sky-200 pb-8';
      postElement.innerHTML = `
        

          ${post.title.rendered}
        
        
${post.excerpt.rendered}
      `;
      postsContainer.appendChild(postElement);
    });
  } catch (error) {
    postsContainer.innerHTML = '<p class="text-red-500">Failed to load blog posts. Please try again later.</p>';
    console.error('Error fetching WordPress posts:', error);
  }
}

fetchPosts();