Creating your own Wordpress plugin with our React chat component

I've just managed to run Ethora Chat Component as a Wordpress plugin. 

We will likely build an official Ethora plugin for Wordpress, but if you can't wait or need to build your own custom plugin, below are the steps to reproduce.

FYI I used this Medium tutorial for inspiration: https://medium.com/@hamzabhf00/how-to-integrate-your-react-project-into-a-wordpress-website-a-step-by-step-guide-b63da544fa37

 

1. Set up a server/instance with Wordpress installed. I have set up a new DigitalOcean droplet and installed Lemp stack: https://www.digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-lemp-stack-on-ubuntu and then installed Wodpress: https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-on-ubuntu-22-04-with-a-lamp-stack

2. Go to WP plugins folder and create a new folder for your plugin, for example:

/wordpress/wp-content/plugins# mkdir ethora

Cd ethora

3. Install Node and npm if needed.

4. Install Ethora Chat Component https://www.npmjs.com/package/@ethora/chat-component: (1) npm create vite@latest; (2) choose React and Typescript; (3) cd vite-project; (4) npm i; (5) npm i @ethora/chat-component; (7) replace the src/App.tsx code. 

Note: when you're in /plugins/ethora/vite-project or your analog of that, you may want to move all files to the parent directory. You can do that via:

find . -maxdepth 1 -exec mv {} .. \;

 5. Build you project so you can get the Javascript and CSS files for your PHP plugin code:

npm run build

6.  The build process will output the path to CSS and Javascript files that you need to copy into your plugin PHP file:

In my case those are:

dist/assets/index-n_ryQ3BS.css
dist/assets/index-D3izNsCh.js

7. Create a PHP file with some arbitrary name for your plugin, for example ethora-plugin.php

8. Add the following code to enqueue your React build files:

<?php
/*
Plugin Name: Ethora Chat Component (simple demo)
Description: A plugin to integrate a chat into WordPress.
Version: 0.01
Author: Taras Filatov. Ethora Chat Component by Roman Leschuh.
*/

function ecc_enqueue_scripts() {
    // Enqueue React build CSS and JS
    wp_enqueue_style('ecc-style', plugin_dir_url(__FILE__) . 'dist/assets/index-n_ryQ3BS.css');
    wp_enqueue_script('ecc-script', plugin_dir_url(__FILE__) . 'dist/assets/index-D3izNsCh.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'ecc_enqueue_scripts');

function ecc_render_react_app() {
    echo '<div id="root"></div>';
}
add_action('wp_footer', 'ecc_render_react_app');

Above is an example, of course you can change your plugin name, author, function names etc. I use "ecc_" prefix for functions which stands for "Ethora Chat Component". You can use whatever. 

Important: ensure you have replaced .css and .js files paths with those you obtained from your build.

9. Go to Wordpress admin panel, navigate to Plugins and activate your newly created plugin:

10. Navigate to your Wordpress site. If everything is done correctly, you will see the chats.

In my case it looks like CSS is not working properly and there is some set up to be done to make it look better, but otherwise it is fully functional and my Wordpress website users can go ahead and use the chats: