Since the introduction of the Gutenberg block in WordPress 5.0, React JS has been a part of WordPress. For the developers, creating their own block plugin hasn’t been a tough task because of the well-written documentation on Writing Your First Block Type by WordPress. Also, because of the fact that you don’t need to have a full grasp on React JS to build a block-based plugin.


However, most of the developers aren’t utilizing the powerful features of React JS while building the plugin settings.


React JS in WordPress is not only for building a block in the block editor.


So, let’s start with creating plugin settings with React JS.


Usually, a WordPress plugin has a settings page under the Settings menu of the WordPress dashboard. Let’s consider an example plugin plugin-name. We have a wp-content/plugins/plugin-name.php

    add_action( 'admin_menu', 'prefix_register_settings_menu' );

    function prefix_register_settings_menu() {
         add_options_page( 'Plugin Settings', 'Plugin Name', 'manage_options', 'plugin-slug','plugin_settings_page' );   
    }

    function plugin_settings_page() {
       // Settings page content.
    }



Traditional Approach:

Traditionally, we add all the settings in settings_page() function. For example:


 function plugin_settings_page() {

  ?>
    <h2><?php esc_html_e( 'General Settings', 'plugin-text-domain' ); ?></h2>
    <form method="post">
        <table class="form-table">

            <tr valign="top" class="plugin-slug-option">
                <th scope="row"><?php echo esc_html__( 'One of the input type settings', 'plugin-text-domain' ); ?></th>
                    <td>
                        <input style="width:auto" type="text" name="input_type_settings" />
                    </td>
            </tr>
        </table>
      <?php submit_button(); ?>
    </form>
  <?php
}


With this, we’ve successfully created a settings page for our plugin.


Here’s the full plugin code at this point.


Now, instead of using this traditional approach, let’s focus on extending React JS to create plugin settings.

React JS Approach:


Let’s modify the plugin_settings_page() function to:

function plugin_settings_page() {
    ?>
        <div id="plugin-name-settings-page">
        </div>
    <?php
}


This is all we do on the PHP side. We’re going to fill all the settings from the JS using React JS.


Create a settings.js file and enqueue this settings file.


add_action( 'admin_enqueue_scripts', 'prefix_enqueue_scripts' );

function prefix_enqueue_scripts() {

    wp_enqueue_script( 'plugin-name-settings-js', plugins_url( 'settings.min.js', __FILE__ ), array( 'wp-element', 'wp-i18n' ), '1.0', false );
}


The full plugin at this point will be:

<?php
/**
 * Plugin Name: Plugin Name
 * Description: Creating plugin settings with React JS.
 * Version: 1.0.0
 * Author: Sanjeev Aryal
 * Author URI: https://www.sanjeebaryal.com.np
 * Text Domain: plugin-text-domain
 * Domain Path: /languages/
 * 
 */

defined( 'ABSPATH' ) || exit;

add_action( 'admin_menu', 'prefix_register_settings_menu' );

function prefix_register_settings_menu() {
     add_options_page( 'Plugin Settings', 'Plugin Name', 'manage_options', 'plugin-slug','plugin_settings_page' );   
}

function plugin_settings_page() {
    ?>
        <div id="plugin-name-settings-page">
        </div>
    <?php
}

add_action( 'admin_enqueue_scripts', 'prefix_enqueue_scripts' );

function prefix_enqueue_scripts() {

    wp_enqueue_script( 'plugin-name-settings-js', plugins_url( 'settings.min.js', __FILE__ ), array( 'wp-element', 'wp-i18n' ), '1.0', false );
}



Now, let’s work on settings.js, which we’ll be writing on React. Before doing that, note that we’ve added wp-element and wp-i18n as dependencies. We’ll be using the functionalities of these in our JS file.



Our setting.js file.

import { render } from '@wordpress/element';
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

class PluginName extends Component {
    render() {
        return (
            <h1> General Settings </h1>
        );
    }

}

document.addEventListener( "DOMContentLoaded", function(event) {
    render(
        <PluginName />,
        document.getElementById( 'plugin-name-settings-page' )
    }
});

That’s all. We’ve successfully built a settings page with React.

However, this is written in JSX and we’ll need to convert it into JS5 using tools like Babel. You’ve probably already done this while creating a block. If you have not already, here’s a useful tutorial to follow on that.


If you’d want to extend this to create a full-blown settings page, you can see how I implemented it in one of the plugins I’ve created.

I’d also recommend getting started with React JS


I hope you found this helpful!

Did you know? WordPress 5.8 now supports webP images.

Creating a WordPress plugin settings page with React JS
Tagged on:

Leave a Reply

Your email address will not be published.

Pin It on Pinterest