Steps to Build a Stunning WordPress Theme with React JS

Introduction

WordPress powers over 40% of websites, but traditional PHP-based themes can feel outdated. React JS offers a modern, dynamic solution to enhance user experience, performance, and maintainability. This guide walks you through the process of building a custom WordPress theme using React JS.

Why Use React JS for WordPress Themes?

React JS enhances WordPress themes by:

Step-by-Step Guide to Building a WordPress Theme with React JS

Step 1: Set Up Your WordPress Environment

Before integrating React, ensure you have a WordPress development environment ready:

Step 2: Install React and Set Up a Frontend Project

React requires a separate project structure. Set it up using:

npx create-react-app your-theme-react
cd your-theme-react
npm start

This initializes a React project with a development server.

Step 3: Connect React with WordPress

To serve your React app in WordPress, follow these steps:

npm run build

This generates static assets in the build folder.

function theme_enqueue_scripts() {
    wp_enqueue_script('react-app', get_template_directory_uri() . '/build/static/js/main.js', array(), null, true);
    wp_enqueue_style('react-style', get_template_directory_uri() . '/build/static/css/main.css', array(), null);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

Step 4: Fetch Data Using the WordPress REST API

React communicates with WordPress through the REST API. Fetch posts dynamically:

fetch("https://yourwebsite.com/wp-json/wp/v2/posts")
  .then(response => response.json())
  .then(data => console.log(data));

Step 5: Create a Custom React Component for Blog Posts

Example of a simple React component for displaying WordPress blog posts:

import { useEffect, useState } from "react";

function BlogPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://yourwebsite.com/wp-json/wp/v2/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
          <p dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
        </div>
      ))}
    </div>
  );
}

export default BlogPosts;

Step 6: Deploy Your React-Based WordPress Theme

Example: Creating a React-Based Theme Structure

Here’s an organized directory structure for a React-based WordPress theme:

your-theme/
│── build/             # React build output
│── template-parts/    # PHP files for templates
│── index.php          # WordPress main template
│── style.css          # Theme stylesheet
│── functions.php      # Enqueue scripts & styles
│── header.php         # Theme header
│── footer.php         # Theme footer

Optimizing Your React-Based WordPress Theme

To maximize performance:

Conclusion

Integrating React JS with WordPress can transform a static theme into a dynamic, fast, and interactive experience. By following this step-by-step guide, you can build a modern, stunning WordPress theme tailored to today’s web standards.

For more tutorials on WordPress and React development, check out Ajay Khandal’s blog and explore insightful articles like: