Stworzyłem stronę ustawień dla mojego niestandardowego motywu w WordPress i stworzyłem różne metaboxy za pośrednictwem interfejsu API ustawień.

Aby zachować porządek na stronie, stworzyłem zakładki nawigacyjne, jedynym problemem jest to, że mogę zapisać metaboxy tylko w pierwszej sekcji.

To jest mój formularz kodu:

<?php
// Check user capabilities
if (!current_user_can('manage_options')) {
    return;
}
?>

<div class="wrap">
    <?php settings_errors(); ?>
    <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
    <form method="post" action="options.php" enctype="multipart/form-data">
        <?php
        // Gestisce le tab di impostazione del tema
        $active_tab = "primary-colors-options";
        if (isset($_GET["tab"])) {
            if ($_GET["tab"] == "primary-colors-options") {
                $active_tab = "primary-colors-options";
                settings_fields("heisenberg_sezione_colori_primari");
            } else if ($_GET["tab"] == "neutral-colors-options") {
                $active_tab = "neutral-colors-options";
                settings_fields("heisenberg_sezione_colori_neutrali");
            } else if ($_GET["tab"] == "header-options") {
                $active_tab = "header-options";
                settings_fields("heisenberg_header_options");
            } else if ($_GET["tab"] == "footer-options") {
                $active_tab = "footer-options";
                settings_fields("heisenberg_footer_options");
            } else {
                $active_tab = "404-options";
                settings_fields("heisenberg_404_options");
            }
        }
        ?>

        <h2 class="nav-tab-wrapper">
            <a href="?page=heisenberg-options&tab=primary-colors-options" class="nav-tab <?php if ($active_tab == 'primary-colors-options') {
                                                                                                echo 'nav-tab-active';
                                                                                            } ?> "><?php _e('Colori Primari', THEME_TEXT_DOMAIN); ?></a>
            <a href="?page=heisenberg-options&tab=neutral-colors-options" class="nav-tab <?php if ($active_tab == 'neutral-colors-options') {
                                                                                                echo 'nav-tab-active';
                                                                                            } ?> "><?php _e('Colori Neutrali', THEME_TEXT_DOMAIN); ?></a>

            <a href="?page=heisenberg-options&tab=header-options" class="nav-tab <?php if ($active_tab == 'header-options') {
                                                                                        echo 'nav-tab-active';
                                                                                    } ?> "><?php _e('Header', THEME_TEXT_DOMAIN); ?></a>
            <a href="?page=heisenberg-options&tab=footer-options" class="nav-tab <?php if ($active_tab == 'footer-options') {
                                                                                        echo 'nav-tab-active';
                                                                                    } ?>"><?php _e('Footer', THEME_TEXT_DOMAIN); ?></a>
            <a href="?page=heisenberg-options&tab=404-options" class="nav-tab <?php if ($active_tab == '404-options') {
                                                                                    echo 'nav-tab-active';
                                                                                } ?>"><?php _e('404', THEME_TEXT_DOMAIN); ?></a>
        </h2>

        <?php
        do_settings_sections('heisenberg-options');
        submit_button();
        ?>
    </form>
</div>

To jest mój kod dla interfejsu API ustawień:

<?php
/*-------------------------------
 * WordPress Settings API
-------------------------------*/
if (!isset($_GET["tab"]) || $_GET["tab"] == "primary-colors-options") {

    add_settings_section(
        'heisenberg_sezione_colori_primari',
        __('Colori Primari', THEME_TEXT_DOMAIN),
        'display_heisenberg_general_options_content',
        'heisenberg-options'
    );
    function display_heisenberg_general_options_content()
    {
        echo '<p>' . __('Lorem Ipsum.', THEME_TEXT_DOMAIN) . '</p>';
    }

    add_settings_field(
        'colore_primario_1',
        __('Colore Primario 1', THEME_TEXT_DOMAIN),
        'colore_primario_1_callback',
        'heisenberg-options',
        'heisenberg_sezione_colori_primari'
    );
    register_setting(
        'heisenberg_sezione_colori_primari',
        'colore_primario_1'
    );
    function colore_primario_1_callback()
    {
        $colore_primario_1 = get_option('colore_primario_1');
        if (isset($colore_primario_1) && $colore_primario_1 != '') {
            $colore_primario_1 = esc_attr($colore_primario_1);
        } else {
            $colore_primario_1 = '#05400A';
        }
        echo "<input type="text" name="colore_primario_1" id='colore_primario_1' value="" . $colore_primario_1 . "" class="color-picker" data-alpha-enabled='true' />";
    }

} elseif ($_GET["tab"] == "neutral-colors-options") {

    add_settings_section(
        'heisenberg_sezione_colori_neutrali',
        __('Colori Neutrali', THEME_TEXT_DOMAIN),
        'display_heisenberg_colori_neutrali_options_content',
        'heisenberg-options'
    );
    function display_heisenberg_colori_neutrali_options_content()
    {
        echo '<p>' . __('Lorem Ipsum.', THEME_TEXT_DOMAIN) . '</p>';
    }

    add_settings_field(
        'colore_neutrale_1',
        __('Colore Neutrale 1', THEME_TEXT_DOMAIN),
        'colore_neutrale_1_callback',
        'heisenberg-options',
        'heisenberg_sezione_colori_neutrali'
    );
    register_setting(
        'heisenberg_sezione_colori_neutrali',
        'colore_neutrale_1'
    );
    function colore_neutrale_1_callback()
    {
        $colore_neutrale_1 = get_option('colore_neutrale_1');
        if (isset($colore_neutrale_1) && $colore_neutrale_1 != '') {
            $colore_neutrale_1 = esc_attr($colore_neutrale_1);
        } else {
            $colore_neutrale_1 = '#000';
        }
        echo "<input type="text" name="colore_neutrale_1" id='colore_neutrale_1' value="" . $colore_neutrale_1 . "" class="color-picker" data-alpha-enabled='true' />";
    }
}

Dziękuję tym, którzy pomogą!