My settings are not saving in wordpress theme options page

Question

I am trying to create a theme options page based on WordPress's Settings API. When I go to check the options.php page in my browser (ex. http://mysite.com/wordpress/wp-admin/options.php), I see an entry for coolorange_options but it is empty. This happened after I added a url, width and height to the text fields.

So far, I have enough code written to get the information and store it to the database, but not to retrieve it for anything. I referenced a tutorial in the php comment at the top of the code. Considering that I don't know much php or programming, something must be wrong here, I just don't know what. The entire code is below:

<?php 
// This options page mainly follows the WordPress Settings API Tutorial at
// http://ottodestruct.com/blog/2009/wordpress-settings-api-tutorial/
add_action('admin_menu', 'theme_admin_add_page');
add_action('admin_init', 'theme_admin_init');

function theme_admin_init() {
register_setting('coolorange_theme_options', 'coolorange_options', 'coolorange_options_validate');
// what each parameter represents: add_settings_field($id, $title, $callback, $page, $section, $args);
add_settings_section('coolorange_logo_main', 'Logo Section Settings', 'logo_section_text', 'coolorange');
add_settings_field('upload_image_button', '<strong>Upload logo to the Media Folder</strong>', 'file_upload_button', 'coolorange', 'coolorange_logo_main'); // Upload Logo button
add_settings_field('logo_textfields', '<strong>Logo location</strong>', 'file_location', 'coolorange', 'coolorange_logo_main'); // logo url, width and height text fields
add_settings_field('restore_selectbox', '<strong>Restore original heading</strong>', 'restore_dropdown', 'coolorange', 'coolorange_logo_main');
}

function logo_section_text() {
echo '<p>In this section, you can replace the standard blog title heading with a custom logo. The logo cannot be wider than <strong>960 pixels</strong>.</p>';
}

function file_upload_button() {
$options = get_option('coolorange_theme_options');
echo '<input id="upload_image_button" class="button-secondary" type="button" name="coolorange_theme_options[upload_image_button]" value="Upload Logo" />';
}

function file_location() { //opens file_location function
$options = get_option('coolorange_theme_options'); ?>
<h3>How to upload a logo to replace the heading</h3>
    <div style="background-color: #FFFFFF; border: 1px solid #BBBBBB; padding: 30px;">
    <ul style="list-style: disc;">
        ...instructions to upload logo
    </ul>
</div>
<p><strong>File URL:</strong> <input id="image_url" type="text" value="<?php $options['image_url']; ?>" size="60" name="coolorange_theme_options[image_url]" /><br />
<strong>Logo width:</strong> <input id="image_width" type="text" value="<?php $options['image_width']; ?>" size="6" name="coolorange_theme_options[image_width]" /> Enter logo width in pixels (for example <strong>800px</strong>)<br />
<strong>Logo height:</strong> <input id="image_height" type="text" value="<?php $options['image_height']; ?>" size="6" name="image_height" /> Enter logo height in pixels (for example <strong>90px</strong>)</p>
<?php  
} //closes file_location function

function restore_dropdown() { //opens restore_dropdown function
$options = get_option('coolorange_theme_options'); 
// http://codex.wordpress.org/Function_Reference/selected ?>
<select name="co_restore_selectbox[select_options]" id="co_restore_selectbox">
    <option value="default" <?php if ( $co_restore_selectbox['select_options'] == 'default' )
        echo 'selected="selected"'; ?>>select an option</option>
    <option value="restore" <?php if ( $co_restore_selectbox['select_options'] == 'restore' )
        echo 'selected="selected"'; ?>>Restore CSS</option>
</select>
<?php 
} // closes restore_dropdown funcion

function css_switcher() {
$options = get_option('coolorange_theme_options');
//$backgroundurl = "url('" . $options['image_url']; . "') top center no-repeat";
?>
<style type="text/css">
<!--
#logo {
background: <?php echo $backgroundurl; ?>;
width: <?php echo $image_width; ?>;
height: <?php echo $image_height; ?>;
padding: 1em 2em 0 2em;
margin: 0 auto;
}

#blog-title a {
display: block;
width: <?php echo $image_width; ?>;
height: <?php echo $image_height; ?>;
text-indent: -2000px;
}

#blog-description {
text-indent: -2000px;
}
-->
</style>
<?php } // closes css_switcher function

add_action('wp_head', 'css_switcher');

function theme_admin_add_page() {
add_theme_page('Cool Orange Theme Options','Cool Orange Theme Options','manage_options','coolorange','theme_options_page');
}

//Scripts to load WP's Media Library panel
//http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/
function my_admin_scripts() {
...scripts to load media library - unrelated
}

function my_admin_styles() {
...styles for media library loader
}

if (isset($_GET['page']) && $_GET['page'] == 'coolorange') {
...actions to add for media library loader script
}

function theme_options_page() {
?>
<div class="wrap">
<div id="icon-themes" class="icon32"><br /></div><h2>Cool Orange Theme Options</h2>
<form action="options.php" method="post" name="options_form"><?php settings_fields('coolorange_theme_options'); ?>
<?php do_settings_sections('coolorange'); ?>

<input name="Submit" class="button-primary" type="submit" value="<?php esc_attr_e('Save Changes'); ?>" />
</form>
</div>
<?php 
}
?>

Answer 1

I found an answer for this question earlier today. According to the tutorial, I needed to make sure the names for each option (input field, select box options, etc) were specified as name="coolorange_options[some_text]". I named the some_text part after the id, for example name="coolorange_options[image_url].

In the tutorial, in which I followed a newer version at http://ottopress.com/2009/wordpress-settings-api-tutorial/, each name gets recognized by php as an array. The names co_restore_selectbox[select_options] didn't show up as part of the array until I changed them to coolorange_options[select_options]. When I checked options.php again in my browser, the entry under coolorange_options showed the words SERIALIZED DATA, which I assume means the array was written to the options database.