Создание вкладок на странице настроек в админке WordPress

Пример кода, как организовать страницу настроек плагина или темы WordPress в виде вкладок.

1. Добавляем саму страницу настроек:

add_action( 'admin_menu', 'settings_page_init' );

function settings_page_init() {

    add_options_page( 'Настройки калькулятора', 'Калькулятор', 'edit_theme_options', 'kalkulator-settings', 'settings_page' );
}

2. Создаем функцию, где регистрируются все необходимые нам настройки:

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' => 'Уборка 1 комнаты',
        'moyka_sanuzla' => 'Уборка 1 санузла',
        'moyka_okon' => 'Мойка окон'
    );

    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' => 'Уборка 1 комнаты',
        'moyka_sanuzla' => 'Уборка 1 санузла',
        'moyka_okon' => 'Мойка окон'
    );

    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', 'Ответы на вопросы', '', 'kalkulator_text_questions' );

    $fields = array(
        'question_1' => 'Где и что вы убираете',
        'question_2' => 'Как работает подписка',
        'question_3' => 'Как изменить или отменить заказ'
    );

    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', 'Описания дополнительных опций', '', 'kalkulator_text_desc' );

    $fields = array(
        'desc_okna' => 'Описание мойки окон',
        'desc_balkon' => 'Описание уборки балкона',
        'desc_shkafy' => 'Описание мойки внутри шкафов'
    );

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


}

3. Функции для заполнения полей формы для каждой вкладки:

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. Функция, формирующая html вкладок:

function admin_tabs( $current = 'homepage' ) {
$tabs = array( 'homepage' => 'Стоимость услуг', 'general' => 'Продолжительность уборки', 'footer' => 'Дополнительные настройки' );

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. Вывод содержимого страницы настроек:

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' );     // скрытые защитные поля
                    do_settings_sections( 'kalkulator_page' ); // секции с настройками (опциями)
                    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' ); //первая секция с настройками
                    do_settings_sections( 'kalkulator_text_desc' );      //вторая секция с настройками
                    submit_button();
                    ?>
                </form>
                <?php
                break;
        }
    }
    ?>
</div>
<?php
}