I’m trying to build a theme options page and have been successful until i added a tabs menu. Since adding the tabs the options no longer save.
Here is my code.
<?php
function mb_admin_menu() {
$page = add_theme_page( 'Theme Options', 'Theme Options', 'edit_theme_options', 'mb-theme-options', 'mb_theme_options' );
add_action( 'admin_print_styles-' . $page, 'mb_admin_scripts' );
}
add_action( 'admin_menu', 'mb_admin_menu' );
function mb_admin_scripts() {
wp_enqueue_style( 'farbtastic' );
wp_enqueue_script( 'farbtastic' );
wp_enqueue_script( 'my-theme-options', get_template_directory_uri() . '/js/theme-options.js', array( 'farbtastic', 'jquery' ) );
}
function mb_theme_options( $active_tab = '' ) {
?>
<div class="wrap">
<div id="icon-themes" class="icon32" ><br></div>
<h2>My Theme Options</h2>
<?php
if( isset( $_GET[ 'tab' ] ) ) {
$active_tab = $_GET[ 'tab' ];
} // end if
?>
<?php if( isset( $_GET[ 'tab' ] ) ) {
$active_tab = $_GET[ 'tab' ];
} else if( $active_tab == 'general-options' ) {
$active_tab = 'general-options';
} else {
$active_tab = 'color-options';
} // end if/else ?>
<h2 class="nav-tab-wrapper">
<a href="?page=mb-theme-options&tab=color-options" class="nav-tab <?php echo $active_tab == 'color-options' ? 'nav-tab-active' : ''; ?>">Color Options</a>
<a href="?page=mb-theme-options&tab=general-options" class="nav-tab <?php echo $active_tab == 'general-options' ? 'nav-tab-active' : ''; ?>">General Options</a>
</h2>
<form method="post" action="options.php">
<?php wp_nonce_field( 'update-options' ); ?>
<?php if( $active_tab == 'color-options' ) {
settings_fields( 'mb-color-options' );
do_settings_sections( 'mb-color-options' );
} else {
settings_fields( 'mb-general-options' );
do_settings_sections( 'mb-general-options' );
} // end if/else
submit_button(); ?>
</form>
</div>
<?php
}
function mb_admin_init() {
register_setting( 'mb-color-options', 'mb-color-options' );
add_settings_section( 'section_colors', 'Color Settings', 'mb_section_colors', 'mb-color-options' );
add_settings_field( 'link_color', 'Link Color', 'mb_setting_color', 'mb-color-options', 'section_colors' );
add_settings_field( 'link_hover_color', 'Link Hover Color', 'mb_hover_setting_color', 'mb-color-options', 'section_colors' );
}
add_action( 'admin_init', 'mb_admin_init' );
function mb_section_colors() {
_e( 'The general section description goes here.' );
}
function mb_setting_color() {
$options = get_option( 'mb-color-options' );
?>
<input class="link_color" type="text" name="mb-theme-options[link_color]" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
<input type='button' class='select_color button-secondary' value='Select Color'>
<div class='color_picker' style='z-index: 100; background:#f1f1f1; position:absolute; display:none;'></div>
<input type='button' class='reset_color button-secondary' value='Reset'>
<?php
}
function mb_hover_setting_color() {
$options = get_option( 'mb-color-options' );
?>
<input class="link_color" type="text" name="mb-theme-options[link_hover_color]" value="<?php echo esc_attr( $options['link_hover_color'] ); ?>" />
<input type='button' class='select_color button-secondary' value='Select Color'>
<div class='color_picker' style='z-index: 100; background:#f1f1f1; position:absolute; display:none;'></div>
<input type='button' class='reset_color button-secondary' value='Reset'>
<?php
}
function mb_link_color() {
$options = get_option( 'mb-theme-options' );
$link_color = $options['link_color'];
$link_hover_color = $options['link_hover_color'];
echo "<style> a { color: $link_color; } a:hover { color: $link_hover_color; } </style>";
}
add_action( 'wp_enqueue_scripts', 'mb_link_color' );
?>
Is anyone able to point out why the options are not saving since adding the tabs ?
Is your problem solved ?? If not then try this one !! It is working for me.
I just changed the way you are registering the settings. Don’t know what that was but it worked. Might work for you as well.