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

admin管理员组

文章数量:1125569

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 ?

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 ?

• settings-api

Share Improve this question edited Mar 30, 2018 at 10:17 Simo Patrek asked Mar 30, 2018 at 9:43 Simo PatrekSimo Patrek 11211 gold badge44 silver badges1515 bronze badges 6

• 1 Looks good to me. Are you sure you are us using correct slug in settings_field(). Where is your register_setting()? – Bikash Waiba Commented Mar 30, 2018 at 10:06
• I did it , Wait i'm gonna edit the question , i just didn't apply i to the question – Simo Patrek Commented Mar 30, 2018 at 10:14
• 1 So far so good. I didn't detect any error. I tried something similar and it worked even though settings are registered for different page slug. It should work. where is your add_settings_field?? – Bikash Waiba Commented Mar 30, 2018 at 11:08
• Thanks Man for You respond , But i'm fully confident that all the functions are well coded , i just don't know where is the problem . Please do you have any idea how to solve this . i'm in need to keep on developing my theme . – Simo Patrek Commented Mar 30, 2018 at 11:19
• 1 I went through your code. I found no error. I tried similar tab with my already coded settings sections and pages it worked like charm. I have no clue on that now. Probably you should check if the settings fields are registered to proper settings sections of settings id's. – Bikash Waiba Commented Mar 30, 2018 at 11:29

 |  Show 1 more comment

2 Answers 2

Sorted by: Reset to default 1

Incase anyone stumbles across this, I recently encountered the same issue and was able to render the differnet using do_setting_fields( $page, $section ) instead of do_settings_sections( $page ).

As per the settings api, do_settings_sections prints out all settings sections added to a particular settings page, whilst do_settings_fields prints out the settings fields for a particular settings section.

If you check the manual: https://developer.wordpress.org/reference/functions/add_settings_section/

You can use the $args['before_section'] and the $args['after_section'] to wrap a section with e.g. '<div class="tab-content">'.$section.'</div>'. After that you only need the proper javascript code.

Another possible solution is giving a different $page for all the sections. In theory this variable should be the page slug, but in practice it can be anything.

Yet another option is using do_setting_fields with a table wrapper as Phil wrote.

What I prefer is the second and I use the form id, which is usually the plugin prefix, the storage id and the storage action e.g. myplugin_mysettings_update. I usually have one section for each form. When I store multiple entities in a settings option I append the entity id too e.g. myplugin_mysettings_123_update, so I can display all the update forms on a single page. I use the same form id as a prefix for input field ids so all input fields can have a unique id. I found that a single section for each tab is not the best solution.

本文标签： Display Each Setting Section In Each Specific Tab within Same PageSettings API