Giter Club home page Giter Club logo

polyplugins / settings-class-for-wordpress Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 2.0 614 KB

Building a WordPress admin settings page that's easy to extend and looks great (Bootstrap) has never been easier. Our settings class for WordPress makes use of Bootstrap, Font-Awesome, dynamic navigations, and preloading to give developers the easiest method of implementation.

Home Page: https://www.polyplugins.com

License: GNU General Public License v3.0

PHP 75.67% CSS 8.40% JavaScript 15.94%
wordpress settings class admin wordpress-admin-panel fontawesome5 bootstrap4 wordpress-plugin wordpress-theme wordpress-development

settings-class-for-wordpress's Introduction

UPDATE

This is now maintained through the WordPress Directory and is now reusable without needing to include the code in multiple plugins

Settings Class for WordPress

image Our goal was to create a class that could easily be imported into projects to give easy methods to handle adding a clean and dynamic settings panel to the backend of WordPress.

Example

You can see this class in action in our Loginator plugin. Loginator's implementation does not use autoloading and therefor is not PSR-4 compliant. We did this to make invoking the logger easier.

Features

  • Bootstrap Container (Courtesy of Rush Frisby)
  • Font-Awesome Field Info Buttons and Bootstrap Toasts Sidebar Info Helper
  • jQuery Dynamic Navigation
  • Validation using validator.js
  • Settings Grouped Under One Option in Database (Saved as Multi-Dimensional Array)
  • Bootstrap Spinner Preloader (Prevents Layout Shifting on Load)

Usage

We built and used this in our fork of Devin Vinson's WordPress Plugin Boilerplate however you can adapt this to suit the structure of your plugin. Our PSR4 version of Devin's plugin uses Namespacing and Autoloading, which is perfect for this class. So if you aren't familiar with those, now is a wonderful time to learn, because we'll be referencing our fork moving forward.

In your constructor for your backend loader, you'll want to define the settings property referencing the class.

$this->settings = new Settings($this->plugin, $this->plugin_slug, $this->plugin_slug_id, $this->options_name, $this->options, $fields);

As you can see we are passing a few properties this class requires in order to initialize. Below are how those properties are defined.

$this->plugin           = __FILE__;
$this->plugin_slug      = dirname( plugin_basename( $this->plugin ) );
$this->plugin_slug_id   = str_replace( '-', '_', $this->plugin_slug );
$this->options_name     = $this->plugin_slug_id . '_options';
$this->options_page     = 'options-general.php';
$this->options          = get_option( $this->options_name );

The fields method is defined as follows

public function fields() {
  $fields = array(
    'general' => array(
      	array(
	  'name'    => __('Enabled', $this->plugin_slug),
	  'type'    => 'switch',
	  'default' => false,
	),
	array(
	  'name'    => __('Username', $this->plugin_slug),
	  'type'    => 'text',
	  'default' => false,
	  'help'    => __('Enter a username.', $this->plugin_slug),
	),
	array(
	  'name'    => __('Password', $this->plugin_slug),
	  'type'    => 'password',
	  'default' => false,
	  '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.', $this->plugin_slug),
	),
	array(
	  'name'     => __('Number', $this->plugin_slug),
	  'type'     => 'number',
	  'default'  => false,
	  'help'     => __('Enter a number.', $this->plugin_slug),
	  'required' => true,
	),
	array(
	  'name'    => __('Time', $this->plugin_slug),
	  'type'    => 'time',
	  'default' => false,
	  'help'    => __('Select a time.', $this->plugin_slug),
	),
	array(
	  'name'    => __('Date', $this->plugin_slug),
	  'type'    => 'date',
	  'default' => false,
	  'help'    => __('Select a date.', $this->plugin_slug),
	),
	array(
	  'name'    => __('Color', $this->plugin_slug),
	  'type'    => 'dropdown',
	  'options' => array('Red', 'Blue'),
	  'default' => false,
	  'help'    => __('Select a date.', $this->plugin_slug),
	),
    ),
    'woocommerce' => array(
      array(
        'name'    => __('Enabled', $this->plugin_slug),
        'type'    => 'switch',
        'default' => false,
        'help'    => __('Toggle this switch to the right to enable the plugin.', $this->plugin_slug),
      ),
    ),
    'license' => array(
      array(
        'name'    => __('Enabled', $this->plugin_slug),
        'type'    => 'switch',
        'default' => false,
        'help'    => __('Toggle this switch to the right to enable the plugin.', $this->plugin_slug),
      ),
    ),
    'support' => array(
      array(
        'name'    => __('Enabled', $this->plugin_slug),
        'type'    => 'switch',
        'default' => false,
        'help'    => __('Toggle this switch to the right to enable the plugin.', $this->plugin_slug),
      ),
    ),
  );

  return $fields;
}

You'll also have to initialize the settings on admin init and enqueue scripts on admin enqueue

$this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue' );
$this->loader->add_action( 'admin_init', $plugin_admin, 'admin_init' );
$this->loader->add_action( 'admin_menu', $plugin_admin, 'admin_menu' );
public function admin_init() {
  // Initialize settings
  $this->settings->init();
}

public function enqueue() {
  $this->settings->enqueue();
}

public function admin_menu() {
  $this->settings->admin_menu($this->options_page);
}

To-Do

  • Add switch toggle with additional options field
  • Add WP Color Picker field

Consider Contributing

We know this class will be useful to many in cutting down development times, but we would love help from the community. We are actively using this class for our software and will continue to build off of it, but we know it can become something greater, faster, with the help of the community. Feel free to submit a PR or submit any issues you have as we will be actively maintaining this.

settings-class-for-wordpress's People

Contributors

polyplugins avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

wprobot dexit

settings-class-for-wordpress's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.