Embedding a React Application inside a Wordpress Page

The Why

First off you might wonder why you would ever build a site this way. Honestly if you’re starting a new project from scratch this is probably not ideal. You might want to look into many of the other tutorials online using WP API as a headless CMS with React Front-End.

But what if you’re working for a company that has a large Wordpress site that they wanted to replace with React (eventually…), but all the while you still need to build new features into the existing site? I didn’t want to spend my days building new Wordpress content only to have to rebuild it again in React. What if we could build new features in React and use it inside the existing Wordpress site? Then we would be able to reuse the React later when you remove the Wordpress front-end all together. If you have a similar situation this post is for you!

Here’s a Demo

Getting Started

First setting up your Wordpress pages to behave as you add JavaScript inside pages and posts.

By default Wordpress “tries” to be helpful by adding formatting inside your page/post text editor and as you try to add JavaScript it will insert <p> tags whenever you hit return. This will break your JavaScript and irritate the %$@# out of you! But not to worry, we can easily disable this!

Inside your Wordpress dashboard go to Appearance > Editor.

Note:
You might get a warning prompt if this is your first time. Discard this if you’re a professional and you know what you are doing. Otherwise if you’re a jr. developer on a team first check with your Sr. or Lead if editing this file is ok.

Find the Theme Functions (functions.php) file on the right side. Scroll to the bottom of this file and add the following script.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

Click Update File

Great! Now you will be able to safely type JavaScript inside any Wordpress page or post without automatic HTML formatting.

Adjusting React

Note:
I usually start my React application by following this Medium which walks you through setting up a create-react-app with Redux, React Router and Redux Thunk. Getting started with create-react-app redux react-router and redux-thunk

Loading React on a Subdirectory
When making a react application it defaults to display on the root directory of your site. This will not work if you are loading the React application in a subdirectory of your site.

If you started with a create-react-app we will need to runyarn eject. We have to do this because create-react-app doesn’t pay attention to the homepage value in your package.json otherwise. Please correct me in the comments if you are able to make this happen without ejecting but I personally wasn’t able to.

After you’ve ejected open the package.json and add a new property homepage followed by the url of where the react application will live on your server. This will let Webpack know where all the supporting assets will live.

"name": "wp-react-component",
"version": "0.1.0",
"homepage": "http://reactiongears.com/demo/wpsandbox/react/",
"dependencies": {
   ...

Adjusting your React route
Now we need to adjust the base route, otherwise our root component won’t display. On my website the URL looks like this…

http://reactiongears.com/demo/wpsandbox/
So we want our route to match…

<Route exact path="/demo/wpsandbox/" component={Home} />

My App.js looks like this…

Setting a Unique DOM Target
Since you might have more than one of these it’s a good idea to make the target DOM element id unique. React defaults this to root.

In your project open public/index.html and you’ll see a div with the id of root. Change this to something related to your app. I changed my to my-box-page.

<div id="my-box-page"></div>

Now open your main index.js which is usually located right inside thesrc folder. Update the target to reference this id.

const target = document.querySelector("#my-box-page");

Build your React app
Now that our React application has all the necessary settings to run on our Wordpress page we can run yarn build to create a production minified build of our React Application.

Deploy

Now that you have your production build you can upload it to your server. In the root of my Wordpress site I created a folder called react. This folder sits in the same place as wp-content, wp-includes, etc. I put all the contents of my react build folder inside here.

Note:
If you want to be able to view the page by directly going to the folder directory I also added a duplicate route inside my App.js for that.

<Route exact path="/demo/wpsandbox/react/" component={Home} />

Final Step!

Now to add the react application to our post!

Open the page or post in Wordpress that you wish to embed the React app. The Permalink of this page should match what we had setup above.

Click on the Text tab to switch to editor mode and insert the code below

The script src url should match the location to the minified main.js.

That’s it! Save the Wordpress page and you should see your React app running inside the site.

Trouble Shooting

This was very challenging to get working right.

• First check to make sure the React application runs on its own. This should still work if you run yarn start and visit http://localhost:3000/.
• If the react application runs on its own but isn’t showing up in your Wordpress page here are a few things to check over.
• Look back at the the homepage:"" property in your package.json to make sure the full URL is there including the http//… and that it goes to the folder location of the React project on the server and not the Wordpress page URL.
• Make sure that the route path to your component matches the Wordpress page url.
• Finally check the url to the main.min.js and make sure that’s correct.

Otherwise feel free to comment and I’ll try to help as best I can.

If this post was helpful please don’t forget to give me a 👏 below!
Thank you!