diff --git a/.gitignore b/.gitignore
index 723ef36..090a1f0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-.idea
\ No newline at end of file
+.idea
+.DS_Store
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..216004d
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,22 @@
+{
+    "name": "wp-settings-api",
+    "type": "library",
+    "description": "WordPress settings API Abstraction Class",
+    "keywords": ["wp","wordpress", "settings-api"],
+    "homepage": "https://github.com/wp-graphql/wp-settings-api",
+    "license": "GPLv2",
+    "authors": [
+        {
+            "name": "Tareq Hasan",
+            "email": "tareq@wedevs.com",
+            "homepage": "http://tareq.wedevs.com",
+            "role": "Developer"
+        }
+    ],
+    "require": {
+        "php": ">=5.2.4"
+    },
+    "autoload": {
+        "classmap": ["src/"]
+    }
+}
diff --git a/example/oop-example.php b/example/oop-example.php
new file mode 100755
index 0000000..ec51a08
--- /dev/null
+++ b/example/oop-example.php
@@ -0,0 +1,202 @@
+<?php
+
+/**
+ * WordPress settings API demo class
+ *
+ * @author Tareq Hasan
+ */
+if ( !class_exists('WPGraphQL_Settings_API_Test' ) ):
+class WPGraphQL_Settings_API_Test {
+
+    private $settings_api;
+
+    function __construct() {
+        $this->settings_api = new WPGraphQL_Settings_API;
+
+        add_action( 'admin_init', array($this, 'admin_init') );
+        add_action( 'admin_menu', array($this, 'admin_menu') );
+    }
+
+    function admin_init() {
+
+        //set the settings
+        $this->settings_api->set_sections( $this->get_settings_sections() );
+        $this->settings_api->set_fields( $this->get_settings_fields() );
+
+        //initialize settings
+        $this->settings_api->admin_init();
+    }
+
+    function admin_menu() {
+        add_options_page( 'Settings API', 'Settings API', 'delete_posts', 'settings_api_test', array($this, 'plugin_page') );
+    }
+
+    function get_settings_sections() {
+        $sections = array(
+            array(
+                'id'    => 'wedevs_basics',
+                'title' => __( 'Basic Settings', 'wedevs' )
+            ),
+            array(
+                'id'    => 'wedevs_advanced',
+                'title' => __( 'Advanced Settings', 'wedevs' )
+            )
+        );
+        return $sections;
+    }
+
+    /**
+     * Returns all the settings fields
+     *
+     * @return array settings fields
+     */
+    function get_settings_fields() {
+        $settings_fields = array(
+            'wedevs_basics' => array(
+                array(
+                    'name'              => 'text_val',
+                    'label'             => __( 'Text Input', 'wedevs' ),
+                    'desc'              => __( 'Text input description', 'wedevs' ),
+                    'placeholder'       => __( 'Text Input placeholder', 'wedevs' ),
+                    'type'              => 'text',
+                    'default'           => 'Title',
+                    'sanitize_callback' => 'sanitize_text_field'
+                ),
+                array(
+                    'name'              => 'number_input',
+                    'label'             => __( 'Number Input', 'wedevs' ),
+                    'desc'              => __( 'Number field with validation callback `floatval`', 'wedevs' ),
+                    'placeholder'       => __( '1.99', 'wedevs' ),
+                    'min'               => 0,
+                    'max'               => 100,
+                    'step'              => '0.01',
+                    'type'              => 'number',
+                    'default'           => 'Title',
+                    'sanitize_callback' => 'floatval'
+                ),
+                array(
+                    'name'        => 'textarea',
+                    'label'       => __( 'Textarea Input', 'wedevs' ),
+                    'desc'        => __( 'Textarea description', 'wedevs' ),
+                    'placeholder' => __( 'Textarea placeholder', 'wedevs' ),
+                    'type'        => 'textarea'
+                ),
+                array(
+                    'name'        => 'html',
+                    'desc'        => __( 'HTML area description. You can use any <strong>bold</strong> or other HTML elements.', 'wedevs' ),
+                    'type'        => 'html'
+                ),
+                array(
+                    'name'  => 'checkbox',
+                    'label' => __( 'Checkbox', 'wedevs' ),
+                    'desc'  => __( 'Checkbox Label', 'wedevs' ),
+                    'type'  => 'checkbox'
+                ),
+                array(
+                    'name'    => 'radio',
+                    'label'   => __( 'Radio Button', 'wedevs' ),
+                    'desc'    => __( 'A radio button', 'wedevs' ),
+                    'type'    => 'radio',
+                    'options' => array(
+                        'yes' => 'Yes',
+                        'no'  => 'No'
+                    )
+                ),
+                array(
+                    'name'    => 'selectbox',
+                    'label'   => __( 'A Dropdown', 'wedevs' ),
+                    'desc'    => __( 'Dropdown description', 'wedevs' ),
+                    'type'    => 'select',
+                    'default' => 'no',
+                    'options' => array(
+                        'yes' => 'Yes',
+                        'no'  => 'No'
+                    )
+                ),
+                array(
+                    'name'    => 'password',
+                    'label'   => __( 'Password', 'wedevs' ),
+                    'desc'    => __( 'Password description', 'wedevs' ),
+                    'type'    => 'password',
+                    'default' => ''
+                ),
+                array(
+                    'name'    => 'file',
+                    'label'   => __( 'File', 'wedevs' ),
+                    'desc'    => __( 'File description', 'wedevs' ),
+                    'type'    => 'file',
+                    'default' => '',
+                    'options' => array(
+                        'button_label' => 'Choose Image'
+                    )
+                )
+            ),
+            'wedevs_advanced' => array(
+                array(
+                    'name'    => 'color',
+                    'label'   => __( 'Color', 'wedevs' ),
+                    'desc'    => __( 'Color description', 'wedevs' ),
+                    'type'    => 'color',
+                    'default' => ''
+                ),
+                array(
+                    'name'    => 'password',
+                    'label'   => __( 'Password', 'wedevs' ),
+                    'desc'    => __( 'Password description', 'wedevs' ),
+                    'type'    => 'password',
+                    'default' => ''
+                ),
+                array(
+                    'name'    => 'wysiwyg',
+                    'label'   => __( 'Advanced Editor', 'wedevs' ),
+                    'desc'    => __( 'WP_Editor description', 'wedevs' ),
+                    'type'    => 'wysiwyg',
+                    'default' => ''
+                ),
+                array(
+                    'name'    => 'multicheck',
+                    'label'   => __( 'Multile checkbox', 'wedevs' ),
+                    'desc'    => __( 'Multi checkbox description', 'wedevs' ),
+                    'type'    => 'multicheck',
+                    'default' => array('one' => 'one', 'four' => 'four'),
+                    'options' => array(
+                        'one'   => 'One',
+                        'two'   => 'Two',
+                        'three' => 'Three',
+                        'four'  => 'Four'
+                    )
+                ),
+            )
+        );
+
+        return $settings_fields;
+    }
+
+    function plugin_page() {
+        echo '<div class="wrap">';
+
+        $this->settings_api->show_navigation();
+        $this->settings_api->show_forms();
+
+        echo '</div>';
+    }
+
+    /**
+     * Get all the pages
+     *
+     * @return array page names with key value pairs
+     */
+    function get_pages() {
+        $pages = get_pages();
+        $pages_options = array();
+        if ( $pages ) {
+            foreach ($pages as $page) {
+                $pages_options[$page->ID] = $page->post_title;
+            }
+        }
+
+        return $pages_options;
+    }
+
+}
+endif;
diff --git a/example/procedural-example.php b/example/procedural-example.php
new file mode 100755
index 0000000..f72c1ac
--- /dev/null
+++ b/example/procedural-example.php
@@ -0,0 +1,297 @@
+<?php
+/**
+ * This page shows the procedural or functional example
+ *
+ * OOP way example is given on the main plugin file.
+ *
+ * @author Tareq Hasan <tareq@weDevs.com>
+ */
+
+
+/**
+ * Registers settings section and fields
+ */
+if ( !function_exists( 'wedevs_admin_init' ) ):
+    function wedevs_admin_init() {
+
+        $sections = array(
+            array(
+                'id' => 'wedevs_basics',
+                'title' => __( 'Basic Settings', 'wedevs' )
+            ),
+            array(
+                'id' => 'wedevs_advanced',
+                'title' => __( 'Advanced Settings', 'wedevs' )
+            ),
+            array(
+                'id' => 'wedevs_others',
+                'title' => __( 'Other Settings', 'wpuf' )
+            )
+        );
+
+        $fields = array(
+            'wedevs_basics' => array(
+                array(
+                    'name' => 'text',
+                    'label' => __( 'Text Input', 'wedevs' ),
+                    'desc' => __( 'Text input description', 'wedevs' ),
+                    'type' => 'text',
+                    'default' => 'Title'
+                ),
+                array(
+                    'name' => 'textarea',
+                    'label' => __( 'Textarea Input', 'wedevs' ),
+                    'desc' => __( 'Textarea description', 'wedevs' ),
+                    'type' => 'textarea'
+                ),
+                array(
+                    'name' => 'checkbox',
+                    'label' => __( 'Checkbox', 'wedevs' ),
+                    'desc' => __( 'Checkbox Label', 'wedevs' ),
+                    'type' => 'checkbox'
+                ),
+                array(
+                    'name' => 'radio',
+                    'label' => __( 'Radio Button', 'wedevs' ),
+                    'desc' => __( 'A radio button', 'wedevs' ),
+                    'type' => 'radio',
+                    'options' => array(
+                        'yes' => 'Yes',
+                        'no' => 'No'
+                    )
+                ),
+                array(
+                    'name' => 'multicheck',
+                    'label' => __( 'Multile checkbox', 'wedevs' ),
+                    'desc' => __( 'Multi checkbox description', 'wedevs' ),
+                    'type' => 'multicheck',
+                    'options' => array(
+                        'one' => 'One',
+                        'two' => 'Two',
+                        'three' => 'Three',
+                        'four' => 'Four'
+                    )
+                ),
+                array(
+                    'name' => 'selectbox',
+                    'label' => __( 'A Dropdown', 'wedevs' ),
+                    'desc' => __( 'Dropdown description', 'wedevs' ),
+                    'type' => 'select',
+                    'default' => 'no',
+                    'options' => array(
+                        'yes' => 'Yes',
+                        'no' => 'No'
+                    )
+                ),
+                array(
+                    'name' => 'password',
+                    'label' => __( 'Password', 'wedevs' ),
+                    'desc' => __( 'Password description', 'wedevs' ),
+                    'type' => 'password',
+                    'default' => ''
+                ),
+                array(
+                    'name' => 'file',
+                    'label' => __( 'File', 'wedevs' ),
+                    'desc' => __( 'File description', 'wedevs' ),
+                    'type' => 'file',
+                    'default' => ''
+                ),
+                array(
+                    'name' => 'color',
+                    'label' => __( 'Color', 'wedevs' ),
+                    'desc' => __( 'Color description', 'wedevs' ),
+                    'type' => 'color',
+                    'default' => ''
+                )
+            ),
+            'wedevs_advanced' => array(
+                array(
+                    'name' => 'text',
+                    'label' => __( 'Text Input', 'wedevs' ),
+                    'desc' => __( 'Text input description', 'wedevs' ),
+                    'type' => 'text',
+                    'default' => 'Title'
+                ),
+                array(
+                    'name' => 'textarea',
+                    'label' => __( 'Textarea Input', 'wedevs' ),
+                    'desc' => __( 'Textarea description', 'wedevs' ),
+                    'type' => 'textarea'
+                ),
+                array(
+                    'name' => 'checkbox',
+                    'label' => __( 'Checkbox', 'wedevs' ),
+                    'desc' => __( 'Checkbox Label', 'wedevs' ),
+                    'type' => 'checkbox'
+                ),
+                array(
+                    'name' => 'radio',
+                    'label' => __( 'Radio Button', 'wedevs' ),
+                    'desc' => __( 'A radio button', 'wedevs' ),
+                    'type' => 'radio',
+                    'default' => 'no',
+                    'options' => array(
+                        'yes' => 'Yes',
+                        'no' => 'No'
+                    )
+                ),
+                array(
+                    'name' => 'multicheck',
+                    'label' => __( 'Multile checkbox', 'wedevs' ),
+                    'desc' => __( 'Multi checkbox description', 'wedevs' ),
+                    'type' => 'multicheck',
+                    'default' => array( 'one' => 'one', 'four' => 'four' ),
+                    'options' => array(
+                        'one' => 'One',
+                        'two' => 'Two',
+                        'three' => 'Three',
+                        'four' => 'Four'
+                    )
+                ),
+                array(
+                    'name' => 'selectbox',
+                    'label' => __( 'A Dropdown', 'wedevs' ),
+                    'desc' => __( 'Dropdown description', 'wedevs' ),
+                    'type' => 'select',
+                    'options' => array(
+                        'yes' => 'Yes',
+                        'no' => 'No'
+                    )
+                ),
+                array(
+                    'name' => 'password',
+                    'label' => __( 'Password', 'wedevs' ),
+                    'desc' => __( 'Password description', 'wedevs' ),
+                    'type' => 'password',
+                    'default' => ''
+                ),
+                array(
+                    'name' => 'file',
+                    'label' => __( 'File', 'wedevs' ),
+                    'desc' => __( 'File description', 'wedevs' ),
+                    'type' => 'file',
+                    'default' => ''
+                ),
+                array(
+                    'name' => 'color',
+                    'label' => __( 'Color', 'wedevs' ),
+                    'desc' => __( 'Color description', 'wedevs' ),
+                    'type' => 'color',
+                    'default' => ''
+                )
+            ),
+            'wedevs_others' => array(
+                array(
+                    'name' => 'text',
+                    'label' => __( 'Text Input', 'wedevs' ),
+                    'desc' => __( 'Text input description', 'wedevs' ),
+                    'type' => 'text',
+                    'default' => 'Title'
+                ),
+                array(
+                    'name' => 'textarea',
+                    'label' => __( 'Textarea Input', 'wedevs' ),
+                    'desc' => __( 'Textarea description', 'wedevs' ),
+                    'type' => 'textarea'
+                ),
+                array(
+                    'name' => 'checkbox',
+                    'label' => __( 'Checkbox', 'wedevs' ),
+                    'desc' => __( 'Checkbox Label', 'wedevs' ),
+                    'type' => 'checkbox'
+                ),
+                array(
+                    'name' => 'radio',
+                    'label' => __( 'Radio Button', 'wedevs' ),
+                    'desc' => __( 'A radio button', 'wedevs' ),
+                    'type' => 'radio',
+                    'options' => array(
+                        'yes' => 'Yes',
+                        'no' => 'No'
+                    )
+                ),
+                array(
+                    'name' => 'multicheck',
+                    'label' => __( 'Multile checkbox', 'wedevs' ),
+                    'desc' => __( 'Multi checkbox description', 'wedevs' ),
+                    'type' => 'multicheck',
+                    'options' => array(
+                        'one' => 'One',
+                        'two' => 'Two',
+                        'three' => 'Three',
+                        'four' => 'Four'
+                    )
+                ),
+                array(
+                    'name' => 'selectbox',
+                    'label' => __( 'A Dropdown', 'wedevs' ),
+                    'desc' => __( 'Dropdown description', 'wedevs' ),
+                    'type' => 'select',
+                    'options' => array(
+                        'yes' => 'Yes',
+                        'no' => 'No'
+                    )
+                ),
+                array(
+                    'name' => 'password',
+                    'label' => __( 'Password', 'wedevs' ),
+                    'desc' => __( 'Password description', 'wedevs' ),
+                    'type' => 'password',
+                    'default' => ''
+                ),
+                array(
+                    'name' => 'file',
+                    'label' => __( 'File', 'wedevs' ),
+                    'desc' => __( 'File description', 'wedevs' ),
+                    'type' => 'file',
+                    'default' => ''
+                ),
+                array(
+                    'name' => 'color',
+                    'label' => __( 'Color', 'wedevs' ),
+                    'desc' => __( 'Color description', 'wedevs' ),
+                    'type' => 'color',
+                    'default' => ''
+                )
+            )
+        );
+
+        $settings_api = new WPGraphQL_Settings_API;
+
+        //set sections and fields
+        $settings_api->set_sections( $sections );
+        $settings_api->set_fields( $fields );
+
+        //initialize them
+        $settings_api->admin_init();
+    }
+endif;
+add_action( 'admin_init', 'wedevs_admin_init' );
+
+if ( !function_exists( 'wedevs_admin_menu' ) ):
+    /**
+     * Register the plugin page
+     */
+    function wedevs_admin_menu() {
+        add_options_page( 'Settings API', 'Settings API', 'delete_posts', 'settings_api_test', 'wedevs_plugin_page' );
+    }
+endif;
+add_action( 'admin_menu', 'wedevs_admin_menu' );
+
+/**
+ * Display the plugin settings options page
+ */
+if ( !function_exists( 'wedevs_plugin_page' ) ):
+    function wedevs_plugin_page() {
+        $settings_api = new WPGraphQL_Settings_API;
+
+        echo '<div class="wrap">';
+        settings_errors();
+
+        $settings_api->show_navigation();
+        $settings_api->show_forms();
+
+        echo '</div>';
+    }
+endif;
diff --git a/plugin.php b/plugin.php
new file mode 100644
index 0000000..02d5ef2
--- /dev/null
+++ b/plugin.php
@@ -0,0 +1,14 @@
+<?php
+/**
+ * Plugin Name: WordPress Settings API
+ * Plugin URI: https://tareq.co/2012/06/wordpress-settings-api-php-class/
+ * Description: WordPress Settings API testing
+ * Author: Tareq Hasan
+ * Author URI: https://tareq.co
+ * Version: 1.3
+ */
+
+require_once dirname( __FILE__ ) . '/src/class.settings-api.php';
+require_once dirname( __FILE__ ) . '/example/oop-example.php';
+
+new WPGraphQL_Settings_API_Test();
\ No newline at end of file
diff --git a/readme.txt b/readme.txt
new file mode 100755
index 0000000..d747b23
--- /dev/null
+++ b/readme.txt
@@ -0,0 +1,84 @@
+=== Settings API ===
+Contributors: tareq1988
+Donate link: https://tareq.co/
+Tags: settings, options, admin, class, settings-api
+Requires at least: 3.3
+Tested up to: 4.6.1
+Stable tag: trunk
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+A PHP class wrapper for handling WordPress settings API. Gives a very handy way to build theme or plugins option panel.
+
+== Description ==
+
+= This plugin is for developers, not general users. =
+
+This is mainly a PHP class that you can use to build your themes and plugins option panel. It's a wrapper class that uses
+[Settings API](http://codex.wordpress.org/Settings_API) under the hood. All you need is to just pass the sections and fields
+you need as an PHP array. And your options panel will be build automatically on the fly with a tiny PHP class.
+
+This is mainly a demo plugin that uses the Settings API PHP class.
+
+Visit the [Github](https://github.com/tareq1988/wordpress-settings-api-class) for the latest development snapshot.
+
+= Usage Example =
+
+A nice tutorial is presented can be found [here](https://tareq.co/2012/06/wordpress-settings-api-php-class/) about how to use this PHP class
+
+== Installation ==
+
+1. Upload and install the plugin
+1. You'll have a new options page under the 'Settings' area
+
+== Frequently Asked Questions ==
+
+= What this plugin for? =
+
+It's mainly a plugin that demonstrates the Settings API PHP class
+
+= Whats the facility? =
+
+A plugin or theme developer can build their options panel with Settings API easily
+
+= What is Settings API ? =
+
+Settings API is a functionality from WordPress that helps developers to save their options data very easily and securely.
+More about [Settings API](http://codex.wordpress.org/Settings_API).
+
+== Screenshots ==
+
+1. The options panel build on the fly using the PHP Class
+
+== Changelog ==
+
+= v1.3 (27 September, 2016) =
+
+- [new] Placeholder support for text and textarea input
+- [new] min, max and step support for number field
+- [fix] Empty multicheck saving warning
+- [improved] Don't show the navigation if only one section exists
+
+= v1.1 (23 April, 2015) =
+
+- [new] Folder structure updated
+- [new] composer support added
+- [new] Number field added
+- [new] URL field added
+- [improved] wysiwyg field responsive support. Allow to pass options to wp_editor
+- [new] WP Media uploader added
+
+= v1.0 (16 July, 2014) =
+- [new] color, password and wysiwyg example added on plugin settings
+- [new] Color Picker added
+- [improved] Allow to set description for section
+- Some other old fixes ;)
+
+
+= 0.1 =
+* Initial release
+
+
+== Upgrade Notice ==
+
+.
diff --git a/screenshot-1.png b/screenshot-1.png
new file mode 100644
index 0000000..28caa59
Binary files /dev/null and b/screenshot-1.png differ
diff --git a/src/class.settings-api.php b/src/class.settings-api.php
new file mode 100755
index 0000000..729e0de
--- /dev/null
+++ b/src/class.settings-api.php
@@ -0,0 +1,658 @@
+<?php
+
+/**
+ * weDevs Settings API wrapper class
+ *
+ * @version 1.3 (27-Sep-2016)
+ *
+ * @author Tareq Hasan <tareq@weDevs.com>
+ * @link https://tareq.co Tareq Hasan
+ * @example example/oop-example.php How to use the class
+ */
+if ( !class_exists( 'WPGraphQL_Settings_API' ) ):
+class WPGraphQL_Settings_API {
+
+    /**
+     * settings sections array
+     *
+     * @var array
+     */
+    protected $settings_sections = array();
+
+    /**
+     * Settings fields array
+     *
+     * @var array
+     */
+    protected $settings_fields = array();
+
+    public function __construct() {
+        add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
+    }
+
+    /**
+     * Enqueue scripts and styles
+     */
+    function admin_enqueue_scripts() {
+        wp_enqueue_style( 'wp-color-picker' );
+
+        wp_enqueue_media();
+        wp_enqueue_script( 'wp-color-picker' );
+        wp_enqueue_script( 'jquery' );
+    }
+
+    /**
+     * Set settings sections
+     *
+     * @param array   $sections setting sections array
+     */
+    function set_sections( $sections ) {
+        $this->settings_sections = $sections;
+
+        return $this;
+    }
+
+    /**
+     * Add a single section
+     *
+     * @param array   $section
+     */
+    function add_section( $section ) {
+        $this->settings_sections[] = $section;
+
+        return $this;
+    }
+
+    /**
+     * Set settings fields
+     *
+     * @param array   $fields settings fields array
+     */
+    function set_fields( $fields ) {
+        $this->settings_fields = $fields;
+
+        return $this;
+    }
+
+    function add_field( $section, $field ) {
+        $defaults = array(
+            'name'  => '',
+            'label' => '',
+            'desc'  => '',
+            'type'  => 'text'
+        );
+
+        $arg = wp_parse_args( $field, $defaults );
+        $this->settings_fields[$section][] = $arg;
+
+        return $this;
+    }
+
+    /**
+     * Initialize and registers the settings sections and fileds to WordPress
+     *
+     * Usually this should be called at `admin_init` hook.
+     *
+     * This function gets the initiated settings sections and fields. Then
+     * registers them to WordPress and ready for use.
+     */
+    function admin_init() {
+        //register settings sections
+        foreach ( $this->settings_sections as $section ) {
+            if ( false == get_option( $section['id'] ) ) {
+                add_option( $section['id'] );
+            }
+
+            if ( isset($section['desc']) && !empty($section['desc']) ) {
+                $section['desc'] = '<div class="inside">' . $section['desc'] . '</div>';
+                $callback = function() use ( $section ) {
+		    echo str_replace( '"', '\"', $section['desc'] );
+		};
+            } else if ( isset( $section['callback'] ) ) {
+                $callback = $section['callback'];
+            } else {
+                $callback = null;
+            }
+
+            add_settings_section( $section['id'], $section['title'], $callback, $section['id'] );
+        }
+
+        //register settings fields
+        foreach ( $this->settings_fields as $section => $field ) {
+            foreach ( $field as $option ) {
+
+                $name = $option['name'];
+                $type = isset( $option['type'] ) ? $option['type'] : 'text';
+                $label = isset( $option['label'] ) ? $option['label'] : '';
+                $callback = isset( $option['callback'] ) ? $option['callback'] : array( $this, 'callback_' . $type );
+
+                $args = array(
+                    'id'                => $name,
+                    'class'             => isset( $option['class'] ) ? $option['class'] : $name,
+                    'label_for'         => "{$section}[{$name}]",
+                    'desc'              => isset( $option['desc'] ) ? $option['desc'] : '',
+                    'name'              => $label,
+                    'section'           => $section,
+                    'size'              => isset( $option['size'] ) ? $option['size'] : null,
+                    'options'           => isset( $option['options'] ) ? $option['options'] : '',
+                    'std'               => isset( $option['default'] ) ? $option['default'] : '',
+                    'sanitize_callback' => isset( $option['sanitize_callback'] ) ? $option['sanitize_callback'] : '',
+                    'type'              => $type,
+                    'placeholder'       => isset( $option['placeholder'] ) ? $option['placeholder'] : '',
+                    'min'               => isset( $option['min'] ) ? $option['min'] : '',
+                    'max'               => isset( $option['max'] ) ? $option['max'] : '',
+                    'step'              => isset( $option['step'] ) ? $option['step'] : '',
+                );
+
+                add_settings_field( "{$section}[{$name}]", $label, $callback, $section, $section, $args );
+            }
+        }
+
+        // creates our settings in the options table
+        foreach ( $this->settings_sections as $section ) {
+            register_setting( $section['id'], $section['id'], array( $this, 'sanitize_options' ) );
+        }
+    }
+
+    /**
+     * Get field description for display
+     *
+     * @param array   $args settings field args
+     */
+    public function get_field_description( $args ) {
+        if ( ! empty( $args['desc'] ) ) {
+            $desc = sprintf( '<p class="description">%s</p>', $args['desc'] );
+        } else {
+            $desc = '';
+        }
+
+        return $desc;
+    }
+
+    /**
+     * Displays a text field for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_text( $args ) {
+
+        $value       = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $size        = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
+        $type        = isset( $args['type'] ) ? $args['type'] : 'text';
+        $placeholder = empty( $args['placeholder'] ) ? '' : ' placeholder="' . $args['placeholder'] . '"';
+
+        $html        = sprintf( '<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s/>', $type, $size, $args['section'], $args['id'], $value, $placeholder );
+        $html       .= $this->get_field_description( $args );
+
+        echo $html;
+    }
+
+    /**
+     * Displays a url field for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_url( $args ) {
+        $this->callback_text( $args );
+    }
+
+    /**
+     * Displays a number field for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_number( $args ) {
+        $value       = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $size        = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
+        $type        = isset( $args['type'] ) ? $args['type'] : 'number';
+        $placeholder = empty( $args['placeholder'] ) ? '' : ' placeholder="' . $args['placeholder'] . '"';
+        $min         = ( $args['min'] == '' ) ? '' : ' min="' . $args['min'] . '"';
+        $max         = ( $args['max'] == '' ) ? '' : ' max="' . $args['max'] . '"';
+        $step        = ( $args['step'] == '' ) ? '' : ' step="' . $args['step'] . '"';
+
+        $html        = sprintf( '<input type="%1$s" class="%2$s-number" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s%7$s%8$s%9$s/>', $type, $size, $args['section'], $args['id'], $value, $placeholder, $min, $max, $step );
+        $html       .= $this->get_field_description( $args );
+
+        echo $html;
+    }
+
+    /**
+     * Displays a checkbox for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_checkbox( $args ) {
+
+        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+
+        $html  = '<fieldset>';
+        $html  .= sprintf( '<label for="wpuf-%1$s[%2$s]">', $args['section'], $args['id'] );
+        $html  .= sprintf( '<input type="hidden" name="%1$s[%2$s]" value="off" />', $args['section'], $args['id'] );
+        $html  .= sprintf( '<input type="checkbox" class="checkbox" id="wpuf-%1$s[%2$s]" name="%1$s[%2$s]" value="on" %3$s />', $args['section'], $args['id'], checked( $value, 'on', false ) );
+        $html  .= sprintf( '%1$s</label>', $args['desc'] );
+        $html  .= '</fieldset>';
+
+        echo $html;
+    }
+
+    /**
+     * Displays a multicheckbox for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_multicheck( $args ) {
+
+        $value = $this->get_option( $args['id'], $args['section'], $args['std'] );
+        $html  = '<fieldset>';
+        $html .= sprintf( '<input type="hidden" name="%1$s[%2$s]" value="" />', $args['section'], $args['id'] );
+        foreach ( $args['options'] as $key => $label ) {
+            $checked = isset( $value[$key] ) ? $value[$key] : '0';
+            $html    .= sprintf( '<label for="wpuf-%1$s[%2$s][%3$s]">', $args['section'], $args['id'], $key );
+            $html    .= sprintf( '<input type="checkbox" class="checkbox" id="wpuf-%1$s[%2$s][%3$s]" name="%1$s[%2$s][%3$s]" value="%3$s" %4$s />', $args['section'], $args['id'], $key, checked( $checked, $key, false ) );
+            $html    .= sprintf( '%1$s</label><br>',  $label );
+        }
+
+        $html .= $this->get_field_description( $args );
+        $html .= '</fieldset>';
+
+        echo $html;
+    }
+
+    /**
+     * Displays a radio button for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_radio( $args ) {
+
+        $value = $this->get_option( $args['id'], $args['section'], $args['std'] );
+        $html  = '<fieldset>';
+
+        foreach ( $args['options'] as $key => $label ) {
+            $html .= sprintf( '<label for="wpuf-%1$s[%2$s][%3$s]">',  $args['section'], $args['id'], $key );
+            $html .= sprintf( '<input type="radio" class="radio" id="wpuf-%1$s[%2$s][%3$s]" name="%1$s[%2$s]" value="%3$s" %4$s />', $args['section'], $args['id'], $key, checked( $value, $key, false ) );
+            $html .= sprintf( '%1$s</label><br>', $label );
+        }
+
+        $html .= $this->get_field_description( $args );
+        $html .= '</fieldset>';
+
+        echo $html;
+    }
+
+    /**
+     * Displays a selectbox for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_select( $args ) {
+
+        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $size  = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
+        $html  = sprintf( '<select class="%1$s" name="%2$s[%3$s]" id="%2$s[%3$s]">', $size, $args['section'], $args['id'] );
+
+        foreach ( $args['options'] as $key => $label ) {
+            $html .= sprintf( '<option value="%s"%s>%s</option>', $key, selected( $value, $key, false ), $label );
+        }
+
+        $html .= sprintf( '</select>' );
+        $html .= $this->get_field_description( $args );
+
+        echo $html;
+    }
+
+    /**
+     * Displays a textarea for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_textarea( $args ) {
+
+        $value       = esc_textarea( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $size        = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
+        $placeholder = empty( $args['placeholder'] ) ? '' : ' placeholder="'.$args['placeholder'].'"';
+
+        $html        = sprintf( '<textarea rows="5" cols="55" class="%1$s-text" id="%2$s[%3$s]" name="%2$s[%3$s]"%4$s>%5$s</textarea>', $size, $args['section'], $args['id'], $placeholder, $value );
+        $html        .= $this->get_field_description( $args );
+
+        echo $html;
+    }
+
+    /**
+     * Displays the html for a settings field
+     *
+     * @param array   $args settings field args
+     * @return string
+     */
+    function callback_html( $args ) {
+        echo $this->get_field_description( $args );
+    }
+
+    /**
+     * Displays a rich text textarea for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_wysiwyg( $args ) {
+
+        $value = $this->get_option( $args['id'], $args['section'], $args['std'] );
+        $size  = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : '500px';
+
+        echo '<div style="max-width: ' . $size . ';">';
+
+        $editor_settings = array(
+            'teeny'         => true,
+            'textarea_name' => $args['section'] . '[' . $args['id'] . ']',
+            'textarea_rows' => 10
+        );
+
+        if ( isset( $args['options'] ) && is_array( $args['options'] ) ) {
+            $editor_settings = array_merge( $editor_settings, $args['options'] );
+        }
+
+        wp_editor( $value, $args['section'] . '-' . $args['id'], $editor_settings );
+
+        echo '</div>';
+
+        echo $this->get_field_description( $args );
+    }
+
+    /**
+     * Displays a file upload field for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_file( $args ) {
+
+        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $size  = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
+        $id    = $args['section']  . '[' . $args['id'] . ']';
+        $label = isset( $args['options']['button_label'] ) ? $args['options']['button_label'] : __( 'Choose File' );
+
+        $html  = sprintf( '<input type="text" class="%1$s-text wpsa-url" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s"/>', $size, $args['section'], $args['id'], $value );
+        $html  .= '<input type="button" class="button wpsa-browse" value="' . $label . '" />';
+        $html  .= $this->get_field_description( $args );
+
+        echo $html;
+    }
+
+    /**
+     * Displays a password field for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_password( $args ) {
+
+        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $size  = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
+
+        $html  = sprintf( '<input type="password" class="%1$s-text" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s"/>', $size, $args['section'], $args['id'], $value );
+        $html  .= $this->get_field_description( $args );
+
+        echo $html;
+    }
+
+    /**
+     * Displays a color picker field for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_color( $args ) {
+
+        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $size  = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
+
+        $html  = sprintf( '<input type="text" class="%1$s-text wp-color-picker-field" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s" data-default-color="%5$s" />', $size, $args['section'], $args['id'], $value, $args['std'] );
+        $html  .= $this->get_field_description( $args );
+
+        echo $html;
+    }
+
+
+    /**
+     * Displays a select box for creating the pages select box
+     *
+     * @param array   $args settings field args
+     */
+    function callback_pages( $args ) {
+
+        $dropdown_args = array(
+            'selected' => esc_attr($this->get_option($args['id'], $args['section'], $args['std'] ) ),
+            'name'     => $args['section'] . '[' . $args['id'] . ']',
+            'id'       => $args['section'] . '[' . $args['id'] . ']',
+            'echo'     => 0
+        );
+        $html = wp_dropdown_pages( $dropdown_args );
+        echo $html;
+    }
+
+    /**
+     * Sanitize callback for Settings API
+     *
+     * @return mixed
+     */
+    function sanitize_options( $options ) {
+
+        if ( !$options ) {
+            return $options;
+        }
+
+        foreach( $options as $option_slug => $option_value ) {
+            $sanitize_callback = $this->get_sanitize_callback( $option_slug );
+
+            // If callback is set, call it
+            if ( $sanitize_callback ) {
+                $options[ $option_slug ] = call_user_func( $sanitize_callback, $option_value );
+                continue;
+            }
+        }
+
+        return $options;
+    }
+
+    /**
+     * Get sanitization callback for given option slug
+     *
+     * @param string $slug option slug
+     *
+     * @return mixed string or bool false
+     */
+    function get_sanitize_callback( $slug = '' ) {
+        if ( empty( $slug ) ) {
+            return false;
+        }
+
+        // Iterate over registered fields and see if we can find proper callback
+        foreach( $this->settings_fields as $section => $options ) {
+            foreach ( $options as $option ) {
+                if ( $option['name'] != $slug ) {
+                    continue;
+                }
+
+                // Return the callback name
+                return isset( $option['sanitize_callback'] ) && is_callable( $option['sanitize_callback'] ) ? $option['sanitize_callback'] : false;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Get the value of a settings field
+     *
+     * @param string  $option  settings field name
+     * @param string  $section the section name this field belongs to
+     * @param string  $default default text if it's not found
+     * @return string
+     */
+    function get_option( $option, $section, $default = '' ) {
+
+        $options = get_option( $section );
+
+        if ( isset( $options[$option] ) ) {
+            return $options[$option];
+        }
+
+        return $default;
+    }
+
+    /**
+     * Show navigations as tab
+     *
+     * Shows all the settings section labels as tab
+     */
+    function show_navigation() {
+        $html = '<h2 class="nav-tab-wrapper">';
+
+        $count = count( $this->settings_sections );
+
+        // don't show the navigation if only one section exists
+        if ( $count === 1 ) {
+            return;
+        }
+
+        foreach ( $this->settings_sections as $tab ) {
+            $html .= sprintf( '<a href="#%1$s" class="nav-tab" id="%1$s-tab">%2$s</a>', $tab['id'], $tab['title'] );
+        }
+
+        $html .= '</h2>';
+
+        echo $html;
+    }
+
+    /**
+     * Show the section settings forms
+     *
+     * This function displays every sections in a different form
+     */
+    function show_forms() {
+        ?>
+        <div class="metabox-holder">
+            <?php foreach ( $this->settings_sections as $form ) { ?>
+                <div id="<?php echo $form['id']; ?>" class="group" style="display: none;">
+                    <form method="post" action="options.php">
+                        <?php
+                        do_action( 'wsa_form_top_' . $form['id'], $form );
+                        settings_fields( $form['id'] );
+                        do_settings_sections( $form['id'] );
+                        do_action( 'wsa_form_bottom_' . $form['id'], $form );
+                        if ( isset( $this->settings_fields[ $form['id'] ] ) ):
+                        ?>
+                        <div style="padding-left: 10px">
+                            <?php submit_button(); ?>
+                        </div>
+                        <?php endif; ?>
+                    </form>
+                </div>
+            <?php } ?>
+        </div>
+        <?php
+        $this->script();
+    }
+
+    /**
+     * Tabbable JavaScript codes & Initiate Color Picker
+     *
+     * This code uses localstorage for displaying active tabs
+     */
+    function script() {
+        ?>
+        <script>
+            jQuery(document).ready(function($) {
+                //Initiate Color Picker
+                $('.wp-color-picker-field').wpColorPicker();
+
+                // Switches option sections
+                $('.group').hide();
+                var activetab = '';
+                if (typeof(localStorage) != 'undefined' ) {
+                    activetab = localStorage.getItem("activetab");
+                }
+
+                //if url has section id as hash then set it as active or override the current local storage value
+                if(window.location.hash){
+                    activetab = window.location.hash;
+                    if (typeof(localStorage) != 'undefined' ) {
+                        localStorage.setItem("activetab", activetab);
+                    }
+                }
+
+                if (activetab != '' && $(activetab).length ) {
+                    $(activetab).fadeIn();
+                } else {
+                    $('.group:first').fadeIn();
+                }
+                $('.group .collapsed').each(function(){
+                    $(this).find('input:checked').parent().parent().parent().nextAll().each(
+                    function(){
+                        if ($(this).hasClass('last')) {
+                            $(this).removeClass('hidden');
+                            return false;
+                        }
+                        $(this).filter('.hidden').removeClass('hidden');
+                    });
+                });
+
+                if (activetab != '' && $(activetab + '-tab').length ) {
+                    $(activetab + '-tab').addClass('nav-tab-active');
+                }
+                else {
+                    $('.nav-tab-wrapper a:first').addClass('nav-tab-active');
+                }
+                $('.nav-tab-wrapper a').click(function(evt) {
+                    $('.nav-tab-wrapper a').removeClass('nav-tab-active');
+                    $(this).addClass('nav-tab-active').blur();
+                    var clicked_group = $(this).attr('href');
+                    if (typeof(localStorage) != 'undefined' ) {
+                        localStorage.setItem("activetab", $(this).attr('href'));
+                    }
+                    $('.group').hide();
+                    $(clicked_group).fadeIn();
+                    evt.preventDefault();
+                });
+
+                $('.wpsa-browse').on('click', function (event) {
+                    event.preventDefault();
+
+                    var self = $(this);
+
+                    // Create the media frame.
+                    var file_frame = wp.media.frames.file_frame = wp.media({
+                        title: self.data('uploader_title'),
+                        button: {
+                            text: self.data('uploader_button_text'),
+                        },
+                        multiple: false
+                    });
+
+                    file_frame.on('select', function () {
+                        attachment = file_frame.state().get('selection').first().toJSON();
+                        self.prev('.wpsa-url').val(attachment.url).change();
+                    });
+
+                    // Finally, open the modal
+                    file_frame.open();
+                });
+        });
+        </script>
+        <?php
+        $this->_style_fix();
+    }
+
+    function _style_fix() {
+        global $wp_version;
+
+        if (version_compare($wp_version, '3.8', '<=')):
+        ?>
+        <style type="text/css">
+            /** WordPress 3.8 Fix **/
+            .form-table th { padding: 20px 10px; }
+            #wpbody-content .metabox-holder { padding-top: 5px; }
+        </style>
+        <?php
+        endif;
+    }
+
+}
+
+endif;