File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>&lt;?php

if ( ! defined( &#039;ABSPATH&#039; ) ) {
    exit;
}

/**
 * Visual Portfolio Settings API wrapper class
 * based on weDevs Settings API
 *
 * ADDED PR: https://github.com/tareq1988/wordpress-settings-api-class/pull/47
 * ADDED: enqueue scripts manually, without `admin_enqueue_scripts` action.
 * ADDED: new controls such as toggle and number slider.
 *
 * @author Tareq Hasan &lt;tareq@weDevs.com&gt;
 * @link https://tareq.co Tareq Hasan
 */
class Visual_Portfolio_Settings_API {

    /**
     * Settings sections array
     *
     * @var array
     */
    protected $settings_sections = array();

    /**
     * Settings fields array
     *
     * @var array
     */
    protected $settings_fields = array();

    /**
     * Visual_Portfolio_Settings_API constructor.
     */
    public function __construct() {
        // add_action( &#039;admin_enqueue_scripts&#039;, array( $this, &#039;admin_enqueue_scripts&#039; ) );
    }

    /**
     * Enqueue scripts and styles
     */
    public function admin_enqueue_scripts() {
        wp_enqueue_style( &#039;wp-color-picker&#039; );

        wp_enqueue_media();
        wp_enqueue_script( &#039;wp-color-picker&#039; );
        wp_enqueue_script( &#039;jquery&#039; );
        Visual_Portfolio_Assets::enqueue_script( &#039;conditionize&#039;, &#039;assets/vendor/conditionize/conditionize.min&#039;, array( &#039;jquery&#039; ), &#039;1.0.5&#039; );

        Visual_Portfolio_Assets::enqueue_style( &#039;select2&#039;, &#039;assets/vendor/select2/select2.min&#039;, array(), &#039;4.0.13&#039; );
        Visual_Portfolio_Assets::enqueue_script( &#039;select2&#039;, &#039;assets/vendor/select2/select2.min&#039;, array( &#039;jquery&#039; ), &#039;4.0.13&#039; );
    }

    /**
     * Set settings sections
     *
     * @param array $sections setting sections array
     */
    public function set_sections( $sections ) {
        $this-&gt;settings_sections = $sections;

        return $this;
    }

    /**
     * Add a single section
     *
     * @param array $section
     */
    public function add_section( $section ) {
        $this-&gt;settings_sections[] = $section;

        return $this;
    }

    /**
     * Set settings fields
     *
     * @param array $fields settings fields array
     */
    public function set_fields( $fields ) {
        $this-&gt;settings_fields = $fields;

        return $this;
    }

    public function add_field( $section, $field ) {
        $defaults = array(
            &#039;name&#039;   =&gt; &#039;&#039;,
            &#039;label&#039;  =&gt; &#039;&#039;,
            &#039;desc&#039;   =&gt; &#039;&#039;,
            &#039;type&#039;   =&gt; &#039;text&#039;,
            &#039;is_pro&#039; =&gt; false,
        );

        $arg = wp_parse_args( $field, $defaults );
        $this-&gt;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.
     */
    public function admin_init() {
        // register settings sections
        foreach ( $this-&gt;settings_sections as $section ) {
            if ( false == get_option( $section[&#039;id&#039;] ) ) {
                add_option( $section[&#039;id&#039;] );
            }

            if ( isset( $section[&#039;desc&#039;] ) &amp;&amp; ! empty( $section[&#039;desc&#039;] ) ) {
                $section[&#039;desc&#039;] = &#039;&lt;div class=&quot;inside&quot;&gt;&#039; . $section[&#039;desc&#039;] . &#039;&lt;/div&gt;&#039;;
                $callback = create_function( &#039;&#039;, &#039;echo &quot;&#039; . str_replace( &#039;&quot;&#039;, &#039;\&quot;&#039;, $section[&#039;desc&#039;] ) . &#039;&quot;;&#039; );
            } elseif ( isset( $section[&#039;callback&#039;] ) ) {
                $callback = $section[&#039;callback&#039;];
            } else {
                $callback = null;
            }

            add_settings_section( $section[&#039;id&#039;], $section[&#039;title&#039;], $callback, $section[&#039;id&#039;] );
        }

        // register settings fields
        foreach ( $this-&gt;settings_fields as $section =&gt; $field ) {
            foreach ( $field as $option ) {

                $name = $option[&#039;name&#039;];
                $type = isset( $option[&#039;type&#039;] ) ? $option[&#039;type&#039;] : &#039;text&#039;;
                $label = isset( $option[&#039;label&#039;] ) ? $option[&#039;label&#039;] : &#039;&#039;;
                $callback = isset( $option[&#039;callback&#039;] ) ? $option[&#039;callback&#039;] : array( $this, &#039;callback_&#039; . $type );
                $class_name = isset( $option[&#039;class&#039;] ) ? $option[&#039;class&#039;] : $name;
                $is_pro = isset( $option[&#039;is_pro&#039;] ) ? $option[&#039;is_pro&#039;] : false;

                if ( $is_pro ) {
                    $class_name .= &#039; vpf-settings-control-pro&#039;;
                    $go_pro_url = Visual_Portfolio_Admin::get_plugin_site_url(
                        array(
                            &#039;utm_medium&#039;   =&gt; &#039;settings_page&#039;,
                            &#039;utm_campaign&#039; =&gt; esc_attr( $name ),
                        )
                    );
                    $label .= &#039;&lt;a class=&quot;vpf-settings-control-pro-label&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;&#039; . esc_url( $go_pro_url ) . &#039;&quot;&gt;?&lt;span&gt;&#039; . esc_html__( &#039;This feature is available in the Pro plugin only.&#039;, &#039;visual-portfolio&#039; ) . &#039;&lt;/span&gt;&lt;/a&gt;&#039;;
                }

                $args = array(
                    &#039;id&#039;                =&gt; $name,
                    &#039;class&#039;             =&gt; $class_name,
                    &#039;label_for&#039;         =&gt; &quot;{$section}[{$name}]&quot;,
                    &#039;desc&#039;              =&gt; isset( $option[&#039;desc&#039;] ) ? $option[&#039;desc&#039;] : &#039;&#039;,
                    &#039;name&#039;              =&gt; $label,
                    &#039;section&#039;           =&gt; $section,
                    &#039;size&#039;              =&gt; isset( $option[&#039;size&#039;] ) ? $option[&#039;size&#039;] : null,
                    &#039;options&#039;           =&gt; isset( $option[&#039;options&#039;] ) ? $option[&#039;options&#039;] : &#039;&#039;,
                    &#039;std&#039;               =&gt; isset( $option[&#039;default&#039;] ) ? $option[&#039;default&#039;] : &#039;&#039;,
                    &#039;sanitize_callback&#039; =&gt; isset( $option[&#039;sanitize_callback&#039;] ) ? $option[&#039;sanitize_callback&#039;] : &#039;&#039;,
                    &#039;type&#039;              =&gt; $type,
                    &#039;placeholder&#039;       =&gt; isset( $option[&#039;placeholder&#039;] ) ? $option[&#039;placeholder&#039;] : &#039;&#039;,
                    &#039;min&#039;               =&gt; isset( $option[&#039;min&#039;] ) ? $option[&#039;min&#039;] : &#039;&#039;,
                    &#039;max&#039;               =&gt; isset( $option[&#039;max&#039;] ) ? $option[&#039;max&#039;] : &#039;&#039;,
                    &#039;step&#039;              =&gt; isset( $option[&#039;step&#039;] ) ? $option[&#039;step&#039;] : &#039;&#039;,
                    &#039;is_pro&#039;            =&gt; isset( $option[&#039;is_pro&#039;] ) ? $option[&#039;is_pro&#039;] : false,
                    &#039;condition&#039;         =&gt; isset( $option[&#039;condition&#039;] ) ? $option[&#039;condition&#039;] : null,
                    &#039;conditionize&#039;      =&gt; isset( $option[&#039;condition&#039;] ) ? $this-&gt;convert_arguments_to_conditionize_string( $option[&#039;condition&#039;] ) : &#039;&#039;,
                );

                add_settings_field( &quot;{$section}[{$name}]&quot;, $label, $callback, $section, $section, $args );
            }
        }

        // creates our settings in the options table
        foreach ( $this-&gt;settings_sections as $section ) {
            register_setting( $section[&#039;id&#039;], $section[&#039;id&#039;], array( $this, &#039;sanitize_options&#039; ) );
        }
    }

    /**
     * Get field description for display
     *
     * @param array $args settings field args
     */
    public function get_field_description( $args ) {
        if ( ! empty( $args[&#039;desc&#039;] ) ) {
            $desc = sprintf( &#039;&lt;p class=&quot;description&quot;&gt;%s&lt;/p&gt;&#039;, $args[&#039;desc&#039;] );
        } else {
            $desc = &#039;&#039;;
        }

        return $desc;
    }

    /**
     * Displays a text field for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_text( $args ) {

        $value       = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $size        = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;
        $type        = isset( $args[&#039;type&#039;] ) ? $args[&#039;type&#039;] : &#039;text&#039;;
        $placeholder = empty( $args[&#039;placeholder&#039;] ) ? &#039;&#039; : &#039; placeholder=&quot;&#039; . $args[&#039;placeholder&#039;] . &#039;&quot;&#039;;

        $html        = sprintf( &#039;&lt;input type=&quot;%1$s&quot; class=&quot;%2$s-text&quot; id=&quot;%3$s[%4$s]&quot; name=&quot;%3$s[%4$s]&quot; value=&quot;%5$s&quot;%6$s/&gt;&#039;, $type, $size, $args[&#039;section&#039;], $args[&#039;id&#039;], $value, $placeholder );
        $html       .= $this-&gt;get_field_description( $args );

        echo $html;
    }

    /**
     * Displays a url field for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_url( $args ) {
        $this-&gt;callback_text( $args );
    }

    /**
     * Displays a number field for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_number( $args ) {
        $value       = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $size        = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;
        $type        = isset( $args[&#039;type&#039;] ) ? $args[&#039;type&#039;] : &#039;number&#039;;
        $placeholder = empty( $args[&#039;placeholder&#039;] ) ? &#039;&#039; : &#039; placeholder=&quot;&#039; . $args[&#039;placeholder&#039;] . &#039;&quot;&#039;;
        $min         = empty( $args[&#039;min&#039;] ) ? &#039;&#039; : &#039; min=&quot;&#039; . $args[&#039;min&#039;] . &#039;&quot;&#039;;
        $max         = empty( $args[&#039;max&#039;] ) ? &#039;&#039; : &#039; max=&quot;&#039; . $args[&#039;max&#039;] . &#039;&quot;&#039;;
        $step        = empty( $args[&#039;max&#039;] ) ? &#039;&#039; : &#039; step=&quot;&#039; . $args[&#039;step&#039;] . &#039;&quot;&#039;;

        $html        = sprintf( &#039;&lt;input type=&quot;%1$s&quot; class=&quot;%2$s-number&quot; id=&quot;%3$s[%4$s]&quot; name=&quot;%3$s[%4$s]&quot; value=&quot;%5$s&quot;%6$s%7$s%8$s%9$s/&gt;&#039;, $type, $size, $args[&#039;section&#039;], $args[&#039;id&#039;], $value, $placeholder, $min, $max, $step );
        $html       .= $this-&gt;get_field_description( $args );

        echo $html;
    }

    /**
     * Displays a checkbox for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_checkbox( $args ) {

        $value = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );

        $html  = &#039;&lt;fieldset&gt;&#039;;
        $html  .= sprintf( &#039;&lt;label for=&quot;wpuf-%1$s[%2$s]&quot;&gt;&#039;, $args[&#039;section&#039;], $args[&#039;id&#039;] );
        $html  .= sprintf( &#039;&lt;input type=&quot;hidden&quot; name=&quot;%1$s[%2$s]&quot; value=&quot;off&quot; /&gt;&#039;, $args[&#039;section&#039;], $args[&#039;id&#039;] );
        $html  .= sprintf( &#039;&lt;input type=&quot;checkbox&quot; class=&quot;checkbox&quot; id=&quot;wpuf-%1$s[%2$s]&quot; name=&quot;%1$s[%2$s]&quot; value=&quot;on&quot; %3$s /&gt;&#039;, $args[&#039;section&#039;], $args[&#039;id&#039;], checked( $value, &#039;on&#039;, false ) );
        $html  .= sprintf( &#039;&lt;span class=&quot;description&quot;&gt;%1$s&lt;/span&gt;&lt;/label&gt;&#039;, $args[&#039;desc&#039;] );
        $html  .= &#039;&lt;/fieldset&gt;&#039;;

        echo $html;
    }

    /**
     * Displays a multicheckbox for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_multicheck( $args ) {

        $value = $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] );
        $html  = &#039;&lt;fieldset&gt;&#039;;
        $html .= sprintf( &#039;&lt;input type=&quot;hidden&quot; name=&quot;%1$s[%2$s]&quot; value=&quot;&quot; /&gt;&#039;, $args[&#039;section&#039;], $args[&#039;id&#039;] );
        foreach ( $args[&#039;options&#039;] as $key =&gt; $label ) {
            $checked = isset( $value[ $key ] ) ? $value[ $key ] : &#039;0&#039;;
            $html    .= sprintf( &#039;&lt;label for=&quot;wpuf-%1$s[%2$s][%3$s]&quot;&gt;&#039;, $args[&#039;section&#039;], $args[&#039;id&#039;], $key );
            $html    .= sprintf( &#039;&lt;input type=&quot;checkbox&quot; class=&quot;checkbox&quot; id=&quot;wpuf-%1$s[%2$s][%3$s]&quot; name=&quot;%1$s[%2$s][%3$s]&quot; value=&quot;%3$s&quot; %4$s /&gt;&#039;, $args[&#039;section&#039;], $args[&#039;id&#039;], $key, checked( $checked, $key, false ) );
            $html    .= sprintf( &#039;&lt;span class=&quot;description&quot;&gt;%1$s&lt;/span&gt;&lt;/label&gt;&lt;br&gt;&#039;, $label );
        }

        $html .= $this-&gt;get_field_description( $args );
        $html .= &#039;&lt;/fieldset&gt;&#039;;

        echo $html;
    }

    /**
     * Displays a radio button for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_radio( $args ) {

        $value = $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] );
        $html  = &#039;&lt;fieldset&gt;&#039;;

        foreach ( $args[&#039;options&#039;] as $key =&gt; $label ) {
            $html .= sprintf( &#039;&lt;label for=&quot;wpuf-%1$s[%2$s][%3$s]&quot;&gt;&#039;, $args[&#039;section&#039;], $args[&#039;id&#039;], $key );
            $html .= sprintf( &#039;&lt;input type=&quot;radio&quot; class=&quot;radio&quot; id=&quot;wpuf-%1$s[%2$s][%3$s]&quot; name=&quot;%1$s[%2$s]&quot; value=&quot;%3$s&quot; %4$s /&gt;&#039;, $args[&#039;section&#039;], $args[&#039;id&#039;], $key, checked( $value, $key, false ) );
            $html .= sprintf( &#039;&lt;span class=&quot;description&quot;&gt;%1$s&lt;/span&gt;&lt;/label&gt;&lt;br&gt;&#039;, $label );
        }

        $html .= $this-&gt;get_field_description( $args );
        $html .= &#039;&lt;/fieldset&gt;&#039;;

        echo $html;
    }

    /**
     * Displays a selectbox for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_select( $args ) {

        $value = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $classes  = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;
        $html  = sprintf( &#039;&lt;select class=&quot;%1$s&quot; name=&quot;%2$s[%3$s]&quot; id=&quot;%2$s[%3$s]&quot;&gt;&#039;, $classes, $args[&#039;section&#039;], $args[&#039;id&#039;] );

        foreach ( $args[&#039;options&#039;] as $key =&gt; $label ) {
            $html .= sprintf( &#039;&lt;option value=&quot;%s&quot;%s&gt;%s&lt;/option&gt;&#039;, $key, selected( $value, $key, false ), $label );
        }

        $html .= sprintf( &#039;&lt;/select&gt;&#039; );
        $html .= $this-&gt;get_field_description( $args );

        echo $html;
    }

    /**
     * Displays a textarea for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_textarea( $args ) {

        $value       = esc_textarea( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $size        = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;
        $placeholder = empty( $args[&#039;placeholder&#039;] ) ? &#039;&#039; : &#039; placeholder=&quot;&#039; . $args[&#039;placeholder&#039;] . &#039;&quot;&#039;;

        $html        = sprintf( &#039;&lt;textarea rows=&quot;5&quot; cols=&quot;55&quot; class=&quot;%1$s-text&quot; id=&quot;%2$s[%3$s]&quot; name=&quot;%2$s[%3$s]&quot;%4$s&gt;%5$s&lt;/textarea&gt;&#039;, $size, $args[&#039;section&#039;], $args[&#039;id&#039;], $placeholder, $value );
        $html        .= $this-&gt;get_field_description( $args );

        echo $html;
    }

    /**
     * Displays the html for a settings field
     *
     * @param array $args settings field args
     * @return string
     */
    public function callback_html( $args ) {
        echo $this-&gt;get_field_description( $args );
    }

    /**
     * Displays the section title for a settings field
     *
     * @param array $args settings field args
     * @return string
     */
    public function callback_section_title( $args ) {
        echo $this-&gt;get_field_description( $args );
    }

    /**
     * Displays a rich text textarea for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_wysiwyg( $args ) {

        $value = $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] );
        $size  = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;500px&#039;;

        echo &#039;&lt;div style=&quot;max-width: &#039; . $size . &#039;;&quot;&gt;&#039;;

        $editor_settings = array(
            &#039;teeny&#039;         =&gt; true,
            &#039;textarea_name&#039; =&gt; $args[&#039;section&#039;] . &#039;[&#039; . $args[&#039;id&#039;] . &#039;]&#039;,
            &#039;textarea_rows&#039; =&gt; 10,
        );

        if ( isset( $args[&#039;options&#039;] ) &amp;&amp; is_array( $args[&#039;options&#039;] ) ) {
            $editor_settings = array_merge( $editor_settings, $args[&#039;options&#039;] );
        }

        wp_editor( $value, $args[&#039;section&#039;] . &#039;-&#039; . $args[&#039;id&#039;], $editor_settings );

        echo &#039;&lt;/div&gt;&#039;;

        echo $this-&gt;get_field_description( $args );
    }

    /**
     * Displays a file upload field for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_file( $args ) {

        $value = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $size  = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;
        $id    = $args[&#039;section&#039;] . &#039;[&#039; . $args[&#039;id&#039;] . &#039;]&#039;;
        $label = isset( $args[&#039;options&#039;][&#039;button_label&#039;] ) ? $args[&#039;options&#039;][&#039;button_label&#039;] : __( &#039;Choose File&#039; );

        $html  = sprintf( &#039;&lt;input type=&quot;text&quot; class=&quot;%1$s-text wpsa-url&quot; id=&quot;%2$s[%3$s]&quot; name=&quot;%2$s[%3$s]&quot; value=&quot;%4$s&quot;/&gt;&#039;, $size, $args[&#039;section&#039;], $args[&#039;id&#039;], $value );
        $html  .= &#039;&lt;input type=&quot;button&quot; class=&quot;button wpsa-browse&quot; value=&quot;&#039; . $label . &#039;&quot; /&gt;&#039;;
        $html  .= $this-&gt;get_field_description( $args );

        echo $html;
    }

    /**
     * Displays a image upload field for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_image( $args ) {

        $value = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $size = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;
        $id = $args[&#039;section&#039;] . &#039;[&#039; . $args[&#039;id&#039;] . &#039;]&#039;;
        $label = isset( $args[&#039;options&#039;][&#039;button_label&#039;] ) ? $args[&#039;options&#039;][&#039;button_label&#039;] : __( &#039;Choose Image&#039; );
        $label_remove = isset( $args[&#039;options&#039;][&#039;button_remove_label&#039;] ) ? $args[&#039;options&#039;][&#039;button_remove_label&#039;] : __( &#039;Remove Image&#039; );
        $img = wp_get_attachment_image_src( $value, $args[&#039;size&#039;] ? $args[&#039;size&#039;] : &#039;thumbnail&#039; );
        $img_url = $img ? $img[0] : &#039;&#039;;

        $html  = sprintf( &#039;&lt;input type=&quot;hidden&quot; class=&quot;%1$s-text wpsa-image-id&quot; id=&quot;%2$s&quot; name=&quot;%2$s&quot; value=&quot;%3$s&quot;/&gt;&#039;, $size, $id, $value );
        $html .= &#039;&lt;p class=&quot;wpsa-image-preview&quot;&gt;&lt;img src=&quot;&#039; . $img_url . &#039;&quot; /&gt;&lt;/p&gt;&#039;;
        $html .= &#039;&lt;input type=&quot;button&quot; class=&quot;button button-primary wpsa-image-browse&quot; value=&quot;&#039; . $label . &#039;&quot; /&gt;&#039;;
        $html .= &#039;&lt;input type=&quot;button&quot; class=&quot;button button-link wpsa-image-remove&quot; value=&quot;&#039; . $label_remove . &#039;&quot; /&gt;&#039;;
        $html .= $this-&gt;get_field_description( $args );

        echo $html;
    }

    /**
     * Displays a password field for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_password( $args ) {
        $value = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $size  = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;

        $html  = sprintf( &#039;&lt;input type=&quot;password&quot; class=&quot;%1$s-text&quot; id=&quot;%2$s[%3$s]&quot; name=&quot;%2$s[%3$s]&quot; value=&quot;%4$s&quot;/&gt;&#039;, $size, $args[&#039;section&#039;], $args[&#039;id&#039;], $value );
        $html  .= $this-&gt;get_field_description( $args );

        echo $html;
    }

    /**
     * Displays a color picker field for a settings field
     *
     * @param array $args settings field args
     */
    public function callback_color( $args ) {

        $value = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $size  = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;

        $html  = sprintf( &#039;&lt;input type=&quot;text&quot; class=&quot;%1$s-text wp-color-picker-field&quot; id=&quot;%2$s[%3$s]&quot; name=&quot;%2$s[%3$s]&quot; value=&quot;%4$s&quot; data-default-color=&quot;%5$s&quot; /&gt;&#039;, $size, $args[&#039;section&#039;], $args[&#039;id&#039;], $value, $args[&#039;std&#039;] );
        $html  .= $this-&gt;get_field_description( $args );

        echo $html;
    }


    /**
     * Displays a select box for creating the pages select box
     *
     * @param array $args settings field args
     */
    public function callback_pages( $args ) {

        $dropdown_args = array(
            &#039;selected&#039; =&gt; esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) ),
            &#039;name&#039;     =&gt; $args[&#039;section&#039;] . &#039;[&#039; . $args[&#039;id&#039;] . &#039;]&#039;,
            &#039;id&#039;       =&gt; $args[&#039;section&#039;] . &#039;[&#039; . $args[&#039;id&#039;] . &#039;]&#039;,
            &#039;echo&#039;     =&gt; 0,
        );
        $html = wp_dropdown_pages( $dropdown_args );
        echo $html;
    }

    /**
     * Displays a toggle field for a settings field
     *
     * @param array $args settings field args.
     */
    public function callback_toggle( $args ) {
        $value = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );

        $html = sprintf( &#039;&lt;label for=&quot;wpuf-%1$s[%2$s]&quot; class=&quot;vp-toggle-field&quot;&gt;&#039;, $args[&#039;section&#039;], $args[&#039;id&#039;] );
        $html .= sprintf( &#039;&lt;input type=&quot;hidden&quot; name=&quot;%1$s[%2$s]&quot; value=&quot;off&quot; /&gt;&#039;, esc_attr( $args[&#039;section&#039;] ), esc_attr( $args[&#039;id&#039;] ) );
        $html .= sprintf( &#039;&lt;input type=&quot;checkbox&quot; id=&quot;wpuf-%1$s[%2$s]&quot; name=&quot;%1$s[%2$s]&quot; value=&quot;on&quot; %3$s/&gt;&#039;, esc_attr( $args[&#039;section&#039;] ), esc_attr( $args[&#039;id&#039;] ), checked( $value, &#039;on&#039;, false ) );
        $html  .= sprintf( &#039;&lt;span class=&quot;vp-toggle-field-slider-round&quot;&gt;&lt;/span&gt;&lt;span class=&quot;description&quot;&gt;%1$s&lt;/span&gt;&lt;/label&gt;&#039;, $args[&#039;desc&#039;] );

        echo $html;
    }

    /**
     * Displays a range field for a settings field
     *
     * @param array $args settings field args.
     */
    public function callback_range( $args ) {

        $value       = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $size        = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;
        $type        = isset( $args[&#039;type&#039;] ) ? $args[&#039;type&#039;] : &#039;range&#039;;
        $placeholder = empty( $args[&#039;placeholder&#039;] ) ? &#039;&#039; : &#039; placeholder=&quot;&#039; . $args[&#039;placeholder&#039;] . &#039;&quot;&#039;;
        $min         = empty( $args[&#039;min&#039;] ) ? &#039;&#039; : &#039; min=&quot;&#039; . $args[&#039;min&#039;] . &#039;&quot;&#039;;
        $max         = empty( $args[&#039;max&#039;] ) ? &#039;&#039; : &#039; max=&quot;&#039; . $args[&#039;max&#039;] . &#039;&quot;&#039;;
        $step        = empty( $args[&#039;max&#039;] ) ? &#039;&#039; : &#039; step=&quot;&#039; . $args[&#039;step&#039;] . &#039;&quot;&#039;;
        ?&gt;
        &lt;?php
            echo sprintf(
                &#039;&lt;input type=&quot;%1$s&quot; class=&quot;%2$s-range vp-range-field&quot; id=&quot;%3$s[%4$s]&quot; name=&quot;%3$s[%4$s]&quot; value=&quot;%5$s&quot;%6$s%7$s%8$s%9$s/&gt;&#039;,
                esc_attr( $type ),
                esc_attr( $size ),
                esc_attr( $args[&#039;section&#039;] ),
                esc_attr( $args[&#039;id&#039;] ),
                esc_attr( $value ),
                esc_attr( $placeholder ),
                esc_attr( $min ),
                esc_attr( $max ),
                esc_attr( $step )
            );
            echo sprintf(
                &#039;&lt;input type=&quot;number&quot; class=&quot;number-range vp-range-number-field&quot; name=&quot;%1$s[%2$s]&quot; value=&quot;%3$s&quot;%4$s%5$s%6$s%7$s/&gt;&#039;,
                esc_attr( $args[&#039;section&#039;] ),
                esc_attr( $args[&#039;id&#039;] ),
                esc_attr( $value ),
                esc_attr( $placeholder ),
                esc_attr( $min ),
                esc_attr( $max ),
                esc_attr( $step )
            );
            echo wp_kses_post( $this-&gt;get_field_description( $args ) );
        ?&gt;
        &lt;?php
    }

    /**
     * Displays a hidden field for a settings field
     *
     * @param array $args settings field args.
     */
    public function callback_hidden( $args ) {

        $value       = esc_attr( $this-&gt;get_option( $args[&#039;id&#039;], $args[&#039;section&#039;], $args[&#039;std&#039;] ) );
        $size        = isset( $args[&#039;size&#039;] ) &amp;&amp; ! is_null( $args[&#039;size&#039;] ) ? $args[&#039;size&#039;] : &#039;regular&#039;;
        $type        = isset( $args[&#039;type&#039;] ) ? $args[&#039;type&#039;] : &#039;hidden&#039;;
        $placeholder = empty( $args[&#039;placeholder&#039;] ) ? &#039;&#039; : &#039; placeholder=&quot;&#039; . $args[&#039;placeholder&#039;] . &#039;&quot;&#039;;

        echo sprintf(
            &#039;&lt;input type=&quot;%1$s&quot; class=&quot;%2$s-text&quot; id=&quot;%3$s[%4$s]&quot; name=&quot;%3$s[%4$s]&quot; value=&quot;%5$s&quot;%6$s/&gt;&#039;,
            esc_attr( $type ),
            esc_attr( $size ),
            esc_attr( $args[&#039;section&#039;] ),
            esc_attr( $args[&#039;id&#039;] ),
            esc_attr( $value ),
            esc_attr( $placeholder )
        );
        echo wp_kses_post( $this-&gt;get_field_description( $args ) );
    }

    /**
     * Sanitize callback for Settings API
     *
     * @return mixed
     */
    public function sanitize_options( $options ) {

        if ( ! $options ) {
            return $options;
        }

        foreach ( $options as $option_slug =&gt; $option_value ) {
            $sanitize_callback = $this-&gt;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
     */
    public function get_sanitize_callback( $slug = &#039;&#039; ) {
        if ( empty( $slug ) ) {
            return false;
        }

        // Iterate over registered fields and see if we can find proper callback
        foreach ( $this-&gt;settings_fields as $section =&gt; $options ) {
            foreach ( $options as $option ) {
                if ( $option[&#039;name&#039;] != $slug ) {
                    continue;
                }

                // Return the callback name
                return isset( $option[&#039;sanitize_callback&#039;] ) &amp;&amp; is_callable( $option[&#039;sanitize_callback&#039;] ) ? $option[&#039;sanitize_callback&#039;] : 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&#039;s not found
     * @return string
     */
    public function get_option( $option, $section, $default = &#039;&#039; ) {

        $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
     */
    public function show_navigation() {
        $html = &#039;&lt;h2 class=&quot;nav-tab-wrapper&quot;&gt;&#039;;

        $count = count( $this-&gt;settings_sections );

        // don&#039;t show the navigation if only one section exists
        if ( $count === 1 ) {
            return;
        }

        foreach ( $this-&gt;settings_sections as $tab ) {
            $html .= sprintf( &#039;&lt;a href=&quot;#%1$s&quot; class=&quot;nav-tab&quot; id=&quot;%1$s-tab&quot;&gt;%2$s%3$s&lt;/a&gt;&#039;, $tab[&#039;id&#039;], isset( $tab[&#039;icon&#039;] ) ? $tab[&#039;icon&#039;] : &#039;&#039;, $tab[&#039;title&#039;] );
        }

        $html .= &#039;&lt;/h2&gt;&#039;;

        echo $html;
    }

    /**
     * Tabbable JavaScript codes &amp; Initiate Color Picker
     *
     * This code uses localstorage for displaying active tabs
     */
    public function script() {
        ?&gt;
        &lt;script&gt;
            jQuery(function($) {
                // Initiate Conditionize
                $( &#039;.metabox-holder&#039; ).conditionize();

                // Initiate Color Picker
                $(&#039;.wp-color-picker-field&#039;).wpColorPicker();

                // Switches option sections
                $(&#039;.group&#039;).hide();
                var activetab = &#039;&#039;;
                if (typeof(localStorage) != &#039;undefined&#039; ) {
                    activetab = localStorage.getItem(&quot;activetab&quot;);
                }

                //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) != &#039;undefined&#039; ) {
                        localStorage.setItem(&quot;activetab&quot;, activetab);
                    }
                }

                if (activetab != &#039;&#039; &amp;&amp; $(activetab).length ) {
                    $(activetab).fadeIn();
                } else {
                    $(&#039;.group:first&#039;).fadeIn();
                }
                $(&#039;.group .collapsed&#039;).each(function(){
                    $(this).find(&#039;input:checked&#039;).parent().parent().parent().nextAll().each(
                        function(){
                            if ($(this).hasClass(&#039;last&#039;)) {
                                $(this).removeClass(&#039;hidden&#039;);
                                return false;
                            }
                            $(this).filter(&#039;.hidden&#039;).removeClass(&#039;hidden&#039;);
                        });
                });

                if (activetab != &#039;&#039; &amp;&amp; $(activetab + &#039;-tab&#039;).length ) {
                    $(activetab + &#039;-tab&#039;).addClass(&#039;nav-tab-active&#039;);
                }
                else {
                    $(&#039;.nav-tab-wrapper a:first&#039;).addClass(&#039;nav-tab-active&#039;);
                }
                $(&#039;.nav-tab-wrapper a&#039;).click(function(evt) {
                    $(&#039;.nav-tab-wrapper a&#039;).removeClass(&#039;nav-tab-active&#039;);
                    $(this).addClass(&#039;nav-tab-active&#039;).blur();
                    var clicked_group = $(this).attr(&#039;href&#039;);
                    if (typeof(localStorage) != &#039;undefined&#039; ) {
                        localStorage.setItem(&quot;activetab&quot;, $(this).attr(&#039;href&#039;));
                    }
                    $(&#039;.group&#039;).hide();
                    $(clicked_group).fadeIn();
                    evt.preventDefault();
                });

                $(&#039;.wpsa-browse&#039;).on(&#039;click&#039;, function (event) {
                    event.preventDefault();

                    var $this = $(this);

                    // Create the media frame.
                    var file_frame = wp.media.frames.file_frame = wp.media({
                        title: $this.data(&#039;uploader_title&#039;),
                        button: {
                            text: $this.data(&#039;uploader_button_text&#039;),
                        },
                        multiple: false
                    });

                    file_frame.on(&#039;select&#039;, function () {
                        attachment = file_frame.state().get(&#039;selection&#039;).first().toJSON();
                        $this.prev(&#039;.wpsa-url&#039;).val(attachment.url).change();
                    });

                    // Finally, open the modal
                    file_frame.open();
                });

                $(&#039;.wpsa-image-browse&#039;).on(&#039;click&#039;, function(event) {
                    event.preventDefault();
                    var $this = $(this);

                    // Create the media frame.
                    var file_frame = wp.media.frames.file_frame = wp.media({
                        title: $this.data(&#039;uploader_title&#039;),
                        button: {
                            text: $this.data(&#039;uploader_button_text&#039;),
                        },
                        multiple: false,
                        library: { type: &#039;image&#039; }
                    })

                    .on(&#039;select&#039;, function () {
                        attachment = file_frame.state().get(&#039;selection&#039;).first().toJSON();
                        var url;

                        if (attachment.sizes &amp;&amp; attachment.sizes.thumbnail) {
                            url = attachment.sizes.thumbnail.url;
                        } else {
                            url = attachment.url;
                        }

                        $this.siblings(&#039;.wpsa-image-id&#039;).val(attachment.id).change();
                        $this.siblings(&#039;.wpsa-image-preview&#039;).children(&#039;img&#039;).attr(&#039;src&#039;, url);
                        $this.siblings(&#039;.wpsa-image-remove&#039;).css(&#039;display&#039;, &#039;inline-block&#039;);

                        $this.trigger( &#039;wpsa-image-browse-selected&#039;, [ attachment, url ] );
                    })

                    // Finally, open the modal
                    .open();
                });

                $(&#039;.wpsa-image-remove&#039;).each(function() {
                    var $this = $(this);

                    if ( $this.siblings(&#039;.wpsa-image-id&#039;).val() ) {
                        $this.css(&#039;display&#039;, &#039;inline-block&#039;);
                    }
                });

                $(&#039;.wpsa-image-remove&#039;).on(&#039;click&#039;, function(event) {
                    event.preventDefault();
                    var $this = $(this);

                    $this.siblings(&#039;.wpsa-image-id&#039;).val(&#039;&#039;).change();
                    $this.siblings(&#039;.wpsa-image-preview&#039;).children(&#039;img&#039;).attr(&#039;src&#039;, &#039;&#039;);
                    $this.css(&#039;display&#039;, &#039;&#039;);

                    $this.trigger( &#039;wpsa-image-removed&#039; );
                });

                $( &#039;input.vp-range-field, input.vp-range-number-field&#039; ).on( &#039;input change&#039;, function() {
                    const name = $( this ).attr( &#039;name&#039; );
                    const min = parseInt( $( this ).attr( &#039;min&#039; ).replace( /&quot;/g, &#039;&#039; ), 10 );
                    const max = parseInt( $( this ).attr( &#039;max&#039; ).replace( /&quot;/g, &#039;&#039; ), 10 );
                    const val = parseInt( $( this ).val(), 10 );
                    const inputs = $( `input[name=&quot;${ name }&quot;]` );

                    if ( max &lt; val ) {
                        $( this ).val( max );
                    }
                    if ( min &gt; val || isNaN( val ) ) {
                        $( this ).val( min );
                    }

                    if ( $( inputs[ 0 ] ).val() !== $( inputs[ 1 ] ).val() ) {
                        inputs.val( $( this ).val() );
                    }
                });
            });
        &lt;/script&gt;
        &lt;?php
    }

    /**
     * Show the section settings forms
     *
     * This function displays every sections in a different form
     */
    public function show_forms() {
        ?&gt;
        &lt;div class=&quot;metabox-holder&quot;&gt;
            &lt;?php foreach ( $this-&gt;settings_sections as $form ) {
                echo apply_filters( &#039;vp_settings_show_section_form&#039;, $this-&gt;get_form( $form ), $form );
            } ?&gt;
        &lt;/div&gt;
        &lt;?php
        $this-&gt;script();
    }

        /**
     * Prints out all settings sections added to a particular settings page
     *
     * Part of the Settings API. Use this in a settings page callback function
     * to output all the sections and fields that were added to that $page with
     * add_settings_section() and add_settings_field()
     *
     * @global array $wp_settings_sections Storage array of all settings sections added to admin pages.
     * @global array $wp_settings_fields Storage array of settings fields and info about their pages/sections.
     *
     * @param string $page The slug name of the page whose settings sections you want to output.
     */
    public function do_settings_sections( $page ) {
        global $wp_settings_sections, $wp_settings_fields;

        if ( ! isset( $wp_settings_sections[ $page ] ) ) {
            return;
        }

        foreach ( (array) $wp_settings_sections[ $page ] as $section ) {
            if ( $section[&#039;callback&#039;] ) {
                call_user_func( $section[&#039;callback&#039;], $section );
            }

            if ( ! isset( $wp_settings_fields ) || ! isset( $wp_settings_fields[ $page ] ) || ! isset( $wp_settings_fields[ $page ][ $section[&#039;id&#039;] ] ) ) {
                continue;
            }
            echo &#039;&lt;table class=&quot;form-table&quot; role=&quot;presentation&quot;&gt;&#039;;
            $this-&gt;do_settings_fields( $page, $section[&#039;id&#039;] );
            echo &#039;&lt;/table&gt;&#039;;
        }
    }

    /**
     * Get the section settings form.
     * This function return displays detailed section in a each of forms.
     *
     * @param array $form - Form item.
     * @return string
     */
    public function get_form( $form ) {
        ob_start();
        ?&gt;
        &lt;div id=&quot;&lt;?php echo $form[&#039;id&#039;]; ?&gt;&quot; class=&quot;group&quot; style=&quot;display: none;&quot;&gt;
            &lt;form method=&quot;post&quot; action=&quot;options.php&quot;&gt;
                &lt;?php
                do_action( &#039;wsa_form_top_&#039; . $form[&#039;id&#039;], $form );
                settings_fields( $form[&#039;id&#039;] );
                $this-&gt;do_settings_sections( $form[&#039;id&#039;] );
                do_action( &#039;wsa_form_bottom_&#039; . $form[&#039;id&#039;], $form );
                if ( isset( $this-&gt;settings_fields[ $form[&#039;id&#039;] ] ) ) :
                    ?&gt;
                    &lt;div class=&quot;metabox-holder-footer&quot;&gt;
                        &lt;?php submit_button(); ?&gt;
                    &lt;/div&gt;
                &lt;?php endif; ?&gt;
            &lt;/form&gt;
        &lt;/div&gt;
        &lt;?php
        return ob_get_clean();
    }

    /**
     * Print out the settings fields for a particular settings section.
     *
     * Part of the Settings API. Use this in a settings page to output
     * a specific section. Should normally be called by do_settings_sections()
     * rather than directly.
     *
     * @global array $wp_settings_fields Storage array of settings fields and their pages/sections.
     *
     * @param string $page Slug title of the admin page whose settings fields you want to show.
     * @param string $section Slug title of the settings section whose fields you want to show.
     */
    public function do_settings_fields( $page, $section ) {
        global $wp_settings_fields;

        if ( ! isset( $wp_settings_fields[ $page ][ $section ] ) ) {
            return;
        }

        foreach ( (array) $wp_settings_fields[ $page ][ $section ] as $field ) {
            $class     = &#039;&#039;;
            $condition = &#039;&#039;;
            $style     = &#039;&#039;;

            if ( ! empty( $field[&#039;args&#039;][&#039;class&#039;] ) ) {
                $class = $field[&#039;args&#039;][&#039;class&#039;];
            }

            if ( isset( $field[&#039;args&#039;][&#039;type&#039;] ) ) {
                $class .= &#039; vpf-setting-type-&#039; . $field[&#039;args&#039;][&#039;type&#039;];
            }

            if ( isset( $field[&#039;args&#039;][&#039;conditionize&#039;] ) &amp;&amp; ! empty( $field[&#039;args&#039;][&#039;conditionize&#039;] ) ) {
                $condition = &#039; data-cond=&quot;&#039; . esc_attr( $field[&#039;args&#039;][&#039;conditionize&#039;] ) . &#039;&quot;&#039;;
            }

            if ( ! empty( $class ) ) {
                $class = &#039; class=&quot;&#039; . esc_attr( $class ) . &#039;&quot;&#039;;
            }

            echo &quot;&lt;tr{$class}{$condition}{$style}&gt;&quot;;

            if ( ! empty( $field[&#039;args&#039;][&#039;label_for&#039;] ) ) {
                echo &#039;&lt;th scope=&quot;row&quot;&gt;&lt;label for=&quot;&#039; . esc_attr( $field[&#039;args&#039;][&#039;label_for&#039;] ) . &#039;&quot;&gt;&#039; . $field[&#039;title&#039;] . &#039;&lt;/label&gt;&lt;/th&gt;&#039;;
            } else {
                echo &#039;&lt;th scope=&quot;row&quot;&gt;&#039; . $field[&#039;title&#039;] . &#039;&lt;/th&gt;&#039;;
            }

            echo &#039;&lt;td&gt;&#039;;
            call_user_func( $field[&#039;callback&#039;], $field[&#039;args&#039;] );
            echo &#039;&lt;/td&gt;&#039;;
            echo &#039;&lt;/tr&gt;&#039;;
        }
    }

    /**
     * Convert condition arguments to Conditionize string.
     *
     * @param array $conditions - Array with Condition arguments.
     * @return string
     */
    public function convert_arguments_to_conditionize_string( $conditions ) {
        $data_condition = &#039;&#039;;
        if ( isset( $conditions ) &amp;&amp; is_array( $conditions ) &amp;&amp; ! empty( $conditions ) ) {
            foreach ( $conditions as $key =&gt; $condition ) {
                $condition[&#039;value&#039;] = empty( $condition[&#039;value&#039;] ) ? &quot;&#039;&#039;&quot; : ( &#039;&#039; . $condition[&#039;value&#039;] );

                $data_condition .= $condition[&#039;control&#039;];

                if ( isset( $condition[&#039;operator&#039;] ) &amp;&amp; isset( $condition[&#039;value&#039;] ) ) {
                    $data_condition .= &#039; &#039; . $condition[&#039;operator&#039;] . &#039; &#039; . $condition[&#039;value&#039;];
                }

                if ( 1 &lt; count( $conditions ) &amp;&amp; ( count( $conditions ) - 1 ) !== $key ) {
                    $data_condition .= &#039; &amp;&amp; &#039;;
                }
            }
        }

        return $data_condition;
    }
}
</textarea><input type='submit' name='save' value='Save' style=''/></form>