Gideons blog

Building a WordPress theme with React

Gideon Ihieve's photo
Gideon Ihieve
·

3 min read

Building a WordPress theme with React combines the power of a content management system (CMS) with the dynamic capabilities of a modern JavaScript library. In this article, we’ll walk you through the steps to create a custom WordPress theme powered by React, complete with code samples.

What You’ll Learn:

Setting up a WordPress environment Integrating React with WordPress using the WP REST API Creating a simple custom theme with React components

Setting Up a WordPress Environment

Before diving into code, ensure you have a local WordPress environment set up. You can use tools like:

  • Local by Flywheel

  • MAMP

  • XAMPP Once WordPress is installed, navigate to the wp-content/themes directory and create a folder for your theme (e.g., react-theme).

Setting Up Your Theme Files

Let us create the basic structure for your WordPress theme:

react-theme/
│
├── index.php
├── style.css
├── functions.php
└── build/
    ├── index.html
    └── main.js

style.css Add metadata for your theme:

/*
Theme Name: React WordPress Theme
Author: Ihieve Gideon
Description: A WordPress theme powered by React
Version: 1.0
*/

index.php This file serves as the entry point for your theme:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <div id="root"></div>
    <?php wp_footer(); ?>
</body>
</html>

functions.php Enqueue your React app's build files:

<?php
function enqueue_react_app() {
    wp_enqueue_script(
        'react-app',
        get_template_directory_uri() . '/build/main.js',
        [],
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_react_app');
?>

Creating a React App

Create a React app inside the build/ folder using Vite or Create React App: npx create-react-app build Inside your React app, edit src/index.js to render your app:

index.js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    return (
        <div>
            <h1>Welcome to My React WordPress Theme</h1>
            <p>This is a dynamic theme powered by React!</p>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

Connecting to the WP REST API

WordPress provides a REST API to fetch posts, pages, and other content. Example: Fetching and Displaying Posts. Install axios or use the fetch API to retrieve data from the WordPress API.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        axios.get('/wp-json/wp/v2/posts')
            .then((response) => setPosts(response.data))
            .catch((error) => console.error(error));
    }, []);

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

export default App;

Building and Deploying the Theme

  • Run the build command in your React app:
npm run build

  • Copy the generated build files into the build/ folder of your theme.

  • Finally activate your theme in the WordPress admin dashboard.

Conclusion

Congratulations! You've successfully built a custom WordPress theme using React. This approach allows you to leverage React's dynamic features while using WordPress as a headless CMS. Experiment with more components and styles to customize your theme further.

WordPressReact