WordPress options not saving

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.

Read More
<?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 ?

Related posts

1 comment

  1. 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.

    <?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' ];
            }
            ?>
            <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( isset( $_GET[ 'tab' ] ) ) {
                    $active_tab = $_GET[ 'tab' ];
    
                    switch($active_tab) {
                        case 'color-options' :
                        echo $active_tab;
                        settings_fields('mb-color-options');
                        do_settings_sections('mb-color-options');
                        break;
                        case 'general-options' :
                        echo $active_tab;
                        settings_fields('mb-general-options');
                        do_settings_sections('mb-general-options');
                        break;
                    }
                    submit_button();
                }
                ?>
            </form>
        </div>
        <?php
    }
    
    function mb_admin_init() {
        register_setting( 'mb-color-options', 'link_color' );
        register_setting( 'mb-color-options', 'link_hover_color' );
        register_setting( 'mb-general-options', 'title' );
        add_settings_section( 'section_colors',  'Color Settings', null, '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_settings_section( 'section_options',  'General Options', null, 'mb-general-options' );
        add_settings_field( 'title', 'Page Title', 'mb_title_option', 'mb-general-options', 'section_options' );
    
    
    }
    add_action( 'admin_init', 'mb_admin_init' );
    
    function mb_general_option() {
        _e( 'The general section description goes here.');
    }
    
    function mb_title_option() {
        $options = get_option('title');
        ?>
        <input type="text" name="title" id="title" value="<?php echo $options;?>"/>
        <?php 
    }
    
    function mb_section_colors() {
        _e( 'The general section description goes here.' );
    }
    
    function mb_setting_color() {
        $link_color = get_option( 'link_color' );
        ?>
        <input class="link_color" type="text" name="link_color" value="<?php echo $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() {
        $link_hover_color = get_option( 'link_hover_color' );
        ?>
        <input class="link_color" type="text" name="link_hover_color" value="<?php echo $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' );
    

Comments are closed.