Wordpress plugin form not saving data

Question

I am learning development of plugins, I am stuck into saving the plugin options form data.

I have a plugin options page, where three fields asking for number of videos, height and width are coded.

When I enter the values into it, and hit on save its just saving one value, that is, number of videos.

Here is my code

    <?php
add_action('admin_init', 'ozh_sampleoptions_init' );
add_action('admin_menu', 'ozh_sampleoptions_add_page');

// Init plugin options to white list our options
function ozh_sampleoptions_init(){
    register_setting( 'ozh_sampleoptions_options', 'ozh_sample', 'ozh_sampleoptions_validate' );
}

// Add menu page
function ozh_sampleoptions_add_page() {
    add_options_page('Youtube Video Settings', 'Youtube Video Settings', 'manage_options', 'ozh_sampleoptions', 'ozh_sampleoptions_do_page');
}

// Draw the menu page itself
function ozh_sampleoptions_do_page() {
    ?>
    <div class="wrap">
        <h2>Youtube Video Setting Options</h2>
        <form method="post" action="options.php">
            <?php settings_fields('ozh_sampleoptions_options'); ?>
            <?php $options = get_option('ozh_sample'); ?>
            <table class="form-table">
                <tr valign="top"><th scope="row">No of videos:</th>
                    <td><input type="text" name="ozh_sample[sometext]" value="<?php echo $options['sometext']; ?>" /></td>
                </tr>

                                <tr valign="top"><th scope="row">Height:</th>
                    <td><input type="text" name="ozh_sample[hgt]" value="<?php echo $options['hgt']; ?>" /></td>
                </tr>

                                <tr valign="top"><th scope="row">Width:</th>
                    <td><input type="text" name="ozh_sample[wid]" value="<?php echo $options['wid']; ?>" /></td>
                </tr>
            </table>
            <p class="submit">
            <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
            </p>
        </form>
    </div>
    <?php   

}

// Sanitize and validate input. Accepts an array, return a sanitized array.
function ozh_sampleoptions_validate($input) {
    // Our first value is either 0 or 1
    //$input['option1'] = ( $input['option1'] == 1 ? 1 : 0 );

    // Say our second option must be safe text with no HTML tags
    $input['sometext'] =  wp_filter_nohtml_kses($input['sometext']);
    $input['hgt'] =  wp_filter_nohtml_kses($input['hgt']);
    $input['wid'] =  wp_filter_nohtml_kses($input['wid']);

    return $input;
}
    $myoptions = get_option( 'ozh_sampleoptions_options' ); 
echo 'Niraj';
echo $options['sometext'];

?>

Its not saving height and width.

I know I have to work on <input type='hidden' name='page_options' value='vidNO'/> code, but not getting it,

Can anyone help me in this???

Answer 1

First, you really should be storing your options as an array in wp_options. But should you choose not to, you really should change the names of your second and third options; "height" and "width" are entirely too generic, and almost assuredly will cause conflicts. You're passing name="height" and name="width", respectively, but I doubt that WordPress is associating "width" and "height" as options that belong to your Plugin.

So, assuming your store your options as plugin_plugin-slug_options, which is an array:

<?php
$plugin_options = get_option( 'plugin_plugin-slug_options' );
?>

<tr><td>Number Of Videos:</td><td><input type="text" name="$plugin_options[vidNO]"  value="<?php echo get_option('vidNO');?>" <?php echo get_option('vidNO'); ?> />
</td></tr>

<tr><td>Height:</td><td><input type="text"  name="$plugin_options[height]" value="<?php echo get_option('height');?>" <?php echo get_option('height'); ?> />
</td></tr>


<tr><td>Width:</td><td><input type="text"  name="$plugin_options[width]" value="<?php echo get_option('width');?>" <?php echo get_option('width'); ?> />
</td></tr>

But you really should consider using the Settings API, at least insofar as using register_setting() to register your options array, and settings_fields() to do the heavy lifting in your settings form.

Answer 2

I recommend checking out the tutorial by Ozh on Handling Plugin Options with register_setting.

Utilizing the Settings API is by far the easiest way to deal with plugin options.

Answer 3

WordPress will do the work for you.

Quick example of an option page containing a form with 1 field.

add_action('admin_menu', 'c3m_myplugin_add_page');
function c3m_myplugin_add_page() {
    add_options_page( 'C3M Google Analytics', 'C3M Google Analytics', 'manage_options', 'c3m_myplugin', 'c3m_myplugin_option_page' );
}

// Draw the option page
function c3m_myplugin_option_page() {
    ?>
    <div class="wrap">
        <h2>Really Simple Google Analytics</h2>
        <form action="options.php" method="post">
            <?php settings_fields( 'c3m_myplugin_options' ); ?>
            <?php do_settings_sections( 'c3m_myplugin' ); ?>
            <input name="Submit" type="submit" value="Save Changes" />
        </form>
    </div>
    <?php
}

// Register and define the settings
add_action( 'admin_init', 'c3m_myplugin_admin_init' );
function c3m_myplugin_admin_init(){
    register_setting(
        'c3m_myplugin_options',
        'c3m_myplugin_options'
    );
    add_settings_section(
        'c3m_myplugin_main',
        'Google Analytics Web Property ID',
        'c3m_myplugin_section_text',
        'c3m_myplugin'
    );
    add_settings_field(
        'c3m_myplugin_text_string',
        'Enter text here',
        'c3m_myplugin_setting_input',
        'c3m_myplugin',
        'c3m_myplugin_main'
    );
}

// Draw the section header
function c3m_myplugin_section_text() {
    echo '<p>Enter your Google Analytics Web Property ID here ex: UA-XXXXXX-XX.</p>';
}