WordPress-Yet-Easy-Settings

WordPress Yet Easy Settings class is PHP class for easy to build advanced admin page for WordPress.

Built-in setting field types

• Text
• URL
• Email
• Password
• Number
• Decimal
• Textarea
• Checkbox
• Multiple Checkbox
• Select
• Multiple Select
• Radio Button
• Color Picker
• File Upload
• WYSIWYG

Key features

• Add as many as admin pages, placed it any where as top level admin menu or sub-menu.
• Add custom callback to render custom setting field type.
• Add custom callback to render custom tab content.
• Add custom callback to render custom page content.
• Built-in data sanitation and validation.
• Easy to add help tabs for admin page.
• Easy to add custom action button for admin page.
• Enqueue custom scripts and styles.
• Built-in data validation.

How to Use

Installation:

composer require sofyansitorus/wp-yes

After you include the WP_Yes class file, all you have to do is to initialize the WP_Yes class, then add the settings object properties in sequence add tabs, add sections, add fields.

Simple admin page setting

This is the simplest way to initialize the setting page without defining the tabs and sections.

if ( ! function_exists( 'wp_yes_simple' ) ) {
    function wp_yes_simple() {

        $settings = new WP_Yes( 'wp_yes_simple' ); // Initialize the WP_Yes class.

        $settings->add_field(
            array(
                'id' => 'field_1',
                'label' => 'Field 1',
                'required' => true,
                'type'     => 'text',
            )
        );

        $settings->add_field(
            array(
                'id' => 'field_2',
                'label' => 'Field 2',
                'required' => false,
                'type'     => 'email',
            )
        );

        $settings->init(); // Run the WP_Yes class.
    }
}

add_action( 'init', 'wp_yes_simple' );

We can also add the setting fields in bulk by using the WP_Yes::add_fields method.

if ( ! function_exists( 'wp_yes_simple_bulk' ) ) {
    function wp_yes_simple_bulk() {

        $settings = new WP_Yes( 'wp_yes_simple_bulk' ); // Initialize the WP_Yes class.

        $settings->add_fields(
            array(
                array(
                    'id' => 'field_1',
                    'label' => 'Field 1',
                    'required' => true,
                    'type'     => 'text',
                ),
                array(
                    'id' => 'field_2',
                    'label' => 'Field 2',
                    'required' => true,
                    'type'     => 'email',
                )
            )
        );

        $settings->init(); // Run the WP_Yes class.
    }
}

add_action( 'init', 'wp_yes_simple_bulk' );

Simple admin page setting with Section

This is the simplest way to initialize the setting page without defining the tabs and sections.

if ( ! function_exists( 'wp_yes_simple_with_section' ) ) {
    function wp_yes_simple_with_section() {

        $settings = new WP_Yes( 'wp_yes_simple_with_section' ); // Initialize the WP_Yes class.

        $settings->add_section(
            array(
                'id' => 'section_1',
                'title' => 'Section 1',
            )
        );

        $settings->add_fields(
            array(
                array(
                    'id' => 'field_1',
                    'label' => 'Field 1',
                    'required' => true,
                    'type'     => 'text',
                ),
                array(
                    'id' => 'field_2',
                    'label' => 'Field 2',
                    'required' => true,
                    'type'     => 'email',
                )
            )
        );

        $settings->add_section(
            array(
                'id' => 'section_2',
                'title' => 'Section 2',
            )
        );

        $settings->add_fields(
            array(
                array(
                    'id' => 'field_3',
                    'label' => 'Field 3',
                    'required' => true,
                    'type'     => 'text',
                ),
                array(
                    'id' => 'field_4',
                    'label' => 'Field 4',
                    'required' => true,
                    'type'     => 'email',
                )
            )
        );

        $settings->init(); // Run the WP_Yes class.
    }
}

add_action( 'init', 'wp_yes_simple_with_section' );

Multiple tabs admin page setting

By default, the setting page will only has 1 tab. If you want to add more tabs, just simply call the WP_Yes::add_tab method after the last WP_Yes::add_field for each tabs, and then following in sequence calling WP_Yes::add_section and WP_Yes::add_field method.

