WordPress.org
Get WordPress

Make WordPress Core

Changeset 17733


Ignore:
Timestamp:
04/28/2011 08:06:57 AM (15 years ago)
Author:
nacin
Message:

Rewrite of Twenty Eleven theme-options.php. Including:

  • Full inline documentation.
  • Enqueue scripts/styles on admin_enqueue_scripts and use hook_suffix rather than GET[page]
  • Add filters to twentyeleven_color_schemes(), twentyeleven_layouts(), which necessitates adding a thumbnail URL value here, rather than generating them in the form.
  • Add a twentyeleven_default_theme_options filter.
  • Remove manual check for REQUEST[settings-updated], instead using settings_errors(), since we're using options.php.
  • Abstract out the default link color, rather than hardcoding it in certain places.
  • Use checked().
  • Rename some variables and functions for clarity.
  • Remove unnecessary functions twentyeleven_current_layout() and twentyeleven_current_color_scheme(), as we already have twentyeleven_get_theme_options().
  • Add a twentyeleven_color_schemes action to allow for enqueueing custom color schemes.
  • Add a twentyeleven_layout_classes filter, to allow filtering what gets sent back to body_class().
  • Hook into wp_enqueue_scripts rather than wp_print_styles for enqueueing the color stylesheet.
  • Rewrite the register_setting() callback to start from scratch with an empty array. Improve the link_color logic.
  • Use submit_button().
  • Use esc_attr() rather than esc_attr_e() for non-translations.

TODO:

  • Implement settings sections/fields logic to allow extension of the options page.
  • Consider re-doing this in a class. It'll be cleaner.
  • Store a DB version so we can do an add_option(), rather than calling get_option() with defaults.

