Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've been following the WordPress Settings API tutorial series of this guy:

http://wp.tutsplus.com/tutorials/theme-development/the-complete-guide-to-the-wordpress-settings-api-part-1/

So far, I've been successful at doing the basic thing. Now, when implementing tab, I'm facing problem.

Problem 1: The Tabs are not working. All the fields are being displayed on both the tabs. Section 1, should be displayed on Tab One and Section 2 on Tab Two.

Problem 2: Option 2 is not being saved. It was working fine before implementing tabs.

enter image description here

enter image description here

Code:

/* ----------------------------------------------------------------------------- */
/* Add Menu Page */
/* ----------------------------------------------------------------------------- */ 

function add_my_menu() {
    add_menu_page (
        'Page Title', // page title 
        'Menu Title', // menu title
        'manage_options', // capability
        'my-menu-slug',  // menu-slug
        'my_menu_page',   // function that will render its output
        get_template_directory_uri() . '/assets/ico/theme-option-menu-icon.png'   // link to the icon that will be displayed in the sidebar
        //$position,    // position of the menu option
    );
}
add_action('admin_menu', 'add_my_menu');
function my_menu_page() {
        ?>
        <?php  
        if( isset( $_GET[ 'tab' ] ) ) {  
            $active_tab = $_GET[ 'tab' ];  
        } else {
            $active_tab = 'tab_one';
        }
        ?>  
        <div class="wrap">
            <h2>Menu Page Title</h2>
            <div class="description">This is description of the page.</div>
            <?php settings_errors(); ?> 

            <h2 class="nav-tab-wrapper">  
                <a href="?page=my-menu-slug&tab=tab_one" class="nav-tab <?php echo $active_tab == 'tab_one' ? 'nav-tab-active' : ''; ?>">Tab One</a>  
                <a href="?page=my-menu-slug&tab=tab_two" class="nav-tab <?php echo $active_tab == 'tab_two' ? 'nav-tab-active' : ''; ?>">Tab Two</a>  
            </h2>  

            <form method="post" action="options.php"> 
            <?php
                if( $active_tab == 'tab_one' ) {  

                    settings_fields( 'setting-group-1' );
                    do_settings_sections( 'my-menu-slug' );

                } elseif( $active_tab == 'tab_two' )  {

                    settings_fields( 'setting-group-2' );
                    do_settings_sections( 'my-menu-slug' );

                }
            ?>

                <?php submit_button(); ?> 
            </form> 

        </div>
        <?php
}

/* ----------------------------------------------------------------------------- */
/* Setting Sections And Fields */
/* ----------------------------------------------------------------------------- */ 

function sandbox_initialize_theme_options() {  
    add_settings_section(  
        'page_1_section',         // ID used to identify this section and with which to register options  
        'Section 1',                  // Title to be displayed on the administration page  
        'page_1_section_callback', // Callback used to render the description of the section  
        'my-menu-slug'                           // Page on which to add this section of options  

    );

    add_settings_section(  
        'page_2_section',         // ID used to identify this section and with which to register options  
        'Section 2',                  // Title to be displayed on the administration page  
        'page_2_section_callback', // Callback used to render the description of the section  
        'my-menu-slug'                           // Page on which to add this section of options  
    );

    /* ----------------------------------------------------------------------------- */
    /* Option 1 */
    /* ----------------------------------------------------------------------------- */ 

    add_settings_field (   
        'option_1',                      // ID used to identify the field throughout the theme  
        'Option 1',                           // The label to the left of the option interface element  
        'option_1_callback',   // The name of the function responsible for rendering the option interface  
        'my-menu-slug',                          // The page on which this option will be displayed  
        'page_1_section',         // The name of the section to which this field belongs  
        array(                              // The array of arguments to pass to the callback. In this case, just a description.  
            'This is the description of the option 1',
        )  
    );  
    register_setting(  
        //~ 'my-menu-slug',  
        'setting-group-1',  
        'option_1'  
    );

    /* ----------------------------------------------------------------------------- */
    /* Option 2 */
    /* ----------------------------------------------------------------------------- */     

    add_settings_field (   
        'option_2',  // ID -- ID used to identify the field throughout the theme  
        'Option 2', // LABEL -- The label to the left of the option interface element  
        'option_2_callback', // CALLBACK FUNCTION -- The name of the function responsible for rendering the option interface  
        'my-menu-slug', // MENU PAGE SLUG -- The page on which this option will be displayed  
        'page_2_section', // SECTION ID -- The name of the section to which this field belongs  
        array( // The array of arguments to pass to the callback. In this case, just a description.  
            'This is the description of the option 2', // DESCRIPTION -- The description of the field.
        )  
    );
    register_setting(  
        'setting-group-2',  
        'option_2'  
    );

} // function sandbox_initialize_theme_options
add_action('admin_init', 'sandbox_initialize_theme_options');

function page_1_section_callback() {  
    echo '<p>Section Description here</p>';  
} // function page_1_section_callback
function page_2_section_callback() {  
    echo '<p>Section Description here</p>';  
} // function page_1_section_callback

/* ----------------------------------------------------------------------------- */
/* Field Callbacks */
/* ----------------------------------------------------------------------------- */ 

function option_1_callback($args) {  
    ?>
    <input type="text" id="option_1" class="option_1" name="option_1" value="<?php echo get_option('option_1') ?>">
    <p class="description option_1"> <?php echo $args[0] ?> </p>
    <?php      
} // end sandbox_toggle_header_callback  

