Let's describe how to start working in WordPress with React JS.
WordPress plugin development is really a top paying job around the world and with React it's really getting more powerful nowadays.
Let's build a simple wordpress plugin with React JS.
Step 1:
Inside plugins directory, create a folder called - jobplace
which is our plugin.
add composer setup by running -
composer init
also run
npm init
install @wordpress/scripts
by running -
npm install @wordpress/scripts --save-dev
Add some command in package.json
and final would be -
"name": "jobplace",
"version": "1.0.0",
"description": "A Job posting platform made by WordPress",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@wordpress/scripts": "^22.5.0"
}
}
And composer.json
would be -
{
"name": "akash/jobplace",
"description": "A Job posting platform made by WordPress",
"type": "wordpress-plugin",
"license": "GPL-2.0-or-later",
"autoload": {
"psr-4": {
"Akash\\Jobplace\\": "includes/"
}
},
"authors": [
{
"name": "ManiruzzamanAkash",
"email": "manirujjamanakash@gmail.com"
}
],
"require": {}
}
Add webpack.config.js
-
const defaults = require('@wordpress/scripts/config/webpack.config');
module.exports = {
...defaults,
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
};
Add a template file - templates/app.php
<div id="jobplace">
<h2>Loading...</h2>
</div>
Main Plugin file - job-place.php
<?php
/**
* Plugin Name: Job Place
* Description: A Job posting platform made by WordPress.
* Requires at least: 5.8
* Requires PHP: 7.0
* Version: 0.1.0
* Author: Maniruzzaman Akash
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: jobplace
*/
add_action( 'admin_menu', 'jobplace_init_menu' );
/**
* Init Admin Menu.
*
* @return void
*/
function jobplace_init_menu() {
add_menu_page( __( 'Job Place', 'jobplace'), __( 'Job Place', 'jobplace'), 'manage_options', 'jobplace', 'jobplace_admin_page', 'dashicons-admin-post', '2.1' );
}
/**
* Init Admin Page.
*
* @return void
*/
function jobplace_admin_page() {
require_once plugin_dir_path( __FILE__ ) . 'templates/app.php';
}
add_action( 'admin_enqueue_scripts', 'jobplace_admin_enqueue_scripts' );
/**
* Enqueue scripts and styles.
*
* @return void
*/
function jobplace_admin_enqueue_scripts() {
wp_enqueue_style( 'jobplace-style', plugin_dir_url( __FILE__ ) . 'build/index.css' );
wp_enqueue_script( 'jobplace-script', plugin_dir_url( __FILE__ ) . 'build/index.js', array( 'wp-element' ), '1.0.0', true );
}
*Add React stuff - *
In src/index.js -
import App from "./App";
import { render } from '@wordpress/element';
/**
* Import the stylesheet for the plugin.
*/
import './style/main.scss';
// Render the App component into the DOM
render(<App />, document.getElementById('jobplace'));
src/App.js
-
import React from 'react';
import Dashboard from './components/Dashboard';
const App = () => {
return (
<div>
<h2 className='app-title'>Job Place App</h2>
<hr />
<Dashboard />
</div>
);
}
export default App;
*Add Dashboard Component - src/components/Dashboard.jsx
*
import React from 'react'
const Dashboard = () => {
return (
<div className='dashboard'>
<div className="card">
<h3>Dashboard</h3>
<p>
Edit Dashboard component at <code>src/components/Dashboard.jsx</code>
</p>
</div>
</div>
);
}
export default Dashboard;
Add style in src/style/main.scss
-
#jobplace {
.app-title {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 1em;
}
}
Now run -
- Activate the plugin
- Run the wp-script
npm start
That's it.
See the final demo -
*Full Article and Github Link in more details explanation - *
Top comments (9)
great. I like how you dived straight into it and also posting pictures during every step.
Thank you @betpido.
Hi Sir,
Hope you are doing well,
✅ You said that "Wordpress Plugin Developer (requires test task)..." and we can do it with very high quality and fast, you can check our strong portfolio to make sure.
Three of our designs:
👉 dribbble.com/shots/19179672-BabySa...
👉 dribbble.com/shots/19212366-Xpace-...
👉 dribbble.com/shots/19230780-Panda-...
Also, I want to mention some of notable projects:
👉 annex.finance
👉 clubrare.xyz
👉 safegram.tech
👉 cryptochi.io
👉 gempad.app
🌎 Our Website: definft.digital
🚀 My superior Telegram: t.me/alexclarktg
📧 My superior Email: alex.cllaark@gmail.com
📩 Mind if I send over a few times to quick chat?
Thanks,
Hi Sir,
Hope you are doing well,
✅ You said that "Php & ReactJs (Test Task Required)..." and we can do it with very high quality and fast, you can check our strong portfolio to make sure.
Three of our designs:
👉 dribbble.com/shots/19179672-BabySa...
👉 dribbble.com/shots/19212366-Xpace-...
👉 dribbble.com/shots/19230780-Panda-...
Also, I want to mention some of notable projects:
👉 annex.finance
👉 clubrare.xyz
👉 safegram.tech
👉 cryptochi.io
👉 gempad.app
🌎 Our Website: definft.digital
🚀 My superior Telegram: t.me/alexclarktg
📧 My superior Email: alex.cllaark@gmail.com
📩 Mind if I send over a few times to quick chat?
Thanks,
Awesome, that would be helpful
How can i integrate this Dashboard page in a public page?
Simple.
Just enqueue the generated script in page specific or for all page.
Thanks, in step 1 where is the plugins directory located?
"All WordPress plugins you download and install on your site are stored in /wp-content/plugins/ folder."