Why WordPress & React?
The last few years have revealed a trend of improved UI development in the WordPress environment with Frontend frameworks such as React and Vue. Bear that in mind when you see a React error in the console of your website. The source of the error may be a React-app 3rd party plugin and not your own development efforts!
React has long been a go-to for 3rd party plugins, for example, Yoast’s SEO plugin renders widgets in WordPress admin pages with a React App. Now, the ability to develop React apps in WordPress has been eased with the launch of Gutenberg. The Gutenberg block editor has React at its core.
This article will walk through how you can add a separate React Create App into your WordPress site, not about Gutenberg React blocks.
React WordPress Headless Content vs. a React App in an Existing WordPress Page
You may have read about WordPress & React headless projects that enable a website to render as a React app from WordPress API endpoints. That process should not be confused with the subject of this article. Here we focus on rendering a React Create App inside a specific WordPress page in the WordPress admin or the site frontend. For this demo, we “take over” a div that already is defined inside a page.
That requires two steps to create a typical WordPress & React integration:
- Adding a div with a selector that we can match to the app root selector to render within. (However, we can skip this step if we hijack an existing div as we do in this demo).
Custom Code in Plugin vs. Theme
We can add functionality to our WordPress installation in 1 of 2 ways:
- Add the code to a child theme (or the main theme if we maintain it).
- Write a custom plugin.
In this article, we will create a custom plugin. However, this concept could be applied to customize a theme, as well.
Creating a WordPress Plugin
Lets run this lines it our Terminal:
The plugin folder structure should look similar to the image below after the React plugin and React App creation and build have completed.
Ensure Plugin Loaded
Before moving on, let’s ensure that the plugin’s screen for the plugin we created was activated on our dashboard.
Locate App Root Selector
Let’s start by loading the React App on the main dashboard page in the WordPress admin panel.
The selector '
#wpbody .wrap’ will place the app in your dashboard and replace the default WordPress widgets.
Locating the React App Files
build/assets/css folders. As we can see in the build folder, we have assets chunks files with random names.
This creates challenges such as, how can we load the correct asset files if each build’s names may change? Would we need to update after each build with the names of the new assets files?
Since we can get the list of the files from the
react-app/build/asset-manifest.jsonfile, we will keep code-splitting on, so we won’t need to change any default Webpack settings.
- We now we want to load the `entryload` files from the
- Set our React App to load in `
#wpbody .wrap` in the WordPress main dashboard page.
Modify the Plugin files
Our code will be added after the `Your code starts here` comment.
Add logic to parse the
asset-manifest.json file, loop over the entry files found, and load them in the main page of WordPress admin:
Modify the file to get the selector root from the
If we build the app at the stage with
yarn build, the app would load, but our image will not. Since the app is looking for the image in the main domain folder instead of the React App folder.
To fix this, we should add in
react-app/package.jsonthe entry :
Now we can run
yarn buildand the app should display correctly.
Loading the App in Front End
For this demo, we will load the app it the footer of the site’s homepage.
The path will be very similar with a few changes.
- We load the files in
wp_enqueue_scriptshook instead of
admin_enqueue_scriptshook we used in WordPress dashboard.
- The condition to check if we are in the correct page is the
is_front_end()WordPress helper function, instead of the admin hook we used to check current admin screen in WordPress dashboard.
- We will update the selector in
main.jsto the correct app root selector
yarn buildwe should see the app in the footer of the main frontend page of the site.
Introducing Class Plugin
Since we may want to reuse this concept in different sites with minimal changes to the code, we can wrap everything in one class with parameters. This class will now load the React app on the frontend home page and the main WordPress admin page.
There are two main benefits of wrapping our code in a class plugin:
- Our code is encapsulated in the class, so we don’t need to add custom prefixes to our function’s names.
- It is simpler to reuse the same class to load code in the frontend and the WordPress admin.
Notes about the code:
- Code was written in PHP 7.4
- The “WordPress way” for fetching the files would be
wp_remote_get. We used here
file_get_contentsfor keeping the demo simple.
Below are listed 3 branches with the 3 code versions. Remember to run
yarn && yarn build in the
react-app folder to build the bundle.
Github wp-admin function version
Github front end function version
Github Class version