[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Twenty Eleven Theme Options
   4   *
   5   * @package WordPress
   6   * @subpackage Twenty_Eleven
   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 An admin page's hook suffix.
  18   */
  19  function twentyeleven_admin_enqueue_scripts( $hook_suffix ) {
  20      wp_enqueue_style( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', false, '20110602' );
  21      wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'farbtastic' ), '20110610' );
  22      wp_enqueue_style( 'farbtastic' );
  23  }
  24  add_action( 'admin_print_styles-appearance_page_theme_options', 'twentyeleven_admin_enqueue_scripts' );
  25  
  26  /**
  27   * Register the form setting for our twentyeleven_options array.
  28   *
  29   * This function is attached to the admin_init action hook.
  30   *
  31   * This call to register_setting() registers a validation callback, twentyeleven_theme_options_validate(),
  32   * which is used when the option is saved, to ensure that our option values are complete, properly
  33   * formatted, and safe.
  34   *
  35   * @since Twenty Eleven 1.0
  36   */
  37  function twentyeleven_theme_options_init() {
  38  
  39      register_setting(
  40          'twentyeleven_options',               // Options group, see settings_fields() call in twentyeleven_theme_options_render_page().
  41          'twentyeleven_theme_options',         // Database option, see twentyeleven_get_theme_options().
  42          'twentyeleven_theme_options_validate' // The sanitization callback, see twentyeleven_theme_options_validate().
  43      );
  44  
  45      // Register our settings field group.
  46      add_settings_section(
  47          'general',        // Unique identifier for the settings section.
  48          '',               // Section title (we don't want one).
  49          '__return_false', // Section callback (we don't want anything).
  50          'theme_options'   // Menu slug, used to uniquely identify the page; see twentyeleven_theme_options_add_page().
  51      );
  52  
  53      // Register our individual settings fields.
  54      add_settings_field(
  55          'color_scheme',                             // Unique identifier for the field for this section.
  56          __( 'Color Scheme', 'twentyeleven' ),       // Setting field label.
  57          'twentyeleven_settings_field_color_scheme', // Function that renders the settings field.
  58          'theme_options',                            // Menu slug, used to uniquely identify the page; see twentyeleven_theme_options_add_page().
  59          'general'                                   // Settings section. Same as the first argument in the add_settings_section() above.
  60      );
  61  
  62      add_settings_field( 'link_color', __( 'Link Color', 'twentyeleven' ), 'twentyeleven_settings_field_link_color', 'theme_options', 'general' );
  63      add_settings_field( 'layout', __( 'Default Layout', 'twentyeleven' ), 'twentyeleven_settings_field_layout', 'theme_options', 'general' );
  64  }
  65  add_action( 'admin_init', 'twentyeleven_theme_options_init' );
  66  
  67  /**
  68   * Change the capability required to save the 'twentyeleven_options' options group.
  69   *
  70   * @see twentyeleven_theme_options_init()     First parameter to register_setting() is the name of the options group.
  71   * @see twentyeleven_theme_options_add_page() The edit_theme_options capability is used for viewing the page.
  72   *
  73   * By default, the options groups for all registered settings require the manage_options capability.
  74   * This filter is required to change our theme options page to edit_theme_options instead.
  75   * By default, only administrators have either of these capabilities, but the desire here is
  76   * to allow for finer-grained control for roles and users.
  77   *
  78   * @param string $capability The capability used for the page, which is manage_options by default.
  79   * @return string The capability to actually use.
  80   */
  81  function twentyeleven_option_page_capability( $capability ) {
  82      return 'edit_theme_options';
  83  }
  84  add_filter( 'option_page_capability_twentyeleven_options', 'twentyeleven_option_page_capability' );
  85  
  86  /**
  87   * Add a theme options page to the admin menu, including some help documentation.
  88   *
  89   * This function is attached to the admin_menu action hook.
  90   *
  91   * @since Twenty Eleven 1.0
  92   */
  93  function twentyeleven_theme_options_add_page() {
  94      $theme_page = add_theme_page(
  95          __( 'Theme Options', 'twentyeleven' ),   // Name of page.
  96          __( 'Theme Options', 'twentyeleven' ),   // Label in menu.
  97          'edit_theme_options',                    // Capability required.
  98          'theme_options',                         // Menu slug, used to uniquely identify the page.
  99          'twentyeleven_theme_options_render_page' // Function that renders the options page.
 100      );
 101  
 102      if ( ! $theme_page ) {
 103          return;
 104      }
 105  
 106      add_action( "load-{$theme_page}", 'twentyeleven_theme_options_help' );
 107  }
 108  add_action( 'admin_menu', 'twentyeleven_theme_options_add_page' );
 109  
 110  function twentyeleven_theme_options_help() {
 111  
 112      $help = '<p>' . __( 'Some themes provide customization options that are grouped together on a Theme Options screen. If you change themes, options may change or disappear, as they are theme-specific. Your current theme, Twenty Eleven, provides the following Theme Options:', 'twentyeleven' ) . '</p>' .
 113              '<ol>' .
 114                  '<li>' . __( '<strong>Color Scheme</strong>: You can choose a color palette of "Light" (light background with dark text) or "Dark" (dark background with light text) for your site.', 'twentyeleven' ) . '</li>' .
 115                  '<li>' . __( '<strong>Link Color</strong>: You can choose the color used for text links on your site. You can enter the HTML color or hex code, or you can choose visually by clicking the "Select a Color" button to pick from a color wheel.', 'twentyeleven' ) . '</li>' .
 116                  '<li>' . __( '<strong>Default Layout</strong>: You can choose if you want your site&#8217;s default layout to have a sidebar on the left, the right, or not at all.', 'twentyeleven' ) . '</li>' .
 117              '</ol>' .
 118              '<p>' . __( 'Remember to click "Save Changes" to save any changes you have made to the theme options.', 'twentyeleven' ) . '</p>';
 119  
 120      $sidebar = '<p><strong>' . __( 'For more information:', 'twentyeleven' ) . '</strong></p>' .
 121          '<p>' . __( '<a href="https://wordpress.org/documentation/article/customizer/" target="_blank">Documentation on Theme Customization</a>', 'twentyeleven' ) . '</p>' .
 122          '<p>' . __( '<a href="https://wordpress.org/support/forums/" target="_blank">Support forums</a>', 'twentyeleven' ) . '</p>';
 123  
 124      $screen = get_current_screen();
 125  
 126      if ( method_exists( $screen, 'add_help_tab' ) ) {
 127          // WordPress 3.3.0.
 128          $screen->add_help_tab(
 129              array(
 130                  'title'   => __( 'Overview', 'twentyeleven' ),
 131                  'id'      => 'theme-options-help',
 132                  'content' => $help,
 133              )
 134          );
 135  
 136          $screen->set_help_sidebar( $sidebar );
 137      } else {
 138          // WordPress 3.2.0.
 139          add_contextual_help( $screen, $help . $sidebar );
 140      }
 141  }
 142  
 143  /**
 144   * Return an array of color schemes registered for Twenty Eleven.
 145   *
 146   * @since Twenty Eleven 1.0
 147   */
 148  function twentyeleven_color_schemes() {
 149      $color_scheme_options = array(
 150          'light' => array(
 151              'value'              => 'light',
 152              'label'              => __( 'Light', 'twentyeleven' ),
 153              'thumbnail'          => get_template_directory_uri() . '/inc/images/light.png',
 154              'default_link_color' => '#1b8be0',
 155          ),
 156          'dark'  => array(
 157              'value'              => 'dark',
 158              'label'              => __( 'Dark', 'twentyeleven' ),
 159              'thumbnail'          => get_template_directory_uri() . '/inc/images/dark.png',
 160              'default_link_color' => '#e4741f',
 161          ),
 162      );
 163  
 164      /**
 165       * Filters the Twenty Eleven color scheme options.
 166       *
 167       * @since Twenty Eleven 1.0
 168       *
 169       * @param array $color_scheme_options An associative array of color scheme options.
 170       */
 171      return apply_filters( 'twentyeleven_color_schemes', $color_scheme_options );
 172  }
 173  
 174  /**
 175   * Return an array of layout options registered for Twenty Eleven.
 176   *
 177   * @since Twenty Eleven 1.0
 178   */
 179  function twentyeleven_layouts() {
 180      $layout_options = array(
 181          'content-sidebar' => array(
 182              'value'     => 'content-sidebar',
 183              'label'     => __( 'Content on left', 'twentyeleven' ),
 184              'thumbnail' => get_template_directory_uri() . '/inc/images/content-sidebar.png',
 185          ),
 186          'sidebar-content' => array(
 187              'value'     => 'sidebar-content',
 188              'label'     => __( 'Content on right', 'twentyeleven' ),
 189              'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-content.png',
 190          ),
 191          'content'         => array(
 192              'value'     => 'content',
 193              'label'     => __( 'One-column, no sidebar', 'twentyeleven' ),
 194              'thumbnail' => get_template_directory_uri() . '/inc/images/content.png',
 195          ),
 196      );
 197  
 198      /**
 199       * Filters the Twenty Eleven layout options.
 200       *
 201       * @since Twenty Eleven 1.0
 202       *
 203       * @param array $layout_options An associative array of layout options.
 204       */
 205      return apply_filters( 'twentyeleven_layouts', $layout_options );
 206  }
 207  
 208  /**
 209   * Return the default options for Twenty Eleven.
 210   *
 211   * @since Twenty Eleven 1.0
 212   *
 213   * @return array An array of default theme options.
 214   */
 215  function twentyeleven_get_default_theme_options() {
 216      $default_theme_options = array(
 217          'color_scheme' => 'light',
 218          'link_color'   => twentyeleven_get_default_link_color( 'light' ),
 219          'theme_layout' => 'content-sidebar',
 220      );
 221  
 222      if ( is_rtl() ) {
 223          $default_theme_options['theme_layout'] = 'sidebar-content';
 224      }
 225  
 226      /**
 227       * Filters the Twenty Eleven default options.
 228       *
 229       * @since Twenty Eleven 1.0
 230       *
 231       * @param array $default_theme_options An array of default theme options.
 232       */
 233      return apply_filters( 'twentyeleven_default_theme_options', $default_theme_options );
 234  }
 235  
 236  /**
 237   * Return the default link color for Twenty Eleven, based on color scheme.
 238   *
 239   * @since Twenty Eleven 1.0
 240   *
 241   * @param string $color_scheme Optional. Color scheme.
 242   *                             Default null (or the active color scheme).
 243   * @return string The default link color.
 244   */
 245  function twentyeleven_get_default_link_color( $color_scheme = null ) {
 246      if ( null === $color_scheme ) {
 247          $options      = twentyeleven_get_theme_options();
 248          $color_scheme = $options['color_scheme'];
 249      }
 250  
 251      $color_schemes = twentyeleven_color_schemes();
 252      if ( ! isset( $color_schemes[ $color_scheme ] ) ) {
 253          return false;
 254      }
 255  
 256      return $color_schemes[ $color_scheme ]['default_link_color'];
 257  }
 258  
 259  /**
 260   * Return the options array for Twenty Eleven.
 261   *
 262   * @since Twenty Eleven 1.0
 263   */
 264  function twentyeleven_get_theme_options() {
 265      return get_option( 'twentyeleven_theme_options', twentyeleven_get_default_theme_options() );
 266  }
 267  
 268  /**
 269   * Render the Color Scheme setting field.
 270   *
 271   * @since Twenty Eleven 1.3
 272   */
 273  function twentyeleven_settings_field_color_scheme() {
 274      $options = twentyeleven_get_theme_options();
 275  
 276      foreach ( twentyeleven_color_schemes() as $scheme ) {
 277          ?>
 278      <div class="layout image-radio-option color-scheme">
 279      <label class="description">
 280          <input type="radio" name="twentyeleven_theme_options[color_scheme]" value="<?php echo esc_attr( $scheme['value'] ); ?>" <?php checked( $options['color_scheme'], $scheme['value'] ); ?> />
 281          <input type="hidden" id="default-color-<?php echo esc_attr( $scheme['value'] ); ?>" value="<?php echo esc_attr( $scheme['default_link_color'] ); ?>" />
 282          <span>
 283              <img src="<?php echo esc_url( $scheme['thumbnail'] ); ?>" width="136" height="122" alt="" />
 284              <?php echo esc_html( $scheme['label'] ); ?>
 285          </span>
 286      </label>
 287      </div>
 288          <?php
 289      }
 290  }
 291  
 292  /**
 293   * Render the Link Color setting field.
 294   *
 295   * @since Twenty Eleven 1.3
 296   */
 297  function twentyeleven_settings_field_link_color() {
 298      $options = twentyeleven_get_theme_options();
 299      ?>
 300      <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
 301      <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
 302      <input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
 303      <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
 304      <br />
 305      <span>
 306      <?php
 307      /* translators: %s: Link color. */
 308      printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-color">' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '</span>' );
 309      ?>
 310      </span>
 311      <?php
 312  }
 313  
 314  /**
 315   * Render the Layout setting field.
 316   *
 317   * @since Twenty Eleven 1.3
 318   */
 319  function twentyeleven_settings_field_layout() {
 320      $options = twentyeleven_get_theme_options();
 321      foreach ( twentyeleven_layouts() as $layout ) {
 322          ?>
 323          <div class="layout image-radio-option theme-layout">
 324          <label class="description">
 325              <input type="radio" name="twentyeleven_theme_options[theme_layout]" value="<?php echo esc_attr( $layout['value'] ); ?>" <?php checked( $options['theme_layout'], $layout['value'] ); ?> />
 326              <span>
 327                  <img src="<?php echo esc_url( $layout['thumbnail'] ); ?>" width="136" height="122" alt="" />
 328                  <?php echo esc_html( $layout['label'] ); ?>
 329              </span>
 330          </label>
 331          </div>
 332          <?php
 333      }
 334  }
 335  
 336  /**
 337   * Render the theme options page for Twenty Eleven.
 338   *
 339   * @since Twenty Eleven 1.2
 340   */
 341  function twentyeleven_theme_options_render_page() {
 342      $theme_name = function_exists( 'wp_get_theme' ) ? wp_get_theme()->display( 'Name' ) : get_option( 'current_theme' );
 343      ?>
 344      <div class="wrap">
 345          <h2>
 346          <?php
 347          /* translators: %s: Theme name. */
 348          printf( __( '%s Theme Options', 'twentyeleven' ), $theme_name );
 349          ?>
 350          </h2>
 351          <?php settings_errors(); ?>
 352  
 353          <form method="post" action="options.php">
 354              <?php
 355                  settings_fields( 'twentyeleven_options' );
 356                  do_settings_sections( 'theme_options' );
 357                  submit_button();
 358              ?>
 359          </form>
 360      </div>
 361      <?php
 362  }
 363  
 364  /**
 365   * Sanitize and validate form input.
 366   *
 367   * Accepts an array, return a sanitized array.
 368   *
 369   * @see twentyeleven_theme_options_init()
 370   * @todo set up Reset Options action
 371   *
 372   * @since Twenty Eleven 1.0
 373   *
 374   * @param array $input An array of form input.
 375   */
 376  function twentyeleven_theme_options_validate( $input ) {
 377      $defaults = twentyeleven_get_default_theme_options();
 378      $output   = $defaults;
 379  
 380      // Color scheme must be in our array of color scheme options.
 381      if ( isset( $input['color_scheme'] ) && array_key_exists( $input['color_scheme'], twentyeleven_color_schemes() ) ) {
 382          $output['color_scheme'] = $input['color_scheme'];
 383      }
 384  
 385      // Our defaults for the link color may have changed, based on the color scheme.
 386      $defaults['link_color'] = twentyeleven_get_default_link_color( $output['color_scheme'] );
 387      $output['link_color']   = $defaults['link_color'];
 388  
 389      // Link color must be 3 or 6 hexadecimal characters.
 390      if ( isset( $input['link_color'] ) && preg_match( '/^#?([a-f0-9]{3}){1,2}$/i', $input['link_color'] ) ) {
 391          $output['link_color'] = '#' . strtolower( ltrim( $input['link_color'], '#' ) );
 392      }
 393  
 394      // Theme layout must be in our array of theme layout options.
 395      if ( isset( $input['theme_layout'] ) && array_key_exists( $input['theme_layout'], twentyeleven_layouts() ) ) {
 396          $output['theme_layout'] = $input['theme_layout'];
 397      }
 398  
 399      /**
 400       * Filters the Twenty Eleven sanitized form input array.
 401       *
 402       * @since Twenty Eleven 1.0
 403       *
 404       * @param array $output   An array of sanitized form output.
 405       * @param array $input    An array of un-sanitized form input.
 406       * @param array $defaults An array of default theme options.
 407       */
 408      return apply_filters( 'twentyeleven_theme_options_validate', $output, $input, $defaults );
 409  }
 410  
 411  /**
 412   * Enqueue the styles for the current color scheme.
 413   *
 414   * @since Twenty Eleven 1.0
 415   */
 416  function twentyeleven_enqueue_color_scheme() {
 417      $options      = twentyeleven_get_theme_options();
 418      $color_scheme = $options['color_scheme'];
 419  
 420      if ( 'dark' === $color_scheme ) {
 421          wp_enqueue_style( 'dark', get_template_directory_uri() . '/colors/dark.css', array(), '20240603' );
 422      }
 423  
 424      /**
 425       * Fires after the styles for the Twenty Eleven color scheme are enqueued.
 426       *
 427       * @since Twenty Eleven 1.0
 428       *
 429       * @param string $color_scheme The color scheme.
 430       */
 431      do_action( 'twentyeleven_enqueue_color_scheme', $color_scheme );
 432  }
 433  add_action( 'wp_enqueue_scripts', 'twentyeleven_enqueue_color_scheme' );
 434  
 435  /**
 436   * Add a style block to the theme for the current link color.
 437   *
 438   * This function is attached to the wp_head action hook.
 439   *
 440   * @since Twenty Eleven 1.0
 441   */
 442  function twentyeleven_print_link_color_style() {
 443      $options    = twentyeleven_get_theme_options();
 444      $link_color = $options['link_color'];
 445  
 446      $default_options = twentyeleven_get_default_theme_options();
 447  
 448      // Don't do anything if the current link color is the default.
 449      if ( $default_options['link_color'] === $link_color ) {
 450          return;
 451      }
 452      ?>
 453      <style>
 454          /* Link color */
 455          a,
 456          #site-title a:focus,
 457          #site-title a:hover,
 458          #site-title a:active,
 459          .entry-title a:hover,
 460          .entry-title a:focus,
 461          .entry-title a:active,
 462          .widget_twentyeleven_ephemera .comments-link a:hover,
 463          section.recent-posts .other-recent-posts a[rel="bookmark"]:hover,
 464          section.recent-posts .other-recent-posts .comments-link a:hover,
 465          .format-image footer.entry-meta a:hover,
 466          #site-generator a:hover {
 467              color: <?php echo $link_color; ?>;
 468          }
 469          section.recent-posts .other-recent-posts .comments-link a:hover {
 470              border-color: <?php echo $link_color; ?>;
 471          }
 472          article.feature-image.small .entry-summary p a:hover,
 473          .entry-header .comments-link a:hover,
 474          .entry-header .comments-link a:focus,
 475          .entry-header .comments-link a:active,
 476          .feature-slider a.active {
 477              background-color: <?php echo $link_color; ?>;
 478          }
 479      </style>
 480      <?php
 481  }
 482  add_action( 'wp_head', 'twentyeleven_print_link_color_style' );
 483  
 484  /**
 485   * Add Twenty Eleven layout classes to the array of body classes.
 486   *
 487   * @since Twenty Eleven 1.0
 488   *
 489   * @param array $existing_classes An array of existing body classes.
 490   */
 491  function twentyeleven_layout_classes( $existing_classes ) {
 492      $options        = twentyeleven_get_theme_options();
 493      $current_layout = $options['theme_layout'];
 494  
 495      if ( in_array( $current_layout, array( 'content-sidebar', 'sidebar-content' ), true ) ) {
 496          $classes = array( 'two-column' );
 497      } else {
 498          $classes = array( 'one-column' );
 499      }
 500  
 501      if ( 'content-sidebar' === $current_layout ) {
 502          $classes[] = 'right-sidebar';
 503      } elseif ( 'sidebar-content' === $current_layout ) {
 504          $classes[] = 'left-sidebar';
 505      } else {
 506          $classes[] = $current_layout;
 507      }
 508  
 509      /**
 510       * Filters the Twenty Eleven layout body classes.
 511       *
 512       * @since Twenty Eleven 1.0
 513       *
 514       * @param array  $classes        An array of body classes.
 515       * @param string $current_layout The current theme layout.
 516       */
 517      $classes = apply_filters( 'twentyeleven_layout_classes', $classes, $current_layout );
 518  
 519      return array_merge( $existing_classes, $classes );
 520  }
 521  add_filter( 'body_class', 'twentyeleven_layout_classes' );
 522  
 523  /**
 524   * Implements Twenty Eleven theme options into Customizer
 525   *
 526   * @since Twenty Eleven 1.3
 527   *
 528   * @param WP_Customize_Manager $wp_customize Customizer object.
 529   */
 530  function twentyeleven_customize_register( $wp_customize ) {
 531      $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
 532      $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
 533      $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
 534  
 535      if ( isset( $wp_customize->selective_refresh ) ) {
 536          $wp_customize->selective_refresh->add_partial(
 537              'blogname',
 538              array(
 539                  'selector'            => '#site-title a',
 540                  'container_inclusive' => false,
 541                  'render_callback'     => 'twentyeleven_customize_partial_blogname',
 542              )
 543          );
 544          $wp_customize->selective_refresh->add_partial(
 545              'blogdescription',
 546              array(
 547                  'selector'            => '#site-description',
 548                  'container_inclusive' => false,
 549                  'render_callback'     => 'twentyeleven_customize_partial_blogdescription',
 550              )
 551          );
 552      }
 553  
 554      $options  = twentyeleven_get_theme_options();
 555      $defaults = twentyeleven_get_default_theme_options();
 556  
 557      $wp_customize->add_setting(
 558          'twentyeleven_theme_options[color_scheme]',
 559          array(
 560              'default'    => $defaults['color_scheme'],
 561              'type'       => 'option',
 562              'capability' => 'edit_theme_options',
 563          )
 564      );
 565  
 566      $schemes = twentyeleven_color_schemes();
 567      $choices = array();
 568      foreach ( $schemes as $scheme ) {
 569          $choices[ $scheme['value'] ] = $scheme['label'];
 570      }
 571  
 572      $wp_customize->add_control(
 573          'twentyeleven_color_scheme',
 574          array(
 575              'label'    => __( 'Color Scheme', 'twentyeleven' ),
 576              'section'  => 'colors',
 577              'settings' => 'twentyeleven_theme_options[color_scheme]',
 578              'type'     => 'radio',
 579              'choices'  => $choices,
 580              'priority' => 5,
 581          )
 582      );
 583  
 584      // Link Color (added to Color Scheme section in Customizer).
 585      $wp_customize->add_setting(
 586          'twentyeleven_theme_options[link_color]',
 587          array(
 588              'default'           => twentyeleven_get_default_link_color( $options['color_scheme'] ),
 589              'type'              => 'option',
 590              'sanitize_callback' => 'sanitize_hex_color',
 591              'capability'        => 'edit_theme_options',
 592          )
 593      );
 594  
 595      $wp_customize->add_control(
 596          new WP_Customize_Color_Control(
 597              $wp_customize,
 598              'link_color',
 599              array(
 600                  'label'    => __( 'Link Color', 'twentyeleven' ),
 601                  'section'  => 'colors',
 602                  'settings' => 'twentyeleven_theme_options[link_color]',
 603              )
 604          )
 605      );
 606  
 607      // Default Layout.
 608      $wp_customize->add_section(
 609          'twentyeleven_layout',
 610          array(
 611              'title'    => __( 'Layout', 'twentyeleven' ),
 612              'priority' => 50,
 613          )
 614      );
 615  
 616      $wp_customize->add_setting(
 617          'twentyeleven_theme_options[theme_layout]',
 618          array(
 619              'type'              => 'option',
 620              'default'           => $defaults['theme_layout'],
 621              'sanitize_callback' => 'sanitize_key',
 622          )
 623      );
 624  
 625      $layouts = twentyeleven_layouts();
 626      $choices = array();
 627      foreach ( $layouts as $layout ) {
 628          $choices[ $layout['value'] ] = $layout['label'];
 629      }
 630  
 631      $wp_customize->add_control(
 632          'twentyeleven_theme_options[theme_layout]',
 633          array(
 634              'section' => 'twentyeleven_layout',
 635              'type'    => 'radio',
 636              'choices' => $choices,
 637          )
 638      );
 639  }
 640  add_action( 'customize_register', 'twentyeleven_customize_register' );
 641  
 642  /**
 643   * Render the site title for the selective refresh partial.
 644   *
 645   * @since Twenty Eleven 2.4
 646   *
 647   * @see twentyeleven_customize_register()
 648   *
 649   * @return void
 650   */
 651  function twentyeleven_customize_partial_blogname() {
 652      bloginfo( 'name' );
 653  }
 654  
 655  /**
 656   * Render the site tagline for the selective refresh partial.
 657   *
 658   * @since Twenty Eleven 2.4
 659   *
 660   * @see twentyeleven_customize_register()
 661   *
 662   * @return void
 663   */
 664  function twentyeleven_customize_partial_blogdescription() {
 665      bloginfo( 'description' );
 666  }
 667  
 668  /**
 669   * Bind JS handlers to make Customizer preview reload changes asynchronously.
 670   *
 671   * Used with blogname and blogdescription.
 672   *
 673   * @since Twenty Eleven 1.3
 674   */
 675  function twentyeleven_customize_preview_js() {
 676      wp_enqueue_script( 'twentyeleven-customizer', get_template_directory_uri() . '/inc/theme-customizer.js', array( 'customize-preview' ), '20150401', array( 'in_footer' => true ) );
 677  }
 678  add_action( 'customize_preview_init', 'twentyeleven_customize_preview_js' );