WordPress.org

Make WordPress Core

Ticket #18045: theme-options.php.diff

File theme-options.php.diff, 8.8 KB (added by chipbennett, 3 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>