How to Use WordPress as a Headless CMS with a Modern Frontend

Modern web development is all about performance, scalability, and flexibility. One way to achieve all three is by using WordPress as a headless CMS—leveraging its powerful admin interface while building your frontend using modern tools like Next.js, React, or Vue.

In this guide, we’ll walk through how to run WordPress on a subdomain (e.g., cms.yoursite.com) and use it strictly as a backend, powering a fast, modern frontend hosted elsewhere.

🧩 Why Headless WordPress?

Using WordPress as a backend-only CMS (aka “headless”) gives you:

• Blazing-fast frontends (built with frameworks like Next.js or Nuxt)
• More control over design and layout
• Easier integration with apps, services, or multiple frontends (web + mobile)
• Improved scalability and deployment options (e.g., Vercel, Netlify)

🛠️ Step-by-Step Guide

1. 🔧 Install WordPress on a Subdomain

• Set up a subdomain like cms.yoursite.com from your hosting control panel.
• Install WordPress there, just like a normal WordPress install.
• This will be your content backend.

Use a lightweight theme (or even a blank one) since you won’t be using the frontend.

2. 🚫 Disable or Hide the Frontend

You’re not going to use WordPress to display pages, so do one of the following:

Option A: Use a Blank Theme

• Create or install a minimal theme that returns nothing.
• Example index.php:

    
         echo "Headless WordPress API only.";
    

Option B: Password Protect Frontend or Use Plugin

Plugins like Headless Mode or Disable Frontend can redirect all frontend requests except /wp-admin and /wp-json.

3. 🔓 Enable the API

WordPress includes the REST API out of the box:

• Posts: https://cms.yoursite.com/wp-json/wp/v2/posts
• Pages: https://cms.yoursite.com/wp-json/wp/v2/pages

Optional (and better): install WPGraphQL for a flexible GraphQL endpoint:

• GraphQL: https://cms.yoursite.com/graphql

4. 🌐 Build Your Frontend on a desired Domain

Now build your frontend app (e.g., with Next.js) and host it on your main domain:

www.yoursite.com

  
async function getPosts() {
  const res = await fetch('https://cms.yoursite.com/wp-json/wp/v2/posts', {
    next: { revalidate: 60 }, // Revalidate every 60 seconds
  });

  if (!res.ok) {
    throw new Error('Failed to fetch posts');
  }

  return res.json();
}

export default async function HomePage() {
  const posts = await getPosts();

  return (
    <main style={{ maxWidth: '600px', margin: '0 auto', padding: '2rem' }}>
  <h1 style={{ fontSize: '2rem', marginBottom: '1.5rem' }}>Latest Blog Posts</h1>
  <ul style={{ listStyle: 'none', padding: 0 }}>
    {posts.map((post) => (
      <li key={post.id} style={{ marginBottom: '2rem', borderBottom: '1px solid #ccc', paddingBottom: '1rem' }}>
        <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
        <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
      </li>
    ))}
  </ul>
</main>
  );
}
  

✅ What This Does:

• Uses Next.js App Router (the new app/ directory structure).
• Fetches all posts from your WP REST API.
• Displays post titles and excerpts.
• Uses Incremental Static Regeneration with revalidate set to 60 seconds.

🧪 Next Steps (Optional):

• Add a detail page: app/blog/[slug]/page.js
• Connect WPGraphQL for more control
• Style with TailwindCSS or any UI library

✍️ Conclusion

Using WordPress as a headless CMS with a modern frontend like React or Next.js gives you the best of both worlds — powerful content management and cutting-edge performance. Whether you’re building a blog, marketing site, or something custom, this setup offers unmatched flexibility and speed.

Need help setting up your own headless WordPress project?

Feel free to reach out — I’d be happy to help you connect WordPress to a fast, modern frontend that fits your goals.