This guide highlights the essential steps to integrate the Reusable Admin Panel into a WordPress plugin for creating a settings page.
1. Plugin Initialization
- Hook into WordPress: Use the
initmethod to attach theloadedmethod to theinitaction. - Check Dependency: Verify the
PolyPlugins\Settingsclass exists to confirm the Reusable Admin Panel is installed. - Instantiate Settings: Create a
Settingsinstance with the plugin file, namespace, configuration, and fields. - Handle Missing Dependency: Display an admin notice if the Reusable Admin Panel is not installed, linking to its installation page.
Example:
public function init() {
add_action('init', array($this, 'loaded'));
}
public function loaded() {
if (class_exists('PolyPlugins\Settings')) {
$this->settings = new Settings($this->plugin, $this->namespace, $this->config, $this->fields);
$this->settings->init();
} else {
$this->add_notice('"' . $this->plugin_name . '" requires <a href="/wp-admin/plugin-install.php?tab=plugin-information&plugin=reusable-admin-panel&TB_iframe=true&width=772&height=608" class="thickbox open-plugin-details-modal" aria-label="More information about Reusable Admin Panel" data-title="Reusable Admin Panel">Reusable Admin Panel</a> to be installed.');
}
}
2. Plugin Properties
- Plugin File: Set
$pluginto__FILE__to reference the main plugin file. - Namespace: Set
$namespaceto__NAMESPACE__to avoid conflicts.
Example:
$this->plugin = __FILE__;
$this->namespace = __NAMESPACE__;
3. Configuration
The config section defines the settings for the Reusable Admin Panel, controlling its integration, appearance, and behavior within the WordPress admin dashboard. This configuration is set in the $this->config array.
Available Options
| Parameter | Type | Description | Required | Default |
|---|---|---|---|---|
page |
String | The parent page under which the settings submenu appears. Use options-general.php for the Settings menu or other pages like woocommerce for a submenu under WooCommerce. |
No | – |
position |
Integer | The position of the submenu item. Lower numbers move the link higher in the submenu list. | No | – |
capability |
String | The user capability required to view and edit the settings (e.g., manage_options for administrators). |
No | – |
logo |
String | Path to a custom logo for the admin panel. Relative to the plugin root. Comment out to use the default Reusable Admin Panel logo. | No | Default logo |
css |
String | Path to a custom CSS file for styling the admin panel. Relative to the plugin root. Comment out to use the default styles. | No | Default styles |
js |
String | Path to a custom JavaScript file for the admin panel. Relative to the plugin root. Comment out to use the default JavaScript. | No | Default JavaScript |
support |
String | URL to a support page for the plugin. Comment out to remove the support link. | No | – |
logo, css, and js should be relative to the plugin root directory. Ensure files are accessible and properly enqueued to avoid errors.Example
Below is an example of how to define the config array for the Reusable Admin Panel settings class.
$this->config = array(
'page' => 'options-general.php', // You can use non php pages such as woocommerce here to display a submenu under Woocommerce
'position' => 1, // Lower number moves the link position up in the submenu
'capability' => 'manage_options', // What permission is required to see and edit settings
'logo' => '/img/logo.png', // Your custom logo. Comment out this line to use the Reusable Admin Panel logo
'css' => '/css/style.css', // Your custom colors and styles. Comment out to use default style.
'js' => '/js/admin.js', // Your custom javascript. Comment out to use default js.
'support' => 'https://www.polyplugins.com/support/', // Your support link. Comment out to have no support link.
);
This configuration sets the admin panel as a submenu under the WordPress Settings menu, positions it at the top of the submenu, restricts access to users with manage_options capability, and includes custom logo, CSS, JavaScript, and support link.
Usage Notes
- The
page parameter determines the parent menu. Common values include options-general.php (Settings), edit.php (Posts), or plugin-specific pages like woocommerce.
- Lower
position values prioritize the submenu item higher in the list. If omitted, WordPress assigns a default position.
- Use standard WordPress capabilities for
capability (e.g., manage_options, edit_posts) to control access.
- Custom
logo, css, and js files must be placed in the correct plugin directory and referenced with a leading slash (e.g., /img/logo.png).
- The
support URL should point to a valid external or internal support page. Ensure it uses https:// for security.
page parameter determines the parent menu. Common values include options-general.php (Settings), edit.php (Posts), or plugin-specific pages like woocommerce.position values prioritize the submenu item higher in the list. If omitted, WordPress assigns a default position.capability (e.g., manage_options, edit_posts) to control access.logo, css, and js files must be placed in the correct plugin directory and referenced with a leading slash (e.g., /img/logo.png).support URL should point to a valid external or internal support page. Ensure it uses https:// for security.4. Fields Array
Define the $fields array to specify settings fields, organized by sections (e.g., general).
You can see all of the available fields in our Fields Documentation.
As an example your fields property would look like this:
- name: Field identifier and default label.
- type: Field type (e.g.,
switch,button,text). - default: Default value (optional).
- Additional parameters like
help,placeholder, or type-specific options (e.g.,datafor buttons).
Example:
$this->fields = array(
'general' => array(
array(
'name' => __('Enabled', $this->plugin_slug),
'type' => 'switch',
'default' => false,
),
),
);
5. Example
Once you have your plugin, namespace, config, and fields defined you’ll instantiate the settings class with those properties:
$this->settings = new Settings($this->plugin, $this->namespace, $this->config, $this->fields);
$this->settings->init();
You can also see a full plugin example here.
6. Usage Notes
- Dependency: The Reusable Admin Panel must be installed and activated.
- Security: Reusable Admin Panel handles sanitization.
- Accessing Settings: Use
$settings->get_option(section, field)to retrieve saved values. - Support: Provide a support link in
$configfor user assistance.