WordPress.org

Make WordPress Core

Ticket #18045: theme-options.php.diff

File theme-options.php.diff, 8.8 KB (added by chipbennett, 7 years ago)

implements do_settings_sections(), add_settings_section(), and add_settings_field() to replace hard-coded, table-based settings page markup

  • .

     
    7777 */
    7878function twentyeleven_theme_options_add_page() {
    7979        $theme_page = add_theme_page(
    80                 __( 'Theme Options', 'twentyeleven' ), // Name of page
    81                 __( 'Theme Options', 'twentyeleven' ), // Label in menu
    82                 'edit_theme_options',                  // Capability required
    83                 'theme_options',                       // Menu slug, used to uniquely identify the page
    84                 'theme_options_render_page'            // Function that renders the options page
     80                __( 'Theme Options', 'twentyeleven' ),   // Name of page
     81                __( 'Theme Options', 'twentyeleven' ),   // Label in menu
     82                'edit_theme_options',                    // Capability required
     83                'theme_options',                         // Menu slug, used to uniquely identify the page
     84                'twentyeleven_theme_options_render_page' // Function that renders the options page
    8585        );
    8686
    8787        if ( ! $theme_page )
     
    202202}
    203203
    204204/**
     205 * Defines settings sections and fields
     206 *
     207 * @since TwentyEleven 1.2
     208 */
     209function twentyeleven_settings_fields() {
     210
     211        /**
     212        * Returns general settings page section
     213        *
     214        * @since Twenty Eleven 1.2
     215        */
     216        function twentyeleven_add_settings_section_general() {
     217                // silence is golden
     218        }
     219        add_settings_section(
     220                'general', // Section slug
     221                '', // Section title
     222                'twentyeleven_add_settings_section_general', // Section callback
     223                'theme_options' // Settings page slug. Same as fourth argument in add_theme_page()
     224        );
     225
     226        /**
     227        * Returns Color Scheme setting field
     228        *
     229        * @since Twenty Eleven 1.2
     230        */
     231        function twentyeleven_add_settings_field_color_scheme() {
     232                $options = twentyeleven_get_theme_options();
     233                $default_options = twentyeleven_get_default_theme_options();
     234                foreach ( twentyeleven_color_schemes() as $scheme ) {
     235                ?>
     236                <div class="layout image-radio-option color-scheme">
     237                <label class="description">
     238                        <input type="radio" name="twentyeleven_theme_options[color_scheme]" value="<?php echo esc_attr( $scheme['value'] ); ?>" <?php checked( $options['color_scheme'], $scheme['value'] ); ?> />
     239                        <input type="hidden" id="default-color-<?php echo esc_attr( $scheme['value'] ); ?>" value="<?php echo esc_attr( $scheme['default_link_color'] ); ?>" />
     240                        <span>
     241                                <img src="<?php echo esc_url( $scheme['thumbnail'] ); ?>" width="136" height="122" alt="" />
     242                                <?php echo $scheme['label']; ?>
     243                        </span>
     244                </label>
     245                </div>
     246                <?php
     247                }
     248        }
     249        add_settings_field(
     250                'color_scheme', // Setting field ID
     251                __( 'Color Scheme', 'twentyeleven' ), // Setting field title
     252                'twentyeleven_add_settings_field_color_scheme', // Setting field callback
     253                'theme_options', // Settings page slug. Same as fourth argument in add_settings_section()
     254                'general' // Settings section. Save as first argument in add_theme_page()
     255        );
     256
     257        /**
     258        * Returns Link Color setting field
     259        *
     260        * @since Twenty Eleven 1.2
     261        */
     262        function twentyeleven_add_settings_field_link_color() {
     263                $options = twentyeleven_get_theme_options();
     264                $default_options = twentyeleven_get_default_theme_options();
     265                ?>
     266                <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
     267                <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
     268                <input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
     269                <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
     270                <br />
     271                <span><?php printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-color">' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span>
     272                <?php
     273        }
     274        add_settings_field(
     275                'link_color', // Setting field ID
     276                __( 'Link Color', 'twentyeleven' ), // Setting field title
     277                'twentyeleven_add_settings_field_link_color', // Setting field callback
     278                'theme_options', // Settings page slug. Same as fourth argument in add_settings_section()
     279                'general' // Settings section. Same as first argument in add_theme_page()
     280        );
     281
     282        /**
     283        * Returns Layout setting field
     284        *
     285        * @since Twenty Eleven 1.2
     286        */
     287        function twentyeleven_add_settings_field_layout() {
     288                $options = twentyeleven_get_theme_options();
     289                $default_options = twentyeleven_get_default_theme_options();
     290                foreach ( twentyeleven_layouts() as $layout ) {
     291                        ?>
     292                        <div class="layout image-radio-option theme-layout">
     293                        <label class="description">
     294                                <input type="radio" name="twentyeleven_theme_options[theme_layout]" value="<?php echo esc_attr( $layout['value'] ); ?>" <?php checked( $options['theme_layout'], $layout['value'] ); ?> />
     295                                <span>
     296                                        <img src="<?php echo esc_url( $layout['thumbnail'] ); ?>" width="136" height="122" alt="" />
     297                                        <?php echo $layout['label']; ?>
     298                                </span>
     299                        </label>
     300                        </div>
     301                        <?php
     302                }
     303        }
     304        add_settings_field(
     305                'layout', // Setting field ID
     306                __( 'Layout', 'twentyeleven' ), // Setting field Title
     307                'twentyeleven_add_settings_field_layout', // Setting field callback
     308                'theme_options', // Settings page slug. Same as fourth argument in add_settings_section()
     309                'general' // Settings section. Same as first argument in add_theme_page()
     310        );
     311}
     312add_action( 'admin_init', 'twentyeleven_settings_fields' );
     313
     314/**
    205315 * Returns the options array for Twenty Eleven.
    206316 *
    207  * @since Twenty Eleven 1.0
     317 * @since Twenty Eleven 1.2
    208318 */
    209 function theme_options_render_page() {
     319function twentyeleven_theme_options_render_page() {
    210320        ?>
    211321        <div class="wrap">
    212322                <?php screen_icon(); ?>
     
    216326                <form method="post" action="options.php">
    217327                        <?php
    218328                                settings_fields( 'twentyeleven_options' );
    219                                 $options = twentyeleven_get_theme_options();
    220                                 $default_options = twentyeleven_get_default_theme_options();
     329                                do_settings_sections( 'theme_options' );
    221330                        ?>
    222331
    223                         <table class="form-table">
    224 
    225                                 <tr valign="top" class="image-radio-option color-scheme"><th scope="row"><?php _e( 'Color Scheme', 'twentyeleven' ); ?></th>
    226                                         <td>
    227                                                 <fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
    228                                                 <?php
    229                                                         foreach ( twentyeleven_color_schemes() as $scheme ) {
    230                                                                 ?>
    231                                                                 <div class="layout">
    232                                                                 <label class="description">
    233                                                                         <input type="radio" name="twentyeleven_theme_options[color_scheme]" value="<?php echo esc_attr( $scheme['value'] ); ?>" <?php checked( $options['color_scheme'], $scheme['value'] ); ?> />
    234                                                                         <input type="hidden" id="default-color-<?php echo esc_attr( $scheme['value'] ); ?>" value="<?php echo esc_attr( $scheme['default_link_color'] ); ?>" />
    235                                                                         <span>
    236                                                                                 <img src="<?php echo esc_url( $scheme['thumbnail'] ); ?>" width="136" height="122" alt="" />
    237                                                                                 <?php echo $scheme['label']; ?>
    238                                                                         </span>
    239                                                                 </label>
    240                                                                 </div>
    241                                                                 <?php
    242                                                         }
    243                                                 ?>
    244                                                 </fieldset>
    245                                         </td>
    246                                 </tr>
    247 
    248                                 <tr valign="top"><th scope="row"><?php _e( 'Link Color', 'twentyeleven' ); ?></th>
    249                                         <td>
    250                                                 <fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
    251                                                         <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
    252                                                         <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
    253                                                         <input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
    254                                                         <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    255                                                         <br />
    256                                                         <span><?php printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-color">' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span>
    257                                                 </fieldset>
    258                                         </td>
    259                                 </tr>
    260 
    261                                 <tr valign="top" class="image-radio-option theme-layout"><th scope="row"><?php _e( 'Default Layout', 'twentyeleven' ); ?></th>
    262                                         <td>
    263                                                 <fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
    264                                                 <?php
    265                                                         foreach ( twentyeleven_layouts() as $layout ) {
    266                                                                 ?>
    267                                                                 <div class="layout">
    268                                                                 <label class="description">
    269                                                                         <input type="radio" name="twentyeleven_theme_options[theme_layout]" value="<?php echo esc_attr( $layout['value'] ); ?>" <?php checked( $options['theme_layout'], $layout['value'] ); ?> />
    270                                                                         <span>
    271                                                                                 <img src="<?php echo esc_url( $layout['thumbnail'] ); ?>" width="136" height="122" alt="" />
    272                                                                                 <?php echo $layout['label']; ?>
    273                                                                         </span>
    274                                                                 </label>
    275                                                                 </div>
    276                                                                 <?php
    277                                                         }
    278                                                 ?>
    279                                                 </fieldset>
    280                                         </td>
    281                                 </tr>
    282                         </table>
    283 
    284332                        <?php submit_button(); ?>
    285333                </form>
    286334        </div>