logo
UMARSINDHU
BloggingWeb Development

How I Integrate WordPress with React to Power My Blog

June 1, 2025
Umar Sindhu
4 min read
How I Integrate WordPress with React to Power My Blog

When I launched umar.press, I wanted the speed, freedom, and interactivity of React—without losing the SEO and content-editing benefits of WordPress.

The solution? A hybrid setup: React on the frontend + WordPress as a headless CMS powered by the REST API.

This post is a breakdown of how I integrated the two, optimized performance, and kept the blog both developer-friendly and Google-friendly.

⚙️ Why Not Use WordPress Directly?

WordPress is still a powerful platform. But for developers building highly customized frontends, its traditional theme structure can feel limiting.

Here’s why I decoupled the frontend:

  • Full control over layout & performance

  • React-based routing & components

  • Faster load times using static + client-side hydration

  • Better dev experience (hooks, state, animations)

“Think of WordPress as the content engine, and React as the display vehicle.”

🔄 The Basic Architecture

WordPress (Backend) → REST API → React Frontend → Deployed on Vercel

Breakdown:

  • WordPress: Self-hosted, with only the admin panel visible.

  • REST API: Exposes all content—posts, pages, categories, SEO metadata.

  • React App: Built using Vite or Create React App, consuming JSON from WP API.

  • Deployment: Hosted on Vercel for instant deploys and caching.

📦 WordPress Setup

Here’s how I prepped WordPress to act as a content backend.

🧩 1. Install These Essential Plugins

Plugin Purpose
WP REST API (built-in) Enables JSON data access
Yoast SEO or RankMath Add SEO metadata to REST output
JWT Auth or Application Passwords For private content or drafts (optional)
WP Super Cache Faster admin panel performance

🔧 2. Structure Content Intelligently

  • Use categories to structure content for your frontend.

  • Use custom fields if you need extra metadata (e.g., reading time).

  • Keep slugs clean and consistent—your frontend routing depends on them.

⚛️ React Frontend Setup

My blog frontend is built with React, styled with Tailwind CSS, and deployed on Vercel.

📁 Folder Structure

/src
/pages
/blog
[slug].jsx
/components
PostCard.jsx
PostList.jsx
SEO.jsx

🧪 Fetching Posts from the REST API

Here’s a simplified example:

js
// src/utils/fetchPosts.js
export async function getPosts() {
const res = await fetch('https://your-wordpress-site.com/wp-json/wp/v2/posts');
return await res.json();
}

🔍 Getting SEO Data

If using RankMath or Yoast, SEO metadata will appear under:

json
"_yoast_head_json" or "_rank_math_seo"

Parse that into <head> using React Helmet or a custom component.

🌐 Routing & Slugs

I use React Router’s dynamic routing to handle post slugs. For example:

jsx
<Route path="/blog/:slug" element={<PostPage />} />

In PostPage.jsx, I fetch the correct post using the slug from the URL.

js
const post = await fetch(`https://your-wp-site.com/wp-json/wp/v2/posts?slug=${slug}`);

🧠 Handling SEO (Without SSR)

This part’s tricky. React apps are client-rendered by default, which Google can index—but not always perfectly.

🔐 SEO Solutions I Use:

  • Pre-render content using Vite/Static HTML plugin (or opt for Next.js if you need SSR).

  • Inject SEO metadata using react-helmet.

  • Ensure each page has unique:

    • <title>

    • <meta name="description">

    • Open Graph tags for social sharing

  • Use sitemap.xml generated by WordPress and submit it via Google Search Console.

“Don’t assume Google sees your React app perfectly. Give it clean meta tags and clean URLs.”

📈 Performance Optimization

🏎️ Key Techniques:

  • Lazy load blog images with loading="lazy"

  • Paginate blog index instead of loading all posts

  • Serve images from WordPress CDN or use Cloudinary/ImageKit

  • Debounce search input and filter components

  • Minimize third-party libraries

🛠️ Tools I Use:

Tool Purpose
Lighthouse Performance audits
Squoosh Image compression
Vercel Analytics Real user metrics
Plausible Analytics Lightweight tracking

🧑‍💻 Developer Workflow

  • Code in VS Code with Prettier, ESLint, Tailwind IntelliSense

  • Local WordPress runs in Docker

  • React dev server runs at localhost:3000

  • GitHub + Vercel = automatic deploys per commit

🔁 Typical Flow:

  1. Write content in WordPress.

  2. Publish post.

  3. React app fetches via REST API.

  4. New post live instantly via cached prefetch or SSR (if used).

🚀 Final Thoughts

By decoupling WordPress and React, I built a blog that’s:

  • Fast

  • SEO-friendly

  • Developer-controlled

  • Easy to manage via WordPress

If you’re a developer who writes, or a freelancer who blogs, this setup offers the best of both worlds.

“Use the power of WordPress where it shines (content), and the flexibility of React where it matters (presentation).”

🧵 Next Up?

I’ll be sharing how I structure and style blog content using Markdown-to-React pipelines, along with how I render featured images, reading time, and social embeds.

🔔 Stay tuned by bookmarking umar.press

Published on June 1, 2025 • Updated June 13, 2025

By Umar Sindhu

Further Reading

Comments