Index: .
===================================================================
--- .	(revision 18388)
+++ .	(working copy)
@@ -77,11 +77,11 @@
  */
 function twentyeleven_theme_options_add_page() {
 	$theme_page = add_theme_page(
-		__( 'Theme Options', 'twentyeleven' ), // Name of page
-		__( 'Theme Options', 'twentyeleven' ), // Label in menu
-		'edit_theme_options',                  // Capability required
-		'theme_options',                       // Menu slug, used to uniquely identify the page
-		'theme_options_render_page'            // Function that renders the options page
+		__( 'Theme Options', 'twentyeleven' ),   // Name of page
+		__( 'Theme Options', 'twentyeleven' ),   // Label in menu
+		'edit_theme_options',                    // Capability required
+		'theme_options',                         // Menu slug, used to uniquely identify the page
+		'twentyeleven_theme_options_render_page' // Function that renders the options page
 	);
 
 	if ( ! $theme_page )
@@ -202,11 +202,121 @@
 }
 
 /**
+ * Defines settings sections and fields
+ * 
+ * @since TwentyEleven 1.2
+ */
+function twentyeleven_settings_fields() {
+
+	/**
+	* Returns general settings page section
+	* 
+	* @since Twenty Eleven 1.2
+	*/
+	function twentyeleven_add_settings_section_general() {
+		// silence is golden
+	}
+	add_settings_section( 
+		'general', // Section slug
+		'', // Section title
+		'twentyeleven_add_settings_section_general', // Section callback
+		'theme_options' // Settings page slug. Same as fourth argument in add_theme_page()
+	);
+
+	/**
+	* Returns Color Scheme setting field
+	* 
+	* @since Twenty Eleven 1.2
+	*/
+	function twentyeleven_add_settings_field_color_scheme() {
+		$options = twentyeleven_get_theme_options();
+		$default_options = twentyeleven_get_default_theme_options();
+		foreach ( twentyeleven_color_schemes() as $scheme ) {
+		?>
+		<div class="layout image-radio-option color-scheme">
+		<label class="description">
+			<input type="radio" name="twentyeleven_theme_options[color_scheme]" value="<?php echo esc_attr( $scheme['value'] ); ?>" <?php checked( $options['color_scheme'], $scheme['value'] ); ?> />
+			<input type="hidden" id="default-color-<?php echo esc_attr( $scheme['value'] ); ?>" value="<?php echo esc_attr( $scheme['default_link_color'] ); ?>" />
+			<span>
+				<img src="<?php echo esc_url( $scheme['thumbnail'] ); ?>" width="136" height="122" alt="" />
+				<?php echo $scheme['label']; ?>
+			</span>
+		</label>
+		</div>
+		<?php
+		}
+	}
+	add_settings_field( 
+		'color_scheme', // Setting field ID
+		__( 'Color Scheme', 'twentyeleven' ), // Setting field title
+		'twentyeleven_add_settings_field_color_scheme', // Setting field callback
+		'theme_options', // Settings page slug. Same as fourth argument in add_settings_section()
+		'general' // Settings section. Save as first argument in add_theme_page()
+	);
+
+	/**
+	* Returns Link Color setting field
+	* 
+	* @since Twenty Eleven 1.2
+	*/
+	function twentyeleven_add_settings_field_link_color() {
+		$options = twentyeleven_get_theme_options();
+		$default_options = twentyeleven_get_default_theme_options();
+		?>
+		<input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
+		<a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
+		<input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
+		<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
+		<br />
+		<span><?php printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-color">' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span>
+		<?php
+	}
+	add_settings_field( 
+		'link_color', // Setting field ID
+		__( 'Link Color', 'twentyeleven' ), // Setting field title
+		'twentyeleven_add_settings_field_link_color', // Setting field callback
+		'theme_options', // Settings page slug. Same as fourth argument in add_settings_section()
+		'general' // Settings section. Same as first argument in add_theme_page()
+	);
+
+	/**
+	* Returns Layout setting field
+	* 
+	* @since Twenty Eleven 1.2
+	*/
+	function twentyeleven_add_settings_field_layout() {
+		$options = twentyeleven_get_theme_options();
+		$default_options = twentyeleven_get_default_theme_options();
+		foreach ( twentyeleven_layouts() as $layout ) {
+			?>
+			<div class="layout image-radio-option theme-layout">
+			<label class="description">
+				<input type="radio" name="twentyeleven_theme_options[theme_layout]" value="<?php echo esc_attr( $layout['value'] ); ?>" <?php checked( $options['theme_layout'], $layout['value'] ); ?> />
+				<span>
+					<img src="<?php echo esc_url( $layout['thumbnail'] ); ?>" width="136" height="122" alt="" />
+					<?php echo $layout['label']; ?>
+				</span>
+			</label>
+			</div>
+			<?php
+		}
+	}
+	add_settings_field( 
+		'layout', // Setting field ID
+		__( 'Layout', 'twentyeleven' ), // Setting field Title
+		'twentyeleven_add_settings_field_layout', // Setting field callback
+		'theme_options', // Settings page slug. Same as fourth argument in add_settings_section()
+		'general' // Settings section. Same as first argument in add_theme_page()
+	);
+}
+add_action( 'admin_init', 'twentyeleven_settings_fields' );
+
+/**
  * Returns the options array for Twenty Eleven.
  *
- * @since Twenty Eleven 1.0
+ * @since Twenty Eleven 1.2
  */
