Table of Contents
Let me share a sample plugin with you in this documentation.
Folder Structure #
I assume you have already downloaded the required files and that your plugin’s file structure is as follows.
Plugin Main File #
Here I am sharing a sample plugin’s main file that could help you get started right away with this framework.
sample-plugin.php
<?php
/**
* Plugin Name: Sample Plugin for ReactPanel
* Description: This is an example plugin just to show how to use ReactPanel inside your WordPress projects.
* Version: 1.0.0
* Author: Jaed Mosharraf
* Author URI: https://github.com/jaedm97/
*/
defined( 'ABSPATH' ) || exit;
defined( 'PLUGIN_DIR' ) || define( 'PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
defined( 'PLUGIN_URL' ) || define( 'PLUGIN_URL', plugin_dir_url( __FILE__ ) );
defined( 'PLUGIN_VERSION' ) || define( 'PLUGIN_VERSION', '1.0.0' );
require_once PLUGIN_DIR . 'wp-react-panel/wp-react-panel.php';
$page_data = array(
'page_title' => 'My Settings Page',
'menu_title' => 'My Settings',
'capability' => 'manage_options',
'menu_slug' => 'my-settings',
'icon' => 'dashicons-admin-generic',
'position' => 20,
);
$settings_data = array(
'general' => array(
'name' => 'General Settings',
'sections' => array(
'section_app_config' => array(
'id' => 'section_app_config',
'name' => 'Application Configuration',
'desc' => 'Configure the basic settings for your application.',
'fields' => array(
array(
'id' => 'app_name',
'title' => 'Application Name',
'desc' => 'Enter the name of your application',
'type' => 'text',
'placeholder' => 'My Awesome App',
'default' => 'My App',
'value' => get_option( 'app_name' ),
),
array(
'id' => 'app_status',
'title' => 'Enable Application',
'label' => 'Turn on to activate the application features',
'type' => 'switch',
'default' => 'yes',
'value' => get_option( 'app_status' ),
),
array(
'id' => 'max_users',
'title' => 'Maximum Users',
'desc' => 'Set the maximum number of concurrent users allowed',
'type' => 'number',
'placeholder' => 100,
'default' => 50,
'value' => get_option( 'max_users' ),
),
array(
'id' => 'app_mode',
'title' => 'Application Mode',
'subTitle' => 'Select the mode in which the application should run',
'type' => 'radio',
'options' => array(
'development' => 'Development',
'staging' => 'Staging',
'production' => 'Production',
),
'default' => 'production',
'value' => get_option( 'app_mode' ),
),
),
),
'section_notification' => array(
'id' => 'section_notification',
'name' => 'Notification Settings',
'desc' => 'Manage how and when notifications are sent to users.',
'fields' => array(
array(
'id' => 'notification_method',
'title' => 'Notification Method',
'desc' => 'Choose how notifications should be delivered',
'type' => 'select',
'options' => array(
'email' => 'Email',
'sms' => 'SMS',
'push' => 'Push Notification',
'all' => 'All Methods',
),
'placeholder' => 'Select method',
'default' => 'email',
'value' => get_option( 'notification_method' ),
),
array(
'id' => 'notification_frequency',
'title' => 'Notification Frequency',
'label' => 'Send notifications in real-time',
'type' => 'switch',
'default' => 'yes',
'value' => get_option( 'notification_frequency' ),
),
array(
'id' => 'notification_emails',
'title' => 'Additional Email Recipients',
'desc' => 'Add email addresses to receive notifications',
'type' => 'tags',
'placeholder' => 'email@example.com',
'value' => get_option( 'notification_emails' ),
),
array(
'id' => 'notification_channels',
'title' => 'Notification Channels',
'subTitle' => 'Select which channels should be enabled for notifications',
'type' => 'checkbox',
'options' => array(
'email_alerts' => 'Email Alerts',
'sms_alerts' => 'SMS Alerts',
'push_alerts' => 'Push Notifications',
'in_app' => 'In-App Notifications',
'webhook' => 'Webhook Notifications',
),
'default' => array( 'email_alerts', 'in_app' ),
'value' => get_option( 'notification_channels' ),
),
),
),
'section_security' => array(
'id' => 'section_security',
'name' => 'Security Settings',
'desc' => 'Configure security and access control settings.',
'fields' => array(
array(
'id' => 'api_key',
'title' => 'API Key',
'desc' => 'Your secure API key for authentication',
'type' => 'password',
'placeholder' => '************',
'value' => get_option( 'api_key' ),
),
array(
'id' => 'allowed_ips',
'title' => 'Allowed IP Addresses',
'desc' => 'Whitelist IP addresses that can access the API',
'type' => 'tags',
'placeholder' => '192.168.1.1',
'value' => get_option( 'allowed_ips' ),
),
array(
'id' => 'session_timeout',
'title' => 'Session Timeout (minutes)',
'desc' => 'Time before user sessions expire',
'type' => 'number',
'placeholder' => 30,
'default' => 15,
'value' => get_option( 'session_timeout' ),
),
array(
'id' => 'security_features',
'title' => 'Security Features',
'subTitle' => 'Enable additional security features for enhanced protection',
'type' => 'checkbox',
'options' => array(
'two_factor' => 'Two-Factor Authentication',
'ip_whitelist' => 'IP Whitelisting',
'ssl_enforce' => 'Enforce SSL/TLS',
'rate_limiting' => 'Rate Limiting',
'audit_logging' => 'Audit Logging',
),
'default' => array( 'two_factor', 'ssl_enforce' ),
'value' => get_option( 'security_features' ),
),
),
),
),
),
'users' => array(
'name' => 'User Management',
'sections' => array(
'section_user_roles' => array(
'id' => 'section_user_roles',
'name' => 'User Roles & Permissions',
'desc' => 'Define which user roles have access to the system.',
'fields' => array(
array(
'id' => 'enable_role_restrictions',
'title' => 'Enable Role Restrictions',
'label' => 'Restrict access based on user roles',
'type' => 'switch',
'default' => 'yes',
'value' => get_option( 'enable_role_restrictions' ),
),
array(
'id' => 'allowed_roles',
'title' => 'Allowed User Roles',
'desc' => 'Select which user roles can access the system',
'type' => 'select',
'options' => array(
'administrator' => 'Administrator',
'editor' => 'Editor',
'author' => 'Author',
'contributor' => 'Contributor',
'subscriber' => 'Subscriber',
'customer' => 'Customer',
),
'placeholder' => 'Select user roles',
'multiple' => true,
'default' => array( 'administrator', 'editor' ),
'value' => get_option( 'allowed_roles' ),
),
array(
'id' => 'default_permission_level',
'title' => 'Default Permission Level',
'subTitle' => 'Choose the default permission level for new users',
'type' => 'radio',
'options' => array(
'read_only' => 'Read Only',
'read_write' => 'Read & Write',
'full_access' => 'Full Access',
),
'default' => 'read_only',
'value' => get_option( 'default_permission_level' ),
),
),
),
'section_registration' => array(
'id' => 'section_registration',
'name' => 'User Registration',
'desc' => 'Control how new users can register on your platform.',
'fields' => array(
array(
'id' => 'allow_registration',
'title' => 'Allow User Registration',
'label' => 'Enable self-registration for new users',
'type' => 'switch',
'default' => 'yes',
'value' => get_option( 'allow_registration' ),
),
array(
'id' => 'registration_message',
'title' => 'Registration Welcome Message',
'desc' => 'Message displayed to users after successful registration',
'type' => 'text',
'placeholder' => 'Welcome to our platform!',
'default' => 'Thank you for registering!',
'value' => get_option( 'registration_message' ),
),
array(
'id' => 'blocked_email_domains',
'title' => 'Blocked Email Domains',
'desc' => 'Email domains that are not allowed to register',
'type' => 'tags',
'placeholder' => 'spam.com',
'value' => get_option( 'blocked_email_domains' ),
),
array(
'id' => 'default_role',
'title' => 'Default User Role',
'desc' => 'Role assigned to new users upon registration',
'type' => 'select',
'options' => array(
'subscriber' => 'Subscriber',
'customer' => 'Customer',
'contributor' => 'Contributor',
),
'placeholder' => 'Select default role',
'default' => 'subscriber',
'value' => get_option( 'default_role' ),
),
array(
'id' => 'registration_requirements',
'title' => 'Registration Requirements',
'subTitle' => 'Select which fields are required during registration',
'type' => 'checkbox',
'options' => array(
'email_verification' => 'Email Verification',
'phone_verification' => 'Phone Verification',
'terms_acceptance' => 'Terms & Conditions Acceptance',
'profile_photo' => 'Profile Photo',
'bio' => 'Bio/Description',
),
'default' => array( 'email_verification', 'terms_acceptance' ),
'value' => get_option( 'registration_requirements' ),
),
),
),
'section_user_limits' => array(
'id' => 'section_user_limits',
'name' => 'User Activity Limits',
'desc' => 'Set limits on user activities to prevent abuse.',
'fields' => array(
array(
'id' => 'enable_activity_limits',
'title' => 'Enable Activity Limits',
'label' => 'Track and limit user activities',
'type' => 'switch',
'default' => 'yes',
'value' => get_option( 'enable_activity_limits' ),
),
array(
'id' => 'max_login_attempts',
'title' => 'Maximum Login Attempts',
'desc' => 'Number of failed login attempts before account lockout',
'type' => 'number',
'placeholder' => 5,
'default' => 3,
'value' => get_option( 'max_login_attempts' ),
),
array(
'id' => 'lockout_duration',
'title' => 'Lockout Duration (hours)',
'desc' => 'How long accounts remain locked after exceeding login attempts',
'type' => 'number',
'placeholder' => 24,
'default' => 1,
'value' => get_option( 'lockout_duration' ),
),
),
),
),
),
'scheduling' => array(
'name' => 'Scheduling',
'sections' => array(
'section_maintenance' => array(
'id' => 'section_maintenance',
'name' => 'Maintenance Window',
'desc' => 'Schedule regular maintenance windows for system updates.',
'fields' => array(
array(
'id' => 'enable_maintenance_mode',
'title' => 'Enable Maintenance Mode',
'label' => 'Activate maintenance mode during scheduled windows',
'type' => 'switch',
'default' => 'no',
'value' => get_option( 'enable_maintenance_mode' ),
),
array(
'id' => 'maintenance_start',
'title' => 'Maintenance Start Time',
'desc' => 'Select the date and time when maintenance should begin',
'type' => 'datetime',
'settings' => array(
'timePicker' => false,
),
'placeholder' => 'Select start date and time',
'value' => get_option( 'maintenance_start' ),
),
array(
'id' => 'maintenance_end',
'title' => 'Maintenance End Time',
'desc' => 'Select the date and time when maintenance should end',
'type' => 'datetime',
'settings' => array(
'timePicker' => true,
),
'placeholder' => 'Select end date and time',
'value' => get_option( 'maintenance_end' ),
),
array(
'id' => 'maintenance_frequency',
'title' => 'Maintenance Frequency',
'subTitle' => 'How often should maintenance occur',
'type' => 'radio',
'options' => array(
'weekly' => 'Weekly',
'biweekly' => 'Bi-weekly',
'monthly' => 'Monthly',
'quarterly' => 'Quarterly',
),
'default' => 'monthly',
'value' => get_option( 'maintenance_frequency' ),
),
),
),
'section_backup' => array(
'id' => 'section_backup',
'name' => 'Automated Backups',
'desc' => 'Configure automated backup schedules for your data.',
'fields' => array(
array(
'id' => 'enable_auto_backup',
'title' => 'Enable Automated Backups',
'label' => 'Automatically backup data on schedule',
'type' => 'switch',
'default' => 'yes',
'value' => get_option( 'enable_auto_backup' ),
),
array(
'id' => 'backup_time',
'title' => 'Backup Time',
'desc' => 'Select the time when daily backups should run',
'type' => 'datetime',
'placeholder' => 'Select backup time',
'value' => get_option( 'backup_time' ),
),
array(
'id' => 'backup_frequency',
'title' => 'Backup Frequency',
'subTitle' => 'How often should backups be created',
'type' => 'radio',
'options' => array(
'hourly' => 'Hourly',
'daily' => 'Daily',
'weekly' => 'Weekly',
'monthly' => 'Monthly',
),
'default' => 'daily',
'value' => get_option( 'backup_frequency' ),
),
array(
'id' => 'backup_types',
'title' => 'Backup Types',
'subTitle' => 'Select what should be included in backups',
'type' => 'checkbox',
'options' => array(
'database' => 'Database',
'files' => 'Files & Media',
'config' => 'Configuration Files',
'logs' => 'System Logs',
'user_data' => 'User Data',
),
'default' => array( 'database', 'files', 'config' ),
'value' => get_option( 'backup_types' ),
),
array(
'id' => 'backup_retention',
'title' => 'Backup Retention (days)',
'desc' => 'Number of days to retain backups before deletion',
'type' => 'number',
'placeholder' => 30,
'default' => 30,
'value' => get_option( 'backup_retention' ),
),
),
),
'section_reports' => array(
'id' => 'section_reports',
'name' => 'Scheduled Reports',
'desc' => 'Configure automated report generation and delivery.',
'fields' => array(
array(
'id' => 'enable_scheduled_reports',
'title' => 'Enable Scheduled Reports',
'label' => 'Automatically generate and send reports',
'type' => 'switch',
'default' => 'yes',
'value' => get_option( 'enable_scheduled_reports' ),
),
array(
'id' => 'report_generation_time',
'title' => 'Report Generation Time',
'desc' => 'When should reports be generated',
'type' => 'datetime',
'placeholder' => 'Select report time',
'value' => get_option( 'report_generation_time' ),
),
array(
'id' => 'report_types',
'title' => 'Report Types',
'subTitle' => 'Select which reports should be generated',
'type' => 'checkbox',
'options' => array(
'usage_stats' => 'Usage Statistics',
'user_activity' => 'User Activity',
'security_audit' => 'Security Audit',
'performance' => 'Performance Metrics',
'financial' => 'Financial Summary',
),
'default' => array( 'usage_stats', 'user_activity' ),
'value' => get_option( 'report_types' ),
),
array(
'id' => 'report_format',
'title' => 'Report Format',
'subTitle' => 'Choose the format for generated reports',
'type' => 'radio',
'options' => array(
'pdf' => 'PDF',
'csv' => 'CSV',
'excel' => 'Excel (XLSX)',
'json' => 'JSON',
),
'default' => 'pdf',
'value' => get_option( 'report_format' ),
),
array(
'id' => 'report_recipients',
'title' => 'Report Recipients',
'desc' => 'Email addresses to receive scheduled reports',
'type' => 'tags',
'placeholder' => 'admin@example.com',
'value' => get_option( 'report_recipients' ),
),
),
),
),
),
);
$admin_settings = new WPReactPanel( $page_data, $settings_data, PLUGIN_URL, PLUGIN_VERSION );
