How to Build WordPress Themes with React

Creating a Basic WordPress Theme Structure

Creating a basic WordPress theme structure involves setting up a series of files and directories that WordPress uses to apply the theme's style, functionality, and layout to a WordPress website.

1. In your site's operating environment, visit the site's folder. Navigate to thewp-content/themes Catalog.

2. Create a new folder for the theme. The folder name should be unique and descriptive - for examplemy-basic-themeThe

3. In the theme's folder, create these basic files and leave them blank:

If you are not using React, you must also create these files below.

• header.php  - Contains the header section of the site.
• footer.php  - Contains the footer section of the site.
• sidebar.php  - For the sidebar section, if the theme includes a sidebar.

Next, open thestyle.css And add the following to the top of the document:

/*
Theme Name: My Basic Theme
Theme URI: http://example.com/my-basic-theme/
Author: Your Name
Author URI: http://example.com
Description: A basic WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-background
Text Domain: my-basic-theme
*/My-basic-theme

This code snippet is WordPress theme style.css fileThe title section of a theme contains important metadata such as the theme name, author details, version and license. It helps WordPress identify and display the theme in the dashboard, including the theme description and category tags.

Integrating React into WordPress

Integrating React into a WordPress theme allows you to use React's component-based architecture to build dynamic and interactive user interfaces in your WordPress website. To integrate React, you'll use the@wordpress/scripts packageThe

This is a collection of reusable scripts customized for WordPress development.WordPress provides it to simplify the configuration and build process, especially when integrating modern JavaScript workflows like React into WordPress themes and plugins. The toolkit encapsulates common tasks to make developing with JavaScript in the WordPress ecosystem easier.

Adjust your theme

Now that you have the basic structure of a WordPress theme, you can tweak the theme.

1. In the theme directory, paste the following code into the functions.php Documentation:

<?php
function my_react_theme_scripts() {
    wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true);
    wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'my_react_theme_scripts');

function.phpfile integrates React with your WordPress theme. It useswp_enqueue_script respond in singingwp_enqueue_style function combines JavaScript and cascading style sheets ( CSS ) file to add to your theme.

WordPresswp_enqueue_script The function has several arguments:

• Handle name ( 'my-react-theme-app') that uniquely identifies the script
• Path to the script file
• dependencies arrayarray('wp-element')This means that the script depends on the WordPress React wrapper.('wp-element')The
• version number('1.0.0')
• placementtrueThe script should be loaded into the footer of the HTML document to improve page load performance.

ought towp_enqueue_style The function takes the following parameters:

• handle name'my-react-theme-style'Unique Identification Style Sheet
• source, which returns the theme's main stylesheet ( style.cssget_stylesheet_uri() ) URL and make sure to apply the theme's styling
• ought toadd_action element that hooks the custom function to the  'my_react_theme_scripts' to a specific operation ( 'wp_enqueue_scripts'). This ensures that JavaScript and CSS are loaded correctly when WordPress is ready to render the page.

This code ensures that the React application's compiled JavaScript file (located in /etc.) will not be used for any other purpose.build/index.js in) and the theme's main stylesheet are loaded with the theme.

/build directoryUsually from the use ofwebpackcreate-react-app These tools compile React applications by bundling the React code into production-ready, stripped-down JavaScript files.

This setup is essential for integrating React functionality into WordPress themes, enabling a dynamic, app-like user experience in WordPress websites.

2.Next, update index.phpThe contents of the file :

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1001>
    <div id="app"></div>
    <?php wp_footer(); ?>
</body>
</html>

index.php The code in the file defines the basic HTML structure of the WordPress theme, including hooks for WordPress to insert the necessary headers (wp_header) and footers (wp_footer), and a div with an ID app in which the React application is installed.

Setting up React with @wordpress/scripts

1. Open a terminal and navigate to the theme's directory:cd wp-content/themes/my-basic

cd wp-content/themes/my-basic-theme

2. Initialize a new Node.js project:

npm init -y

3. Installation@wordpress/scriptsfurthermore@wordpress/element::

npm install @wordpress/scripts @wordpress/element --save-dev

Attention:It usually takes a few minutes here, just be patient.

4. Modificationspackage.json file to contain thestart anbuild Script:

