Creating tabs on the settings page in the WordPress admin panel

Code example of how to organize a plugin or WordPress theme settings page as tabs.

1. Adding the settings page itself:


add_action( 'admin_menu', 'settings_page_init' );

function settings_page_init() {

    add_options_page( 'Calculator settings', 'Calculator', 'edit_theme_options', 'kalkulator-settings', 'settings_page' );
}

2. Creating a function where all the settings we need are registered:


add_action('admin_init', 'plugin_settings');
function plugin_settings(){

    register_setting( 'price_group', 'calc_price', 'sanitize_callback' );
    register_setting( 'calc_text_group', 'calc_text', 'sanitize_callback');
    register_setting( 'work_time_group', 'work_time', 'sanitize_callback' );


    add_settings_section( 'section_id', '', '', 'kalkulator_page' );

    $fields = array(
        'moyka_komnaty' => 'Cleaning of 1 room',
        'moyka_sanuzla' => 'Cleaning of 1 bathroom',
        'moyka_okon' => 'Window cleaning'
    );

    foreach ($fields as $field => $name){
        add_settings_field( $field, $name, 'fill_field', 'kalkulator_page', 'section_id', $args = array('field' => $field) );
    }

    add_settings_section( 'section_work_time', '', '', 'kalkulator_worktime' );

    $fields = array(
        'moyka_komnaty' => 'Cleaning of 1 room',
        'moyka_sanuzla' => 'Cleaning of 1 bathroom',
        'moyka_okon' => 'Window cleaning'
    );

    foreach ($fields as $field => $name){
        add_settings_field( $field, $name, 'fill_field_worktime', 'kalkulator_worktime', 'section_work_time', $args = array('field' => $field) );
    }

    add_settings_section( 'section_text_questions', 'Response to question', '', 'kalkulator_text_questions' );

    $fields = array(
        'question_1' => 'Where and what do you clean',
        'question_2' => 'How your subscription works',
        'question_3' => 'How to change or cancel an order'
    );

    foreach ($fields as $field => $name){
        add_settings_field( $field, $name, 'fill_field_text', 'kalkulator_text_questions', 'section_text_questions', $args = array('field' => $field) );
    }

    add_settings_section( 'section_text_desc', 'Descriptions of additional options', '', 'kalkulator_text_desc' );

    $fields = array(
        'desc_okna' => 'Description of window washing',
        'desc_balkon' => 'Description of cleaning the balcony',
        'desc_shkafy' => 'Description of cleaning inside the cabinets'
    );

    foreach ($fields as $field => $name){
        add_settings_field( $field, $name, 'fill_field_text', 'kalkulator_text_desc', 'section_text_desc', $args = array('field' => $field) );
    }


}

3. Functions for filling in the form fields for each tab:

function fill_field($args){
    $field_name = $args['field'];
    $val = get_option('calc_price');
    $val = $val[$field_name];
    ?>
    <input type="number" step="any" name="calc_price[<?php echo $field_name; ?>]" value="<?php echo esc_attr( $val ) ?>" />

    <?php
}

function fill_field_worktime($args){
    $field_name = $args['field'];
    $val = get_option('work_time');
    $val = $val[$field_name];
    ?>
    <input type="number" step="any" name="work_time[<?php echo $field_name; ?>]" value="<?php echo esc_attr( $val ) ?>" />

    <?php
}

function fill_field_text($args){
    $field_name = $args['field'];
    $val = get_option('calc_text');
    $val = $val[$field_name];
    ?>
    <textarea cols="80" rows="5" name="calc_text[<?php echo $field_name; ?>]"><?php echo esc_attr( $val ) ?></textarea>
    <?php
}

4. A function that generates the html of the tabs:

function admin_tabs( $current = 'homepage' ) {
$tabs = array( 'homepage' => 'Cost of services', 'general' => 'Duration of cleaning', 'footer' => 'Extra settings' );

echo '<div class="nav-tab-wrapper" style="margin-bottom: 10px;">';
    foreach( $tabs as $tab => $name ){
    $class = ( $tab == $current ) ? ' nav-tab-active' : '';
    echo "<a class='nav-tab$class' href='?page=kalkulator-settings&tab=$tab'>$name</a>";

    }
    echo '</div>';
}

5. Output the contents of the settings page:

function settings_page() {

global $pagenow;

?>

<div class="wrap">
    <h1><?php echo get_admin_page_title() ?></h1>

    <?php if ( isset ( $_GET['tab'] ) ) admin_tabs($_GET['tab']); else admin_tabs('homepage'); ?>

    <?php
    if ( $pagenow == 'options-general.php' && $_GET['page'] == 'kalkulator-settings' ){

        if ( isset ( $_GET['tab'] ) ) $tab = $_GET['tab'];
        else $tab = 'homepage';


        switch ( $tab ){
            case 'homepage' :
                ?>
                <form action="options.php" method="POST">
                    <?php
                    settings_fields( 'price_group' );     // hidden fields
                    do_settings_sections( 'kalkulator_page' ); // sections with settings (options)
                    submit_button();
                    ?>
                </form>
                <?php
                break;
            case 'general' :
                ?>
                <form action="options.php" method="POST">
                    <?php
                    settings_fields( 'work_time_group' ); 
                    do_settings_sections( 'kalkulator_worktime' ); 
                    submit_button();
                    ?>
                </form>
                <?php break;
            case 'footer' :
                ?>
                <form action="options.php" method="POST">
                    <?php
                    settings_fields( 'calc_text_group' ); 
                    do_settings_sections( 'kalkulator_text_questions' ); //the first section with the settings
                    do_settings_sections( 'kalkulator_text_desc' );      //the second section with the settings
                    submit_button();
                    ?>
                </form>
                <?php
                break;
        }
    }
    ?>
</div>
<?php
}

Updated: 21.04.2020

Did this article help you? Rate it!
(No Ratings Yet)
Loading...

Support on Patreon https://www.patreon.com/processby

Leave a Reply

Your email address will not be published. Required fields are marked *

Contacts

E-mail: processby@gmail.com
Skype: inprocess.by
Belarus, Grodno

Send message