Wordpress - WordPress Settings API, Implementing Tabs On Custom Menu Page
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_header_option');
echo '<input type="text" id="' . $args[0] . '" name="ch_essentials_header_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