"scripts": {
  "start": "wp-scripts start", "build": "wp-scripts build", {
  "build": "wp-scripts build"
{ "start": "wp-scripts start".}

The "@wordpress/scripts" is used to start the development server in a hot reloaded fashion for development (startup) and to compile the React application into static assets for production (build).

Creating a Response Program

1. Create a file for the React source files in the theme namedsrcof the new catalog.

2. Insrc folder, create two new files:index.js respond in singingApp.jsThe

3. Put the following code intoindex.js::

import { render } from '@wordpress/element' ;
import App from '. /App'; import { render } from '@wordpress/element'; import App from '.
render(, document.getElementById('app'))

code aboverender surname Cong@wordpress/element Component Import FunctionsApp . It will thenApp The component is installed into the Document Object Model (DOM).

4. Next, paste this code into theApp.js Documentation:

import { Component } from '@wordpress/element';
export default class App extends Component {
  render() {
    return (
      <div> 
        <h1>Hello, WordPress and React!</h1>
        {/* Your React components will go here */}
      </div>
);
    }
}

Complete and activate the theme

Activate the theme:

1. utilizationnpm startRun the development server.
2. In the WordPress control panel, find the "Appearance" > "Theme", find your theme and click "Activate" to activate your new theme.
3. Ensure that the React project build process is configured correctly to output to the correct theme directory to allow WordPress to render React components.
4. Visit the front end of the WordPress site to see the changes in real time.

Developing React components for themes

Next, take a component-based approach and extend the basic React setup in your WordPress theme with specific components such as headers.

Creating a Header Component

In the theme's src directory, create a new file for the header component. Name the file something like Header.js and add the following code:

import { Component } from '@wordpress/element' ;
class Header extends Component {
    render() {
        const { toggleTheme, darkTheme } = this.props;
        const headerStyle = {
            backgroundColor: darkTheme ? '#333' : '#EEE', color: darkTheme ?
            color: darkTheme ? 'white' : '#333', padding: '10px 20px 20px', color: darkTheme ?
            color: darkTheme ? 'white' : '#333', padding: '10px 20px',
            display: 'flex', justifyContent: 'space-base', 'space-base', 'space-base'
            
            alignItems: 'center',
        };
        return (
            <header style="{headerStyle}">
                <div>My WP Theme</div>
                <button onclick="{toggleTheme}">{darkTheme ? 'Light Mode' : 'Dark Mode'}</button>
            </header>
        );
    }
}
export default Header.

This code uses "@wordpress/element" to define a header component that dynamically adjusts the header style based on the darkTheme proposition. It contains a button that toggles between light and dark themes by calling the toggleTheme method passed as a prop.

Creating Footer Components

In the theme's src directory, create a new file for the footer component. Give it a name, such as Footer.js, and then add the following code:

import { Component } from '@wordpress/element' ;
class Footer extends Component {
    render() {
        const { darkTheme } = this.props;
        const footerStyle = {
            backgroundColor: darkTheme ? '#333' : '#EEE', color: darkTheme ?
            color: darkTheme ? 'white' : '#333', padding: '20px', color: darkTheme ?
            
            textAlign: 'center',
        };
        return (
            

This code defines a footer component that renders a dynamically styled footer based on the darkTheme proposition and displays the current year.

Update the App.js file

To use the new header and footer, replace the contents of the App.js file with the following code:

import { Component } from '@wordpress/element' ;
import Header from '. /Header'; import { Component } from '@wordpress/element'; import Header from '.
import Footer from '. /Footer'; export default class App extends Component { {Wordpress/element}; import Header from '.
export default class App extends Component {
    state = {
        darkTheme: true, {
    }; }; toggleTheme = () => { darkTheme: true, true, true
    toggleTheme = () => {
        this.setState(prevState => ({
            darkTheme: !prevState.darkTheme, })); toggleTheme = ( => { this.setState(darkTheme: true, }
        }));
    };
    render() {
        const { darkTheme } = this.state; return ( { darkTheme: !
        return (
            <div>
                <header darktheme="{darkTheme}" toggletheme="{this.toggleTheme}" />
                <main style="{{" padding: '20px', background: darktheme ? '#282c34' : '#f5f5f5', color: 'white' 'black' }}>               
                </main>
                <footer darktheme="{darkTheme}" />
            </div>
        );
    }
}

The development build process monitors changes and recompiles the code, which should still be active. The last template version should be similar to this one:

How to Work with WordPress Data in React

Integrating WordPress content into a React application seamlessly bridges the gap between WordPress' powerful content management capabilities and React's dynamic UI design. This is accomplished through the WordPress REST API.

To accessWordPress REST API, please enable it by updating the permalink settings. In the WordPress admin dashboard, navigate to the"Settings"  > "Permanent link". Selection"Post name" option or"Ordinary." any options other than the following, and then save the changes.

In the theme ofsrc directory, create a file namedPosts.js New file and add the following code:

import { Component } from '@wordpress/element' ;
class Posts extends Component {
    state = {
        posts: [],
        isLoading: true,
        error: null,
    }; componentDidMount() {
    componentDidMount() {
        fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Something went wrong');
                }
                return response.json();
            })
            .then(posts => this.setState({ posts, isLoading: false }))
            .catch(error => this.setState({ error, isLoading: false })); }
    }
    render() {
        const { posts, isLoading, error } = this.state;
        if (error) {
            if (error) { return <div>Error: {error.message}</div>;)
        }
        if (isLoading) {
            return <div>Loading...</div>;)
        }
        return (
            <div>
                {posts.map(post =&gt; (
                    <article key="{post.id}">
                        <h2 dangerouslysetinnerhtml="{{" __html: post.title.rendered }} />
                        <div dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }} />
                    </article>
                ))}
            </div>
        );
    }
}
export default Posts.

