How to generate a WP plugin based on React?

WordPress (WP) stands out as the most widely used application on the internet. However, as a software engineer involved in constructing WP websites, we frequently encounter issues where certain plugins in the WP repository do not align accurately with their detailed descriptions.

In such instances, the necessity arises to create custom plugins to fulfill specific goals. Our initial step is typically to seek resources that facilitate the initiation of our work and streamline the process of delivering results.

This is where the online tool, WPPB, comes into play. It simplifies the generation of boilerplate code for building WordPress plugins, addressing the challenges faced by developers in creating tailored solutions :

After completing the initial setup, you have the freedom to incorporate additional resources or customize your plugin according to your preferences.

Here is the architecture of our folder, just below explained the various folders :

• admin: This section houses all logic related to the WP dashboard.

  • css: Stores all CSS files related to the WP dashboard.
  • js: Stores all JavaScript files related to the WP dashboard.
  • class-example-admin.php: This is the main class of the plugin for the admin section.
  • index.php: This file prevents the folder from being browsable from the internet.

• includes: This section contains the part of the plugin responsible for loading all plugin logic in the correct order and for the right hooks. (Learn more about hooks here)

  • class-example-activator.php: This class runs when the plugin is activated, suitable for tasks like creating SQL structures.
  • class-example-deactivator.php: This class runs when the plugin is deactivated, suitable for tasks like deleting SQL structures.
  • class-example-i18n.php: This class is responsible for the internalization of the plugin.
  • class-example-loader.php: This class rewrites the default add_action and add_filter functions of WordPress.
  • class-example.php: Loads the respective logic for the admin or the public.

• languages: This is where the translations of the plugin in various languages are stored. You can use tools like Poedit or the Loco Translate plugin to facilitate this process.

• public: This section contains the part of the plugin responsible for loading all plugin logic for the frontend.

  • css: Stores all CSS files related to the public-facing side.
  • js: Stores all JavaScript files related to the public-facing side.
  • class-example-public.php: This is the main class of the plugin for the frontend.
  • index.php: This file prevents the folder from being browsable from the internet.

• other files (such as example.php and readme.txt) serve as a starting point for loading the plugin configuration into WordPress.

We initially intended to continue working with our existing plugin. However, after attending the annual World of Word, we recently discovered that the CMS is transitioning to become Gutenberg-based, built on top of ReactJS.

ReactJS, being a web framework that simplifies the development of web applications more efficiently and in less time, presents an exciting opportunity. Combining these two worlds into a single plugin can significantly enhance our development process.

The new goal is to evolve from the WPPB structure to create a generator capable of preparing a WordPress plugin for seamless integration with ReactJS.

For this purpose, a new tool has been developed and named WPRB, which stands for WordPress React Boilerplate. It maintains the same architecture as WPPB but integrates the appropriate tools from a React background.

You have the flexibility to include any NPM packages for the frontend in each section. Whether you prefer MaterialUI, Tailwind CSS, or any other, you just need to follow the same instructions and include it as if you were building a React app.

I will generate a new plugin using WPRB. This updated version essentially follows the same architecture as WPPB, but it now includes initial configuration files to kickstart a React app within it. The architecture within the plugin is the following :

• admin: Stores all logic related to the WP dashboard.

  • dist: Output after building by webpack; it contains the CSS and JS that will be loaded.
  • src: Contains the source React code for the admin; you can use any of your favorite libraries here.
  • class-example-admin.php: The main class of the plugin for the admin section.
  • index.php: This file prevents the folder from being browsable from the internet.

• includes: This section contains the part of the plugin responsible for loading all plugin logic in the correct order and for the right hooks. (Learn more about hooks here)

  • class-example-activator.php: This class runs when the plugin is activated, suitable for tasks like creating any SQL structure.
  • class-example-deactivator.php: This class runs when the plugin is deactivated, suitable for tasks like deleting any SQL structure.
  • class-example-i18n.php: This class is responsible for the internalization of the plugin.
  • class-example-loader.php: This class rewrites the default add_action and add_filter functions of WordPress.
  • class-example.php: Loads the respective logic for the admin or the public.

• languages: This is where the translations of the plugin in various languages are stored. You can use tools like Poedit or the Loco Translate plugin to achieve this.

• public: This section contains the part of the plugin responsible for loading all plugin logic for the frontend.

  • dist: Output after building by webpack; it contains the CSS and JS that will be loaded.
  • src: Contains the source React code for the public; you can use any of your favorite libraries here.
  • class-example-admin.php: The main class of the plugin for the admin section.
  • index.php: This file prevents the folder from being browsable from the internet.

• other files (such as example.php and readme.txt) serve as a starting point for loading the plugin configuration into WordPress.

Once you've grasped the structure, simply run yarn install or npm install at the root of the plugin to install the necessary dependencies. After this step, you're ready to go.

That's all for this explanation. If you're interested in enhancing or contributing to this work, feel free to fork this repository: https://github.com/homescriptone/WordPress-Plugin-React-Boilerplate. It contains the base code used to create and deliver these functionalities. Happy coding!