if ( ! function_exists( 'wp_yes_multi_tabs' ) ) {
    function wp_yes_multi_tabs() {
        $settings = new WP_Yes( 'wp_yes_multi_tabs' ); // Initialize the WP_Yes class.

        $settings->add_tab(
            array(
                'id' => 'tab_1',
                'title' => 'Tab 1',
            )
        );

        $settings->add_section(
            array(
                'id' => 'section_1',
                'title' => 'Section 1',
            )
        );

        $settings->add_field(
            array(
                'id'       => 'field_1',
                'required' => true,
                'type'     => 'text',
            )
        );

        $settings->add_section(
            array(
                'id' => 'section_2',
                'title' => 'Section 2',
            )
        );

        $settings->add_field(
            array(
                'id'       => 'field_2',
                'label' => 'Field 2',
                'required' => true,
                'type'     => 'text',
            )
        );

        $settings->add_tab( // <-- Add tab 2.
            array(
                'id' => 'tab_2',
                'title' => 'Tab 2',
            )
        );

        $settings->add_fields(
            array(
                array(
                    'id' => 'field_3',
                    'label' => 'Field 3',
                    'required' => true,
                    'type'     => 'text',
                ),
                array(
                    'id' => 'field_4',
                    'label' => 'Field 4',
                    'required' => true,
                    'type'     => 'email',
                )
            )
        );

        $settings->init(); // Run the WP_Yes class.
    }
}
add_action( 'init', 'wp_yes_multi_tabs' );

A note you must keep in hand here is that you need to have a unique value for the menu_slug parameter that passed in the WP_Yes class constructor and field id key in the WP_Yes::add_field method parameter. You can have same tab id in different page menu, also can has same sections id in different tabs.

Admin page setting with custom action button and help tabs

To add help tabs and custom actin button to the admin page, you need to call WP_Yes::add_help_tab and WP_Yes::add_button method anywhere before calling the WP_Yes::init method.

if ( ! function_exists( 'wp_yes_button_and_help_tabs' ) ) {
    function wp_yes_button_and_help_tabs() {

        $settings = new WP_Yes( 'wp_yes_button_and_help_tabs' ); // Initialize the WP_Yes class.

        $settings->add_help_tab(  // <-- Add help tab 1.
            array(
                'id'      => 'my_help_tab',
                'title'   => __( 'My Help Tab' ),
                'content' => '<p>' . __('Descriptive content that will show in My Help Tab-body goes here.') . '</p>',
            )
        );

        $settings->add_help_tab(  // <-- Add help tab 2.
            array(
                'id'      => 'my_help_tab2',
                'title'   => __( 'My Help Tab2' ),
                'content' => '<p>' . __( 'Descriptive content that will show in My Help Tab-body goes here 2. ') . '</p>',
            )
        );

        $settings->add_field(
            array(
                'id' => 'field_1',
                'label' => 'Field 1',
            )
        );

        $settings->add_button( 'Custom Action Button', 'index.php' ); // <-- Add custom action button.

        $settings->init(); // Run the WP_Yes class.
    }
}
add_action( 'init', 'wp_yes_button_and_help_tabs' );

Getting the stored option value

To get the option value is by call built-in WordPress get_option function with filed id as the first argument.

get_option( 'field_1' );

If you set the $setting_prefix value at third arguments in WP_Yes constructor, or set the prefix with WP_Yes::set_prefix method, then you need to pre-pend that prefix when calling get_option* function.

if ( ! function_exists( 'wp_yes_with_prefix' ) ) {
    function wp_yes_with_prefix() {

        $settings = new WP_Yes( 'wp_yes_with_prefix', array(), 'my_setting_prefix' ); // Initialize the WP_Yes class.

        $settings->add_field(
            array(
                'id' => 'field_1',
                'label' => 'Field 1',
            )
        );

        $settings->init(); // Run the WP_Yes class.
    }
}
add_action( 'init', 'wp_yes_with_prefix' );

// To get stored option value for setting field field_1
get_option( 'my_setting_prefix_field_1' );

if ( ! function_exists( 'wp_yes_with_set_prefix' ) ) {
    function wp_yes_with_set_prefix() {

        $settings = new WP_Yes( 'wp_yes_with_set_prefix', array() ); // Initialize the WP_Yes class.

        $settings->set_prefix( 'my_setting_prefix2' );

        $settings->add_field(
            array(
                'id' => 'field_1',
                'label' => 'Field 1',
            )
        );

        $settings->init(); // Run the WP_Yes class.
    }
}
add_action( 'init', 'wp_yes_with_set_prefix' );

// To get stored option value for setting field field_1
get_option( 'my_setting_prefix2_field_1' );

For more advanced example such as adding custom tab content, adding custom page content, etc, please take a look all the samples available in example folder.

Screenshots

Simple Setting Form

All Fields Types

Setting Form with Tabs

Admin Page with Action Button

Admin Page with Help Tabs

Custom Tab Content

Custom Page Content

Sub-menu Admin Page