Ticket #18045: theme-options.php.diff

.

@@ -77 +77 @@
  */
 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 +202 @@
 }
 
 /**
+ * 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 +326 @@
                 <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>