Plugin Integration

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 init method to attach the loaded method to the init action.
  • Check Dependency: Verify the PolyPlugins\Settings class exists to confirm the Reusable Admin Panel is installed.
  • Instantiate Settings: Create a Settings instance 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 $plugin to __FILE__ to reference the main plugin file.
  • Namespace: Set $namespace to __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
Note: Paths for 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.

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., data for 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 $config for user assistance.