Maniruzzaman Akash
Posted on
#react #wordpress #wordpressplugin #javascript
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 DOMrender(<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 (7)
Subscribe
betpido
betpido
I am building algorithms that will make it possible for computers to see, just like humans already do
-
Education
University of Cape Coast
-
Work
software developer
-
Joined
• Apr 25 '22
- Copy link
great. I like how you dived straight into it and also posting pictures during every step.
Maniruzzaman Akash
Maniruzzaman Akash
System Designer & Architect.Can develop/architect your system's Frontend with React/Vue and Backend with Laravel/Node JS and WordPress Plugin development.Interested to work with AI too...
-
Email
manirujjamanakash@gmail.com
-
Location
Dhaka-1200, Bangladesh
-
Education
Bachelor of Science at Computer Science and Engineering
-
Work
Full Stack Web/App Developer at WeDevs Ltd, Bangladesh
-
Joined
• Apr 29 '22
- Copy link
Thank you @betpido.
Smart121879
Smart121879
FullStack engineer
-
Education
Dalarna University,Bachelor of Computer Science
-
Work
Freelancer
-
Joined
• May 16 '23
- Copy link
Awesome, that would be helpful
VntValenzuela
VntValenzuela
-
Joined
• May 9 '23
- Copy link
Thanks, in step 1 where is the plugins directory located?
kresimir71
kresimir71
-
Joined
• May 18 '23
- Copy link
"All WordPress plugins you download and install on your site are stored in /wp-content/plugins/ folder."
sheikh303
sheikh303
-
Location
Dhaka, Bangladesh
-
Work
Software Engineer at tsl.io
-
Joined
• Nov 10 '22
- Copy link
How can i integrate this Dashboard page in a public page?
Maniruzzaman Akash
Maniruzzaman Akash
System Designer & Architect.Can develop/architect your system's Frontend with React/Vue and Backend with Laravel/Node JS and WordPress Plugin development.Interested to work with AI too...
-
Email
manirujjamanakash@gmail.com
-
Location
Dhaka-1200, Bangladesh
-
Education
Bachelor of Science at Computer Science and Engineering
-
Work
Full Stack Web/App Developer at WeDevs Ltd, Bangladesh
-
Joined
• Jan 5 '23
- Copy link
Simple.
Just enqueue the generated script in page specific or for all page.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.
For further actions, you may consider blocking this person and/or reporting abuse