Setting field not saving on front-end

Question

I'm creating a theme option page and i try to display the values of two input in my front end :

function register_my_header() {
    register_setting( 'header_options', 'header_options');
}
add_action('admin_init', 'register_my_header'); 

function add_header_settings() {
    add_menu_page('Options header', 'Options header', 'manage_options', 'edit_header', 'header_edit_page', null, 58); 
}
add_action('admin_menu', 'add_header_settings');


function header_edit_page() {
?>  
    <div id="theme-options-wrap">
        <div class="icon32" id="icon-tools"> <br> </div> 
        <h2>Header Options</h2>
        <p>Description</p>

        <?php
        if ( false !== $_REQUEST['updated'] ) : ?>
        <div><p><strong><?php _e( 'Options saved' ); ?></strong></p></div>
        <?php endif; ?>

        <form method="post" action="options.php">
            <?php settings_fields('header_options'); ?> 
            <?php $options = get_option('header_options'); ?> 

            <table class="form-table">

                <tr>
                    <th scope="row">Mail</th>
                    <td>
                        <input type="text" name="header_options[txt_mail]" value="<?php echo $options['txt_mail']; ?>" />
                    </td>
                </tr>
                <tr>    
                    <th scope="row">Phone number</th>
                    <td>
                        <input type="text" name="header_options[txt_number]" value="<?php echo $options['txt_number']; ?>" />
                    </td>   
                </tr>       
            </table>
            <p class="submit">
            <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
            </p>
        </form>
    </div>
<?php 
}

function header_validate_options($input) {
    $input['txt_mail'] =  wp_filter_nohtml_kses($input['txt_mail']); 
    $input['txt_number'] =  wp_filter_nohtml_kses($input['txt_number']);
    return $input;
}

function header_add_content() {
    $options = get_option('header_options');
}
add_filter("the_content", "header_add_content");

I'm able to save the value but when i call it with :

        <div class="background-content"></div>
            <div class="layout-header">
                <h1 id='logo' class="image-logo">
                <a href="<?php echo home_url(); ?>"><img <?php do_shortcode('[sitelogo]'); ?></a>
                </h1>
                <div id="contact">
                    <p>Contact Us</p>
                    <p><?php echo $options['txt_mail']; ?></p><p><?php echo $options['txt_number']; ?></p>  
                </div>  
            </div>   

To display it in the front nothing happens ! What am i doing wrong ?

Answer 1

Make the $options variable global by changing the header_add_content() function to the following:

function header_add_content() {
    global $options; 
    $options = get_option('header_options');
}
add_filter("the_content", "header_add_content");

Then declare $options as the global $options on the front-end template before you use it, for example:

<p><?php global $options; echo $options['txt_mail']; ?></p>

Answer 2

Thanks for the answer but this doesn't display my values !

First i tryed to just set $options to global like you said, but it changed nothing and i still can't get the values :

<p><?php global $options; echo $options['txt_number']; ?></p><p><?php global $options; echo $options['txt_mail']; ?></p>

Also tryed to put global $options = get_option('header_options'); hopping this will fix it :

    <div class="background-content"></div>
            <div class="layout-header">
                <h1 id='logo' class="image-logo">
                <a href="<?php echo home_url(); ?>"><img <?php do_shortcode('[sitelogo]'); ?></a>
                </h1>
                <?php global $options = get_option('header_options'); ?>
                <div id="contact">
                    <p>Contact Us</p>
                    <p><?php echo $options['txt_mail']; ?></p><p><?php echo $options['txt_number']; ?></p>  
                </div>  
            </div>

Nothing too ! So i removed my form-table and replace it with section fields (that worked on another theme option page when it was offline but since i'm online impossible to get any value too) :

function add_header_settings() {
    add_menu_page('Option header', 'Options header', 'manage_options', 'edit_header', 'header_edit_page', null, 58); 
}
add_action('admin_menu', 'add_header_settings');

function header_edit_page() {
?>  
    <div id="theme-options-wrap">
        <div class="icon32" id="icon-tools"> <br> </div> 
        <h2>Option Header</h2>
        <p>Description</p>
        <form method="post" action="options.php">
            <?php settings_fields('header_options'); ?> 
            <?php do_settings_sections('edit_header'); ?>
            <p class="submit">
            <input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
            </p>
        </form> 
    </div>
<?php }

function register_and_build_fields(){
    register_setting( 'header_options', 'header_options', 'validate_setting'); 
    add_settings_section('homepage_settings', 'Homepage Settings', 'section_homepage', 'edit_header');

    function section_homepage() {}

    add_settings_field('number1', 'Enter your number', 'number_setting', 'edit_header', 'homepage_settings'); 
}
add_action('admin_init', 'register_and_build_fields'); 

function validate_setting($header_options) {
    return $header_options;
}           

function number_setting() {
    $options = get_option('header_options'); echo "<input name='header_options[number_setting]' type='text' value='{$options['number_setting']}' />";
}

            // $options = get_option('header_options');  
            /* <table class="form-table">

                <tr>
                    <th scope="row">Mail</th>
                    <td>
                        <input type="text" name="header_options[txt_mail]" value="<?php echo $options['txt_mail']; ?>" />
                    </td>
                </tr>
                <tr>    
                    <th scope="row">Phone number</th>
                    <td>
                        <input type="text" name="header_options[txt_number]" value="<?php echo $options['txt_number']; ?>" />
                    </td>   
                </tr>   

            </table> 


function header_validate_options($input) {
    $input['txt_mail'] =  wp_filter_nohtml_kses($input['txt_mail']); 
    $input['txt_number'] =  wp_filter_nohtml_kses($input['txt_number']);
    return $input;
} */

function header_add_content() {
    global $options;
    $options = get_option('header_options');
}
add_filter("the_content", "header_add_content");

Again i can save my value in the theme option page but the front-end don't want to get them :/

By the way : <div class="icon32" id="icon-tools"> <br> </div> i saw this code several times but i don't have any icon next to the titles (even in my second computer with a new installation) is that since an update of WP ?

EDIT :

The save works when i do a get_option with another variable than $options like $header_options or whatever idk why but thanks for the help !

If someone have an explanation for the icon problem i still wanna hear it !