Theme option page doesn't save options

Question

I am trying to practice adding theme options page using settings API but unfortunately the code i have written according to the codex doesn't work properly. When i tested the code no errors generated but the pe_bannar_heading option can't be saveed , So would you please help me find where the problem is in the following code

    <?php
    /*
    Plugin Name: Test option page
    Text Domain: test-option-page
    */

    function reg_settings(){
        register_setting('pe_theme_options','pe_theme_options');
        add_settings_section('pe_main_settings','Main Settings', '', __FILE__);
        add_settings_field('pe_bannar_heading', 'Bannar Heading:', 'pe_bannar_heading_setting', __FILE__, 'pe_main_settings');
    }

    add_action('admin_init','reg_settings');

    function pe_bannar_heading_setting(){ 

                $options = get_option('pe_theme_options');?>
                <input name="pe_bannar_heading" type="text" value="<?php if(isset($options['pe_bannar_heading'])) echo $options['pe_bannar_heading'] ?>"/>

            <?php }

    function pe_add_menu_page(){
                add_options_page('Theme Options', 'Theme Options', 'administrator', __FILE__ , 'display_options_page');
            }

    add_action('admin_menu','pe_add_menu_page');

    function display_options_page(){

                $options = get_option('pe_theme_options');?>
                <div class="wrap">
                    <h2>Yellow Blog Options</h2>
                    <form action="options.php" method="post" enctype="multipart/form-data">
                        <?php 
                            settings_fields('pe_theme_options');
                            do_settings_sections(__FILE__);
                            submit_button( 'Save Settings' );
                        ?>
                    </form>
                </div>  
    <?php   }

Answer 1

In order for the submitted value to persist, you need to save it into the corresponding option array. To do that, you can add another function (pe_save_settings() in this case) to catch the form submission and save the field's content. Here's the full working code:

<?php
/*
Plugin Name: Test option page
Text Domain: test-option-page
*/

function reg_settings(){
    register_setting('pe_theme_options','pe_theme_options_item');
    add_settings_section('pe_main_settings','Main Settings', '', __FILE__);
    add_settings_field('pe_bannar_heading', 'Bannar Heading:', 'pe_bannar_heading_setting', __FILE__, 'pe_main_settings');
}

add_action('admin_init','reg_settings');

function pe_bannar_heading_setting() { 
    $options = get_option('pe_theme_options_array'); ?>
    <input id="pe_theme_options_item" name="pe_theme_options_item" type="text" value="<?php if ( isset( $options['pe_bannar_heading'] ) ) { echo $options['pe_bannar_heading']; } ?>"/>
    <?php 
}

function pe_add_menu_page(){
    add_options_page('Theme Options', 'Theme Options', 'administrator', __FILE__ , 'display_options_page');
}

add_action('admin_menu','pe_add_menu_page');

function display_options_page() {
    $options = get_option('pe_theme_options_array');?>
    <div class="wrap">
        <h2>Yellow Blog Options</h2>
        <form action="options.php" method="post" enctype="multipart/form-data">
            <?php 
            settings_fields('pe_theme_options');
            do_settings_sections(__FILE__);
            submit_button( 'Save Settings', 'primary', 'pe_new_option' );
            ?>
        </form>
    </div>  
<?php }

add_action( 'admin_init', 'pe_save_settings' );

function pe_save_settings() {
    if ( isset( $_POST['pe_new_option'] ) ) {
        $new_value = trim( $_POST[ 'pe_theme_options_item'] );
        $options_array = get_option('pe_theme_options_array');
        $options_array['pe_bannar_heading'] = $new_value;
        update_option( 'pe_theme_options_array', $options_array );
    }
}