Test Plugin - React in WordPress Admin

A WordPress plugin demonstrating how to integrate React applications within the WordPress admin interface using modern development tools and WordPress Scripts.

Description

This plugin creates a custom admin page in WordPress and renders a React-based dashboard. It serves as a boilerplate/example for developers who want to build modern, interactive admin interfaces using React within WordPress.

Features

• ✨ React 18+ integration with WordPress admin
• 🎨 WordPress Components (@wordpress/components)
• 🌐 WordPress i18n support for translations
• ⚡ Modern build setup using @wordpress/scripts
• 🔧 Hot reload development with wp-scripts start
• 📦 Production-ready build system

Requirements

• Node.js: >= 20.10.0
• npm: >= 10.2.3
• WordPress: 5.0 or higher
• PHP: 7.4 or higher

Installation

From Source

1. Clone or download this repository into your WordPress plugins directory:

   cd wp-content/plugins/
   git clone [repository-url] react-in-wordpress-admin

2. Navigate to the plugin directory:

   cd react-in-wordpress-admin

3. Install dependencies:

   npm install

4. Build the plugin:

   npm run build

5. Activate the plugin through the WordPress admin interface

Development

Available Scripts

• npm start - Starts the development server with hot reload
• npm run build - Creates a production build
• npm run format - Formats code using WordPress standards
• npm run lint:js - Lints JavaScript files
• npm run lint:css - Lints CSS/SCSS files

Development Workflow

1. Start the development server:

   npm start

2. Make changes to files in the src/ directory

3. Changes will automatically rebuild and reload

4. Build for production before deployment:

   npm run build

File Structure

react-in-wordpress-admin/
├── build/              # Compiled production files (auto-generated)
├── includes/           # PHP includes
│   └── admin.php      # Admin menu and script enqueuing
├── src/               # Source files
│   └── dashboard/     # Dashboard React component
│       ├── Dashboard.js
│       └── index.js
├── test.php           # Main plugin file
├── package.json       # Node.js dependencies and scripts
├── webpack.config.js  # Custom webpack configuration
└── Readme.md         # This file

How It Works

1. Plugin Registration: The main plugin file (test.php) registers the plugin with WordPress
2. Admin Menu: Creates a new menu item "Test Plugin" in the WordPress admin sidebar
3. React Mounting: When the admin page loads, it:
   • Enqueues the compiled JavaScript bundle
   • Creates a React root element in the .test-plugin-wrap div
   • Renders the Dashboard component

Customization

Changing the Menu Icon

Edit includes/admin.php:

add_menu_page(
    'Test Plugin Settings',
    'Test Plugin',
    'manage_options',
    'test-plugin',
    'test_plugin_settings_page',
    'dashicons-admin-generic' // Change this to any dashicon
);

Adding New Components

1. Create your component in src/dashboard/
2. Import it into Dashboard.js
3. Run npm start to see changes live

Using WordPress Components

This plugin includes @wordpress/components. You can use any component:

import { Button, Panel, PanelBody, TextControl } from '@wordpress/components';

Translation

The plugin is translation-ready using WordPress i18n:

import { __ } from '@wordpress/i18n';

// In your component
<h1>{ __( 'Your text here', 'test-plugin' ) }</h1>

Troubleshooting

Build files not updating

• Clear the build/ directory and run npm run build again
• Make sure npm start is running during development

React not loading

• Check browser console for errors
• Verify the build files exist in the build/ directory
• Ensure the plugin is activated

Permission errors

• The admin page requires manage_options capability
• Make sure you're logged in as an administrator

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This plugin is licensed under the GPL-3.0-or-later license.

Author

Iqbal Hossain

Changelog

1.0.0

• Initial release
• React dashboard integration
• WordPress Scripts build system
• Basic admin interface

Resources

• WordPress Scripts Documentation
• WordPress Components
• React Documentation
• WordPress Plugin Handbook