see #17198.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-content/themes/twentyeleven/inc/theme-options/theme-options.php

    r17732 r17733  
    55 * @package WordPress
    66 * @subpackage Twenty Eleven
    7  */
    8 
    9 add_action( 'admin_init', 'theme_options_init' );
    10 add_action( 'admin_menu', 'theme_options_add_page' );
    11 
    12 /**
    13  * Add theme options page styles and scripts
    14  */
    15 wp_register_style( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options/theme-options.css', '', '0.1' );
    16 wp_register_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options/theme-options.js' );
    17 if ( isset( $_GET['page'] ) && $_GET['page'] == 'theme_options' ) {
    18     wp_enqueue_style( 'twentyeleven-theme-options' );
    19     wp_enqueue_script( 'twentyeleven-theme-options' );
     7 * @since Twenty Eleven 1.0
     8 */
     9
     10/**
     11 * Properly enqueue styles and scripts for our theme options page.
     12 *
     13 * This function is attached to the admin_enqueue_scripts action hook.
     14 *
     15 * @since Twenty Eleven 1.0
     16 *
     17 * @param string $hook_suffix The action passes the current page to the function. We don't
     18 *  do anything if we're not on our theme options page.
     19 */
     20function twentyeleven_admin_enqueue_scripts( $hook_suffix ) {
     21    if ( $hook_suffix != 'appearance_page_theme_options' )
     22        return;
     23
     24    wp_enqueue_style(  'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options/theme-options.css', '', '0.1' );
     25    wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options/theme-options.js' );
     26    wp_enqueue_style( 'farbtastic' );
    2027    wp_enqueue_script( 'farbtastic' );
    21     wp_enqueue_style( 'farbtastic' );
    22 }
    23 
    24 /**
    25  * Init plugin options to white list our options
    26  */
    27 function theme_options_init(){
     28}
     29add_action( 'admin_enqueue_scripts', 'twentyeleven_admin_enqueue_scripts' );
     30
     31/**
     32 * Register the form setting for our twentyeleven_options array.
     33 *
     34 * This function is attached to the admin_init action hook.
     35 *
     36 * This call to register_setting() registers a validation callback, twentyeleven_theme_options_validate(),
     37 * which is used when the option is saved, to ensure that our option values are complete, properly
     38 * formatted, and safe.
     39 *
     40 * @since Twenty Eleven 1.0
     41 */
     42function twentyeleven_theme_options_init() {
    2843    register_setting( 'twentyeleven_options', 'twentyeleven_theme_options', 'twentyeleven_theme_options_validate' );
    2944}
    30 
    31 /**
    32  * Load up the menu page
    33  */
    34 function theme_options_add_page() {
    35     add_theme_page( __( 'Theme Options', 'twentyeleven' ), __( 'Theme Options', 'twentyeleven' ), 'edit_theme_options', 'theme_options', 'theme_options_do_page' );
    36 }
    37 
    38 /**
    39  * Return array for our color schemes
     45add_action( 'admin_init', 'twentyeleven_theme_options_init' );
     46
     47/**
     48 * Add our theme options page to the admin menu.
     49 *
     50 * This function is attached to the admin_menu action hook.
     51 *
     52 * @since Twenty Eleven 1.0
     53 */
     54function twentyeleven_theme_options_add_page() {
     55    add_theme_page(
     56        __( 'Theme Options', 'twentyeleven' ), // Name of page
     57        __( 'Theme Options', 'twentyeleven' ), // Label in menu
     58        'edit_theme_options',                  // Capability required
     59        'theme_options',                       // Menu slug, used to uniquely identify the page
     60        'theme_options_render_page'            // Function that renders the options page
     61    );
     62}
     63add_action( 'admin_menu', 'twentyeleven_theme_options_add_page' );
     64
     65/**
     66 * Returns an array of color schemes registered for Twenty Eleven.
     67 *
     68 * @since Twenty Eleven 1.0
    4069 */
    4170function twentyeleven_color_schemes() {
    … …  
    4372        'light' => array(
    4473            'value' => 'light',
    45             'label' => __( 'Light', 'twentyeleven' )
     74            'label' => __( 'Light', 'twentyeleven' ),
     75            'thumbnail' => get_template_directory_uri() . '/inc/theme-options/images/light.png',
    4676        ),
    4777        'dark' => array(
    4878            'value' => 'dark',
    49             'label' => __( 'Dark', 'twentyeleven' )
     79            'label' => __( 'Dark', 'twentyeleven' ),
     80            'thumbnail' => get_template_directory_uri() . '/inc/theme-options/images/dark.png',
    5081        ),
    5182    );
    5283
    53     return $color_scheme_options;
    54 }
    55 
    56 /**
    57  * Return array for our layout options
     84    return apply_filters( 'twentyeleven_color_schemes', $color_scheme_options );
     85}
     86
     87/**
     88 * Returns an array of layout options registered for Twenty Eleven.
     89 *
     90 * @since Twenty Eleven 1.0
    5891 */
    5992function twentyeleven_layouts() {
    … …  
    6295            'value' => 'content-sidebar',
    6396            'label' => __( 'Content on left', 'twentyeleven' ),
     97            'thumbnail' => get_template_directory_uri() . '/inc/theme-options/images/content-sidebar.png',
    6498        ),
    6599        'sidebar-content' => array(
    66100            'value' => 'sidebar-content',
    67             'label' => __( 'Content on right', 'twentyeleven' )
     101            'label' => __( 'Content on right', 'twentyeleven' ),
     102            'thumbnail' => get_template_directory_uri() . '/inc/theme-options/images/sidebar-content.png',
    68103        ),
    69104        'content' => array(
    70105            'value' => 'content',
    71             'label' => __( 'One-column, no Sidebar', 'twentyeleven' )
     106            'label' => __( 'One-column, no Sidebar', 'twentyeleven' ),
     107            'thumbnail' => get_template_directory_uri() . '/inc/theme-options/images/content.png',
    72108        ),
    73109    );
    74110
    75     return $layout_options;
    76 }
    77 
    78 /**
    79  *  Return the default Twenty Eleven theme option values
     111    return apply_filters( 'twentyeleven_layouts', $layout_options );
     112}
     113
     114/**
     115 * Returns the default options for Twenty Eleven.
     116 *
     117 * @since Twenty Eleven 1.0
    80118 */
    81119function twentyeleven_get_default_theme_options() {
    82     return array(
     120    $default_theme_options = array(
    83121        'color_scheme' => 'light',
    84122        'link_color' => '#1b8be0',
    85123        'theme_layout' => 'content-sidebar',
    86124    );
    87 }
    88 
    89 /**
    90  *  Return the current Twenty Eleven theme options, with default values as fallback
     125
     126    return apply_filters( 'twentyeleven_default_theme_options', $default_theme_options );
     127}
     128
     129/**
     130 * Returns the options array for Twenty Eleven.
     131 *
     132 * @since Twenty Eleven 1.0
    91133 */
    92134function twentyeleven_get_theme_options() {
    … …  
    98140
    99141/**
    100  * Create the options page
    101  */
    102 function theme_options_do_page() {
    103     if ( ! isset( $_REQUEST['settings-updated'] ) )
    104         $_REQUEST['settings-updated'] = false;
    105 
     142 * Returns the options array for Twenty Eleven.
     143 *
     144 * @since Twenty Eleven 1.0
     145 */
     146function theme_options_render_page() {
    106147    ?>
    107148    <div class="wrap">
    108         <?php screen_icon(); echo "<h2>" . get_current_theme() . __( ' Theme Options', 'twentyeleven' ) . "</h2>"; ?>
    109 
    110         <?php if ( false !== $_REQUEST['settings-updated'] ) : ?>
    111         <div class="updated fade"><p><strong><?php _e( 'Options saved', 'twentyeleven' ); ?></strong></p></div>
    112         <?php endif; ?>
     149        <?php screen_icon(); ?>
     150        <h2><?php printf( __( '%s Theme Options', 'twentyeleven' ), get_current_theme() ); ?></h2>
     151        <?php settings_errors(); ?>
    113152
    114153        <form method="post" action="options.php">
    115             <?php settings_fields( 'twentyeleven_options' ); ?>
    116             <?php $options = twentyeleven_get_theme_options(); ?>
     154            <?php
     155                settings_fields( 'twentyeleven_options' );
     156                $options = twentyeleven_get_theme_options();
     157                $default_options = twentyeleven_get_default_theme_options();
     158            ?>
    117159
    118160            <table class="form-table">
    119161
    120                 <?php
    121                 /**
    122                  * Color Scheme Options
    123                  */
    124                 ?>
    125162                <tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Color Scheme', 'twentyeleven' ); ?></th>
    126163                    <td>
    127164                        <fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
    128165                        <?php
    129                             if ( ! isset( $checked ) )
    130                                 $checked = '';
    131                             foreach ( twentyeleven_color_schemes() as $option ) {
    132                                 $radio_setting = $options['color_scheme'];
    133 
    134                                 if ( '' != $radio_setting ) {
    135                                     if ( $options['color_scheme'] == $option['value'] ) {
    136                                         $checked = "checked=\"checked\"";
    137                                     } else {
    138                                         $checked = '';
    139                                     }
    140                                 }
     166                            foreach ( twentyeleven_color_schemes() as $color ) {
    141167                                ?>
    142168                                <div class="layout">
    143169                                <label class="description">
    144                                     <input type="radio" name="twentyeleven_theme_options[color_scheme]" value="<?php esc_attr_e( $option['value'] ); ?>" <?php echo $checked; ?> />
     170                                    <input type="radio" name="twentyeleven_theme_options[color_scheme]" value="<?php echo esc_attr( $color['value'] ); ?>" <?php checked( $options['color_scheme'], $color['value'] ); ?> />
    145171                                    <span>
    146                                         <img src="<?php echo get_template_directory_uri(); ?>/inc/theme-options/images/<?php echo $option['value']; ?>.png"/>
    147                                         <?php echo $option['label']; ?>
     172                                        <img src="<?php echo esc_url( $color['thumbnail'] ); ?>"/>
     173                                        <?php echo $color['label']; ?>
    148174                                    </span>
    149175                                </label>
    … …  
    156182                </tr>
    157183
    158                 <?php
    159                 /**
    160                  * Link Color Options
    161                  */
    162                 ?>
    163184                <tr valign="top"><th scope="row"><?php _e( 'Link Color', 'twentyeleven' ); ?></th>
    164185                    <td>
    165186                        <fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
    166                             <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php esc_attr_e( $options['link_color'] ); ?>" />
     187                            <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
    167188                            <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e( 'Select a Color', 'twentyeleven' ); ?></a>
    168189                            <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    169190                            <br />
    170                             <small class="description"><?php printf( __( 'Default color: %s', 'twentyeleven' ), '#1b8be0' ); ?></small>
     191                            <small class="description"><?php printf( __( 'Default color: %s', 'twentyeleven' ), $default_options['link_color'] ); ?></small>
    171192                        </fieldset>
    172193                    </td>
    173194                </tr>
    174195
    175                 <?php
    176                 /**
    177                  * Layout Options
    178                  */
    179                 ?>
    180196                <tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Layout', 'twentyeleven' ); ?></th>
    181197                    <td>
    182198                        <fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
    183199                        <?php
    184                             if ( ! isset( $checked ) )
    185                                 $checked = '';
    186                             foreach ( twentyeleven_layouts() as $option ) {
    187                                 $radio_setting = $options['theme_layout'];
    188 
    189                                 if ( '' != $radio_setting ) {
    190                                     if ( $options['theme_layout'] == $option['value'] ) {
    191                                         $checked = "checked=\"checked\"";
    192                                     } else {
    193                                         $checked = '';
    194                                     }
    195                                 }
     200                            foreach ( twentyeleven_layouts() as $layout ) {
    196201                                ?>
    197202                                <div class="layout">
    198203                                <label class="description">
    199                                     <input type="radio" name="twentyeleven_theme_options[theme_layout]" value="<?php esc_attr_e( $option['value'] ); ?>" <?php echo $checked; ?> />
     204                                    <input type="radio" name="twentyeleven_theme_options[theme_layout]" value="<?php echo esc_attr( $layout['value'] ); ?>" <?php checked( $options['theme_layout'], $layout['value'] ); ?> />
    200205                                    <span>
    201                                         <img src="<?php echo get_template_directory_uri(); ?>/inc/theme-options/images/<?php echo $option['value']; ?>.png"/>
    202                                         <?php echo $option['label']; ?>
     206                                        <img src="<?php echo esc_url( $layout['thumbnail'] ); ?>"/>
     207                                        <?php echo $layout['label']; ?>
    203208                                    </span>
    204209                                </label>
    … …  
    212217            </table>
    213218
    214             <p class="submit">
    215                 <input type="submit" class="button-primary" value="<?php esc_attr_e( 'Save Options', 'twentyeleven' ); ?>" />
    216             </p>
     219            <?php submit_button(); ?>
    217220        </form>
    218221    </div>
    … …  
    221224
    222225/**
    223  * Sanitize and validate input. Accepts an array, return a sanitized array.
    224  *
    225  * todo set up Reset Options action
     226 * Sanitize and validate form input. Accepts an array, return a sanitized array.
     227 *
     228 * @see twentyeleven_theme_options_init()
     229 * @todo set up Reset Options action
     230 *
     231 * @since Twenty Ten 1.0
    226232 */
    227233function twentyeleven_theme_options_validate( $input ) {
    228     $defaults = twentyeleven_get_default_theme_options();
     234    $output = twentyeleven_get_default_theme_options();
    229235
    230236    // Color scheme must be in our array of color scheme options
    231     if ( ! isset( $input['color_scheme'] ) || ! array_key_exists( $input['color_scheme'], twentyeleven_color_schemes() ) )
    232         $input['color_scheme'] = $defaults['color_scheme'];
     237    if ( isset( $input['color_scheme'] ) && array_key_exists( $input['color_scheme'], twentyeleven_color_schemes() ) )
     238        $output['color_scheme'] = $input['color_scheme'];
    233239
    234240    // Link color must be 3 or 6 hexadecimal characters
    235     if ( ! isset( $input[ 'link_color' ] ) ) {
    236         $input['link_color'] = $defaults['link_color'];
    237     } else {
    238         if ( preg_match( '/^#?([a-f0-9]{3}){1,2}$/i', $input['link_color'] ) ) {
    239             $link_color = $input['link_color'];
    240             // If color value doesn't have a preceding hash, add it
    241             if ( false === strpos( $link_color, '#' ) )
    242                 $link_color = '#' . $link_color;
    243         } else {
    244             $input['link_color'] = $defaults['link_color'];
     241    if ( isset( $input['link_color'] ) && preg_match( '/^#?([a-f0-9]{3}){1,2}$/i', $input['link_color'] ) )
     242            $output['link_color'] = '#' . strtolower( ltrim( $input['link_color'], '#' ) );
     243
     244    // Theme layout must be in our array of theme layout options
     245    if ( isset( $input['theme_layout'] ) && array_key_exists( $input['theme_layout'], twentyeleven_layouts() ) )
     246        $output['theme_layout'] = $input['theme_layout'];
     247
     248    return $output;
     249}
     250
     251/**
     252 * Register our color schemes and add them to the queue
     253 */
     254function twentyeleven_color_styles() {
     255    $options = twentyeleven_get_theme_options();
     256    $color_scheme = $options['color_scheme'];
     257
     258    if ( 'dark' == $color_scheme )
     259        wp_enqueue_style( 'dark', get_template_directory_uri() . '/colors/dark.css', null, null );
     260
     261    do_action( 'twentyeleven_color_schemes', $color_scheme );
     262}
     263add_action( 'wp_enqueue_scripts', 'twentyeleven_color_styles' );
     264
     265/**
     266 * Add a style block to the theme for the current link color.
     267 *
     268 * This function is attached to the wp_head action hook.
     269 *
     270 * @since Twenty Eleven 1.0
     271 */
     272function twentyeleven_link_color() {
     273    $options = twentyeleven_get_theme_options();
     274    $link_color = $options['link_color'];
     275
     276    $default_options = twentyeleven_get_default_theme_options();
     277   
     278    // Don't do anything if the current link color is the default.
     279    if ( $default_options['link_color'] == $link_color )
     280        return;
     281?>
     282    <style>
     283        /* Link color */
     284        a,
     285        .entry-title a:hover {
     286            color: <?php echo $link_color; ?>;
    245287        }
    246     }
    247 
    248     // Theme layout must be in our array of theme layout options
    249     if ( ! isset( $input['theme_layout'] ) || ! array_key_exists( $input['theme_layout'], twentyeleven_layouts() ) )
    250         $input['theme_layout'] = $defaults['theme_layout'];
    251 
    252     return $input;
    253 }
    254 
    255 /**
    256  *  Returns the current Twenty Eleven color scheme as selected in the theme options
    257  *
    258  * @since Twenty Eleven 1.0
    259  */
    260 function twentyeleven_current_color_scheme() {
    261     $options = twentyeleven_get_theme_options();
    262     return $options['color_scheme'];
    263 }
    264 
    265 /**
    266  * Register our color schemes and add them to the queue
    267  */
    268 function twentyeleven_color_registrar() {
    269     $color_scheme = twentyeleven_current_color_scheme();
    270 
    271     if ( 'dark' == $color_scheme ) {
    272         wp_register_style( 'dark', get_template_directory_uri() . '/colors/dark.css', null, null );
    273         wp_enqueue_style( 'dark' );
    274     }
    275 }
    276 if ( ! is_admin() )
    277     add_action( 'wp_print_styles', 'twentyeleven_color_registrar' );
    278 
    279 /**
    280  *  Returns the current Twenty Eleven layout as selected in the theme options
    281  *
    282  * @since Twenty Eleven 1.0
    283  */
    284 function twentyeleven_current_layout() {
     288    </style>
     289<?php
     290}
     291add_action( 'wp_head', 'twentyeleven_link_color' );
     292
     293/**
     294 *  Adds Twenty Ten layout classes to the array of body classes
     295 *
     296 * @since Twenty Eleven 1.0
     297 */
     298function twentyeleven_layout_classes( $classes ) {
    285299    $options = twentyeleven_get_theme_options();
    286300    $current_layout = $options['theme_layout'];
    287301
    288     $two_columns = array( 'content-sidebar', 'sidebar-content' );
    289 
    290     if ( in_array( $current_layout, $two_columns ) )
    291         return 'two-column ' . $current_layout;
     302    $twentyeleven_classes = array();
     303
     304    $two_column_layouts = array( 'content-sidebar', 'sidebar-content' );
     305
     306    if ( in_array( $current_layout, $two_column_layouts ) )
     307        $twentyeleven_classes[] = 'two-column';
    292308    else
    293         return 'one-column ' . $current_layout;
    294 }
    295 
    296 /**
    297  * Add an internal style block for the link color to wp_head()
    298  */
    299 function twentyeleven_link_color() {
    300     $options = twentyeleven_get_theme_options();
    301     $current_link_color = $options['link_color'];
    302 
    303     // Is the link color just the default color?
    304     if ( '#1b8be0' == $current_link_color ) :
    305         return; // we don't need to do anything then
    306     else :
    307         ?>
    308             <style>
    309                 /* Link color */
    310                 a,
    311                 .entry-title a:hover {
    312                     color: <?php echo $current_link_color; ?>;
    313                 }
    314             </style>
    315         <?php
    316     endif;
    317 }
    318 add_action( 'wp_head', 'twentyeleven_link_color' );
    319 
    320 /**
    321  *  Adds twentyeleven_current_layout() to the array of body classes
    322  *
    323  * @since Twenty Eleven 1.0
    324  */
    325 function twentyeleven_layout_class( $classes ) {
    326     $classes[] = twentyeleven_current_layout();
    327 
    328     return $classes;
    329 }
    330 add_filter( 'body_class', 'twentyeleven_layout_class' );
     309        $twentyeleven_classes[] = 'one-column';
     310
     311    $twentyeleven_classes[] = $current_layout;
     312
     313    $twentyeleven_classes = apply_filters( 'twentyeleven_layout_classes', $twentyeleven_classes, $current_layout );
     314
     315    return array_merge( $classes, $twentyeleven_classes );
     316}
     317add_filter( 'body_class', 'twentyeleven_layout_classes' );
Note: See TracChangeset for help on using the changeset viewer.