Yesterday I was thinking to migrate my “WP User Frontend” plugins option panel to settings API which is using a manual option currently. So I thought why not write a PHP class that will solve my problems for every plugin or theme I’ll be writing? There are many existing framework like “Options Framework” and other stuffs, I wanted to keep it very simple and straight forward. So I came up with a very simple PHP class that builds your options panel with a simple file without extra hassle.

So here is how to use that class.

1. Create sections and fields array

We are going to build two array here. One contains the sections we are going to make, another one contains the fields belongs to every sections.

/**
 * Registers settings section and fields
 */
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'
                )
            )
        ),
        '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'
                )
            )
        ),
        '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'
                )
            )
        )
    );

    $settings_api = new WeDevs_Settings_API();

    //set sections and fields
    $settings_api->set_sections( $sections );
    $settings_api->set_fields( $fields );

    //initialize them
    $settings_api->admin_init();
}

add_action( 'admin_init', 'wedevs_admin_init' );

So this big chunk of code actually creating 3 settings section and within these 3 settings section, we are adding different field section with given types. e.g: text, select, textarea, checkbox etc.

Each fields array are under the same fields section key name that we are using as settings section. That way we are saying with fields belongs to which section.

Then we are creating our WeDevs_Settings_API class instance, setting the sections and fields and initialize them.

2. Register Options Page

Now it’s fairly easy. We need to just register a settings page, and display the form.

/**
 * Register the plugin page
 */
function wedevs_admin_menu() {
    add_options_page( 'Settings API', 'Settings API', 'delete_posts', 'settings_api_test', 'wedevs_plugin_page' );
}

add_action( 'admin_menu', 'wedevs_admin_menu' );

3. Display the Form

/**
 * Display the plugin settings options page
 */
function wedevs_plugin_page() {
    $settings_api = new WeDevs_Settings_API();

    echo '<div class="wrap">';
    settings_errors();

    $settings_api->show_navigation();
    $settings_api->show_forms();

    echo '</div>';
}

4. Retrieving the values

/**
 * 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 mixed
 */
function my_get_option( $option, $section, $default = '' ) {

    $options = get_option( $section );

    if ( isset( $options[$option] ) ) {
        return $options[$option];
    }

    return $default;
}

Now we can get those saved values by this little utility function. We can use like this echo my_get_option( 'field_name', 'section_name', 'default value' ); in our theme or plugins. If you have 4 settings section, only 4 options will be saved in the wp_options table. The options belongs to each section will be saved under those 4 option. So when you retrieve a section by get_option( 'section_name' ), you get all the section fields values under that section and they are stored as an array.

As a result, we get this -

So that was easy as pie!

Download Github