The easiest way to install Settings Class for WordPress is via our Boilerplate Generator. Once generated you can follow the below steps:
- Make sure you have composer installed
- Backup WordPress
- Copy the folder within the generated zip to your
/wp-content/plugins/directory. - Inside your generated plugin folder
/wp-content/plugins/your-plugin/runcomposer install - Activate the plugin
- Visit Settings -> Your Plugin in the backend of WordPress.
After installation you can adjust the config and fields used in the settings class.
Configuration
See our Parameters Documentation to control the settings appearance, behavior, and integrations. To adjust what fields display and their types, please see Fields Documentation.
Example Plugin
If you already have an understanding of PSR-4 and don’t need a boilerplate you can create a test-plugin.php file within a new /wp-content/plugins/test-plugin/ folder and add the below code:
<?php
/**
* Plugin Name: Test Plugin
* Description: Test
* Version: 1.0.0
* Author: Poly Plugins
* Author URI: https://next.polyplugins.com
* Plugin URI: https://next.polyplugins.com
*/
namespace PolyPlugins\Test_Plugin;
require plugin_dir_path( __FILE__ ) . 'vendor/autoload.php';
use PolyPlugins\Settings\Settings;
if (!defined('ABSPATH')) exit;
class Test_Plugin
{
private $plugin;
private $namespace;
private $plugin_slug;
private $config;
private $fields;
private $settings;
public function __construct()
{
$this->plugin = __FILE__;
$this->namespace = __NAMESPACE__;
$this->plugin_slug = dirname(plugin_basename($this->plugin));
$this->config = array(
'name' => __('Test Plugin', 'test-plugin'), // The plugin name. Comment out to have it build the name from plugin slug
'menu_name' => __('Test Plugin', 'test-plugin'), // The name you want to show in the admin menu. Comment out to have it build the name from plugin slug
'settings_name' => 'test_plugin_settings_polyplugins, // To prevent conflicts you should include your company name as the suffix. This is the setting name you want to use for get_option.
'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
'css' => '/css/style.css', // Your custom colors and styles. Comment out to use only the default style.
'js' => '/js/admin.js', // Your custom javascript. Comment out to only use the default js.
'template' => 'recharge', // Change the theme the settings uses. Comment out to use the default or enter 'default'
'support' => 'https://next.polyplugins.com/support/', // Your support link. Comment out to have no support link.
'action_links' => array( // Optional, add action links to the listing on admin plugins page
array(
// Generates url for settings automatically
'label' => __('Settings', 'test-plugin'),
'style' => 'color: orange; font-weight: 700;',
'external' => false
),
array(
'url' => 'https://next.polyplugins.com',
'label' => __('Go Pro', 'test-plugin'),
'style' => 'color: green; font-weight: 700;',
'external' => true
),
),
'meta_links' => array( // Optional, add meta links to the listing on admin plugins page
array(
'url' => 'https://github.com/users/PolyPlugins/projects/4',
'label' => __('Roadmap', 'test-plugin'),
'style' => 'color: purple; font-weight: 700;',
'external' => true
),
array(
// Generates url for support automatically
'label' => __('Support', 'test-plugin'),
'style' => 'font-weight: 700;',
'external' => true
),
),
'sidebar' => array( // Optional, add a permanent sidebar
'heading' => __('Something Not Working?', 'test-plugin'),
'body' => __('Feel free to reach out!', 'test-plugin'),
'button_label' => __('Email Us', 'test-plugin'),
'button_url' => 'https://next.polyplugins.com/contact/'
),
);
$this->fields = array(
'general' => array(
'icon' => 'gear-fill',
'fields' => array(
array(
'name' => __('Enabled', 'test-plugin'),
'type' => 'switch',
'default' => false,
),
array(
'name' => __('Button', 'test-plugin'),
'label' => __('Dual Buttons', 'test-plugin'),
'type' => 'button',
'data' => array(
array(
'title' => __('Action 1', 'test-plugin'), // general-action-1 would be the id you'd target in js
'class' => 'primary',
),
array(
'title' => __('Action 2', 'test-plugin'),
'class' => 'secondary',
'url' => 'https://next.polyplugins.com', // If no url then javascript:void(0) is used, this is useful for custom js
'target' => '_blank',
)
)
),
array(
'name' => __('Username', 'test-plugin'),
'label' => __('The Username', 'test-plugin'),
'description' => __('Enter a description.', 'test-plugin'),
'type' => 'text',
'placeholder' => __('Enter your username...', 'test-plugin'),
'default' => false,
'help' => __('Enter a username.', 'test-plugin'),
),
array(
'name' => __('Textarea', 'test-plugin'),
'type' => 'textarea',
'default' => __('Description goes here...', 'test-plugin'),
'help' => __('Enter a description.', 'test-plugin'),
),
array(
'name' => __('Larger Textarea', 'test-plugin'),
'type' => 'textarea',
'rows' => 6,
'default' => __('Description goes here...', 'test-plugin'),
'help' => __('Enter a description.', 'test-plugin'),
),
array(
'name' => __('Email', 'test-plugin'),
'type' => 'email',
'default' => '[email protected]',
'help' => __('Enter your email...', 'test-plugin'),
),
array(
'name' => __('URL', 'test-plugin'),
'type' => 'url',
'default' => false,
'help' => __('Enter a URL. Ex: https://www.example.com', 'test-plugin'),
),
array(
'name' => __('Password', 'test-plugin'),
'type' => 'password',
'default' => 'test',
'help' => __('Enter a password. Note: This is stored in the DB as plain text as most other plugins do, we will change this if requested.', 'test-plugin'),
),
array(
'name' => __('Number', 'test-plugin'),
'type' => 'number',
'min' => 1,
'max' => 10,
'step' => 2,
'default' => false,
'help' => __('Enter a number.', 'test-plugin'),
'required' => true,
),
array(
'name' => __('Time', 'test-plugin'),
'type' => 'time',
'default' => false,
'help' => __('Select a time.', 'test-plugin'),
),
array(
'name' => __('Date', 'test-plugin'),
'type' => 'date',
'default' => false,
'help' => __('Select a date.', 'test-plugin'),
),
array(
'name' => __('Color Picker', 'test-plugin'),
'type' => 'color',
'default' => '#00ff00',
'help' => __('Select a color.', 'test-plugin'),
),
array(
'name' => __('Dropdown', 'test-plugin'),
'type' => 'dropdown',
'options' => array(__('Red', 'test-plugin'), __('Blue', 'test-plugin')),
'default' => false,
'help' => __('Select an option from the dropdown.', 'test-plugin'),
),
array(
'name' => __('Disabled Dropdown', 'test-plugin'),
'type' => 'dropdown',
'options' => array(__('Red', 'test-plugin'), __('Blue', 'test-plugin')),
'default' => false,
'disabled' => true,
'help' => __('Select an option from the dropdown.', 'test-plugin'),
),
),
'subsections' => array(
'debug' => array(
'icon' => 'bug-fill',
'label' => __('Debug', 'test-plugin'),
'fields' => array(
array(
'name' => __('Debug Mode', 'test-plugin'),
'type' => 'switch',
'default' => false,
),
)
),
),
),
'api' => array(
'icon' => 'cloud-arrow-up-fill',
'note' => array(
'message' => __('Use notes to display messages about specific sections', 'test-plugin'),
'class' => 'warning', // Use success, warning, or error
),
'fields' => array(
array(
'name' => __('Dropdown Toggle', 'test-plugin'),
'type' => 'dropdown_toggle',
'options' => array(
'Production' => array(
'name' => __('API Key', 'test-plugin'),
'type' => 'text',
),
'Development' => array(
'name' => __('API Key', 'test-plugin'),
'type' => 'text',
)
),
),
),
)
);
}
public function init(){
add_action('init', array($this, 'loaded'));
}
public function loaded() {
if (!class_exists('Settings')) {
$this->settings = new Settings($this->plugin, $this->namespace, $this->config, $this->fields);
$this->settings->init();
}
}
}
$test_plugin = new Test_Plugin;
$test_plugin->init();
You’ll need to run composer require polyplugins/settings-class-for-wordpress within the test-plugin directory. After that you can activate the plugin and see the settings under Settings -> Test Plugin in the backend of WordPress.
