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.