-function theme_options_render_page() {
+function twentyeleven_theme_options_render_page() {
 	?>
 	<div class="wrap">
 		<?php screen_icon(); ?>
@@ -216,71 +326,9 @@
 		<form method="post" action="options.php">
 			<?php
 				settings_fields( 'twentyeleven_options' );
-				$options = twentyeleven_get_theme_options();
-				$default_options = twentyeleven_get_default_theme_options();
+				do_settings_sections( 'theme_options' );
 			?>
 
-			<table class="form-table">
-
-				<tr valign="top" class="image-radio-option color-scheme"><th scope="row"><?php _e( 'Color Scheme', 'twentyeleven' ); ?></th>
-					<td>
-						<fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
-						<?php
-							foreach ( twentyeleven_color_schemes() as $scheme ) {
-								?>
-								<div class="layout">
-								<label class="description">
-									<input type="radio" name="twentyeleven_theme_options[color_scheme]" value="<?php echo esc_attr( $scheme['value'] ); ?>" <?php checked( $options['color_scheme'], $scheme['value'] ); ?> />
-									<input type="hidden" id="default-color-<?php echo esc_attr( $scheme['value'] ); ?>" value="<?php echo esc_attr( $scheme['default_link_color'] ); ?>" />
-									<span>
-										<img src="<?php echo esc_url( $scheme['thumbnail'] ); ?>" width="136" height="122" alt="" />
-										<?php echo $scheme['label']; ?>
-									</span>
-								</label>
-								</div>
-								<?php
-							}
-						?>
-						</fieldset>
-					</td>
-				</tr>
-
-				<tr valign="top"><th scope="row"><?php _e( 'Link Color', 'twentyeleven' ); ?></th>
-					<td>
-						<fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
-							<input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
-							<a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
-							<input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
-							<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
-							<br />
-							<span><?php printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-color">' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span>
-						</fieldset>
-					</td>
-				</tr>
-
-				<tr valign="top" class="image-radio-option theme-layout"><th scope="row"><?php _e( 'Default Layout', 'twentyeleven' ); ?></th>
-					<td>
-						<fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
-						<?php
-							foreach ( twentyeleven_layouts() as $layout ) {
-								?>
-								<div class="layout">
-								<label class="description">
-									<input type="radio" name="twentyeleven_theme_options[theme_layout]" value="<?php echo esc_attr( $layout['value'] ); ?>" <?php checked( $options['theme_layout'], $layout['value'] ); ?> />
-									<span>
-										<img src="<?php echo esc_url( $layout['thumbnail'] ); ?>" width="136" height="122" alt="" />
-										<?php echo $layout['label']; ?>
-									</span>
-								</label>
-								</div>
-								<?php
-							}
-						?>
-						</fieldset>
-					</td>
-				</tr>
-			</table>
-
 			<?php submit_button(); ?>
 		</form>
 	</div>