Depending on the WP deployment name (i.e. the folder where you installed WP), the fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') URL may be slightly different. Alternatively, you can fetch the web hostname from the DevKinsta panel and add the suffix /wp-json/wp/v2/posts.

The Posts component is a prime example of this integration, demonstrating the process of getting and managing WordPress data (specifically posts) using the WordPress REST API.

By initiating a network request in the component's lifecycle method (componentDidMount), the component can efficiently fetch posts from a WordPress site and store them in its own state. This approach emphasizes a pattern of dynamically integrating WordPress data, such as pages or custom post types, into React components. To use the new component, replace the contents of the App.js file with the following code:

import { Component } from '@wordpress/element' ;
import Header from '. /Header'; import { Component } from '@wordpress/element'; import Header from '.
import Footer from '. /Footer'; import Posts from '.
import Posts from '. /Posts'; // Import the Posts component

export default class App extends Component {
    state = {
        darkTheme: true, { state = {
    }; }
    toggleTheme = () => {
        this.setState(prevState => ({
            darkTheme: !prevState.darkTheme, })); toggleTheme = ( => { this.setState(darkTheme: true, }
        }));
    };
    render() {
        const { darkTheme } = this.state; return ( { darkTheme: !
        return (
            <div>
                <header darktheme="{darkTheme}" toggletheme="{this.toggleTheme}" />
                <main style="{{" padding: '20px', background: darktheme ? '#282c34' : '#f5f5f5', color: 'white' 'black' }}>
                    <posts /> {/* Render the Posts component */}
                </main>

                <footer darktheme="{darkTheme}" />
            </div>
        );
    }
}

The latest final version of the theme can now be viewed. In addition to the header and footer, it includes a dynamic content area for posts.

Using React WordPress Themes in WordPress Projects

To integrate a React-based theme into a WordPress project, you first need to convert the React code into a WordPress-compatible format using a package such as @wordpress/scripts. This tool simplifies the build process by allowing you to compile your React application into a static asset that WordPress can launch.

Building a theme is very simple using the npm commands provided by @wordpress/scripts. Run npm run build in your theme directory to compile your React code into static JavaScript and CSS files.

Then, place these compiled assets into the appropriate directories in the theme to ensure that WordPress can properly load and render the React components as part of the theme. Once the integration is complete, you can activate the React WordPress theme just like any other theme, instantly bringing a modern, app-like user experience to your WordPress site.

summarize

Building themes with React's powerful UI capabilities and integrating them into WordPress unleashes the ability to create flexible, highly interactive, and user-centered web experiences.