Theme option page doesn't save options

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"
                    h2Yellow 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   }

Topic theme-options theme-development Wordpress

Category Web


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 );
    }
}

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.