Site icon Hip-Hop Website Design and Development

Display Each Setting Section In Each Specific Tab within Same Page || Settings API

as everyone knows, when we want to display some setting section in some specific page, normally we must pass to it the slug-name of the page where we want to dispay it . it work 100% , but the problem that i faced is that when i wanted to work in just one Theme Page Option with Tabbed Navigation , i tried to follow the core rules so i did that to create two section and separate them with tabbed navigation in order to not interfere with the nonces . That’s My Code .

        // These Are The registering settings for the Fields .
        register_setting( 'busymarket-header-settings', 'busymarkets-breadcrumb-setting' );
        register_setting( 'busymarket-footer-settings', 'busymarkets-main-footer-setting' );
        register_setting( 'busymarket-footer-settings', 'busymarkets-left-btm-footer-setting' );
        register_setting( 'busymarket-footer-settings', 'busymarkets-right-btm-footer-setting' );

        $active_tab = 'header_options';
        if ( isset( $_GET[ 'tab' ] ) ) { 
            if ( $_GET[ 'tab' ] == 'header_options' ) {
                $active_tab = 'header_options';
            } else if ( $_GET[ 'tab' ] == 'footer_options' ) {
                $active_tab = 'footer_options';
            }
        }

        <!-- Create A Tabbed Navigation For The Settings API -->
        <h2 class="nav-tab-wrapper">
            <a href="<?php echo admin_url( '?page=busymarkets-theme-panel&tab=header_options' ); ?>" class="nav-tab<?php echo $active_tab == 'header_options' ? ' nav-tab-active' : ''; ?>">Header Options</a>
            <a href="<?php echo admin_url( '?page=busymarkets-theme-panel&tab=footer_options' ); ?>" class="nav-tab<?php echo $active_tab == 'footer_options' ? ' nav-tab-active' : ''; ?>">Footer Options</a>
        </h2>

        // The 'busymarket-header-settings' is The Option Group For The Header option .
        // The 'busymarket-footer-settings' is The Option Group For The Footer option .
        if ( $active_tab == 'footer_options' ) {
            // Footer Settings Registering .
            settings_fields( 'busymarket-footer-settings' );
            do_settings_sections( 'busymarkets-theme-panel' );

        } else if ( $active_tab == 'header_options' ) {
            // Footer Settings Registering .
            settings_fields( 'busymarket-header-settings' );
            do_settings_sections( 'busymarkets-theme-panel' );
        }

        submit_button();

The problem here is that actually the function do_settings_sections() Accepts the slug-name of the page where we want to output the section fields , and the fact that i’m using tab navigation i did a conditional code as you see below to not interfere with nonces and only display one section setting for every tab , But it didn’t work .

I saw in a lot of tutorials that some developers work with a specific slug-name far from the slug-name of the page , whichever tab i click , i see the same section field , nothing happen and nothing changes .

So please, is there any solution to get thsi stuff work properly ?