function option_2_callback($args) {  
    ?>
    <textarea id="option_2" class="option_2" name="option_2" rows="5" cols="50"><?php echo get_option('option_2') ?></textarea>
    <p class="description option_2"> <?php echo $args[0] ?> </p>
    <?php      
} // end sandbox_toggle_header_callback  
share|improve this question
    
I'm not too familiar with the settings API, but from first glance it appears all of your fields belong to a single settings section, which you output in both tabs. –  Milo Dec 23 '13 at 21:20
    
@Milo I got it working, but I would say that WordPress Settings API is very confusing to understand. Also, it has nearly zero official documentation. –  Omar Tariq Dec 24 '13 at 8:18
add comment

1 Answer

up vote 1 down vote accepted

Here is how I do it, beware, post is extensive.

/* Add Menus
-----------------------------------------------------------------*/
add_action('admin_menu', 'ch_essentials_admin');
function ch_essentials_admin() {
    /* Base Menu */
    add_menu_page(
    'Essentials Theme',
    'Essentials Theme',
    'manage_options',
    'ch-essentials-options',
    'ch_essentials_index');
}

Now for my settings fields, extra fields removed, just as an example.

This is for 'Front Page Settings' and 'Front Page Tab'

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

/* Front Page Options Section */
add_settings_section( 
    'ch_essentials_front_page',
    'Essentials Front Page Options',
    'ch_essentials_front_page_callback',
    'ch_essentials_front_page_option'
);

add_settings_field(  
    'featured_post',                      
    'Featured Post',               
    'ch_essentials_featured_post_callback',   
    'ch_essentials_front_page_option',                     
    'ch_essentials_front_page'
);

This is for my header options, which is the tab 'header options'

/* Header Options Section */
add_settings_section( 
    'ch_essentials_header',
    'Essentials Header Options',
    'ch_essentials_header_callback',
    'ch_essentials_header_option'
);

add_settings_field(  
    'header_type',                      
    'Header Type',               
    'ch_essentials_textbox_callback',   
    'ch_essentials_header_option',                     
    'ch_essentials_header',
    array(
        'header_type' 
    ) 
);

Register Settings

register_setting('ch_essentials_front_page_option', 'ch_essentials_front_page_option');
register_setting('ch_essentials_header_option', 'ch_essentials_header_option');

All of these are wrapped in one function, then done with an admin_init

/* Options
-----------------------------------------------------------------*/
add_action('admin_init', 'ch_essentials_options');
function ch_essentials_options() { 
    /* Code Shown above */
}

Call Backs:

/* Call Backs
-----------------------------------------------------------------*/
function ch_essentials_front_page_callback() { 
    echo '<p>Front Page Display Options:</p>'; 
}
function ch_essentials_header_callback() { 
    echo '<p>Header Display Options:</p>'; 
}
function ch_essentials_textbox_callback($args) { 

    $options = get_option('ch_essentials_front_page_option'); 

    echo '<input type="text" id="'  . $args[0] . '" name="ch_essentials_front_page_option['  . $args[0] . ']" value="' . $options[''  . $args[0] . ''] . '"></input>';

}
function ch_essentials_featured_post_callback() { 

    $options = get_option('ch_essentials_front_page_option'); 

    query_posts( $args );


    echo '<select id="featured_post" name="ch_essentials_front_page_option[featured_post]">';
    while ( have_posts() ) : the_post();

        $selected = selected($options[featured_post], get_the_id(), false);
        printf('<option value="%s" %s>%s</option>', get_the_id(), $selected, get_the_title());

    endwhile;
    echo '</select>';


}

Now this is the display part, with the tabs..

If you have your settings sections and fields done exactly like this, then you will be able to do the tabs flawlessly.

/* Display Page
-----------------------------------------------------------------*/
function ch_essentials_index() {
?>
    <div class="wrap">  
        <div id="icon-themes" class="icon32"></div>  
        <h2>Essentials Theme Options</h2>  
        <?php settings_errors(); ?>  

        <?php  
                $active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'front_page_options';  
        ?>  

        <h2 class="nav-tab-wrapper">  
            <a href="?page=ch-essentials-options&tab=front_page_options" class="nav-tab <?php echo $active_tab == 'front_page_options' ? 'nav-tab-active' : ''; ?>">Front Page Options</a>  
            <a href="?page=ch-essentials-options&tab=header_options" class="nav-tab <?php echo $active_tab == 'header_options' ? 'nav-tab-active' : ''; ?>">Header Options</a>  
        </h2>  


        <form method="post" action="options.php">  

            <?php 
            if( $active_tab == 'front_page_options' ) {  
                settings_fields( 'ch_essentials_front_page_option' );
                do_settings_sections( 'ch_essentials_front_page_option' ); 
            } else if( $active_tab == 'header_options' ) {
                settings_fields( 'ch_essentials_header_option' );
                do_settings_sections( 'ch_essentials_header_option' ); 

            }
            ?>             
            <?php submit_button(); ?>  
        </form> 

    </div> 
<?php
}

-----EDIT-----

and I did notice in your post that you have 'elseif' and not 'else if' on your actual display page on the tab section

share|improve this answer
    
Thanks. Got is working after matching with your code. –  Omar Tariq Dec 24 '13 at 8:16
    
Good, I'm glad I could help.. if you need anything else let me know. –  MrJustin Dec 24 '13 at 9:46
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.