Make WordPress Core


Ignore:
Timestamp:
09/12/2013 10:05:06 PM (11 years ago)
Author:
lancewillett
Message:

Twenty Fourteen: let authors customize the green "accent" color by changing to a different hex value in the Customizer. Props celloexpressions.

Also add an ID attribute to all style elements.

See #25220.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfourteen/inc/customizer.php

    r25214 r25418  
    1111 *
    1212 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
    13  *
    1413 */
    1514function twentyfourteen_customize_register( $wp_customize ) {
    1615    $wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
    1716    $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
     17
     18    $wp_customize->add_setting( 'accent_color', array(
     19        'default'           => '#24890d',
     20        'sanitize_callback' => 'twentyfourteen_generate_accent_colors',
     21    ) );
     22
     23    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'accent_color', array(
     24        'label'    => __( 'Accent Color', 'twentyfourteen' ),
     25        'section'  => 'colors',
     26        'settings' => 'accent_color',
     27    ) ) );
    1828}
    1929add_action( 'customize_register', 'twentyfourteen_customize_register' );
     
    2131/**
    2232 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
    23  *
    2433 */
    2534function twentyfourteen_customize_preview_js() {
     
    2736}
    2837add_action( 'customize_preview_init', 'twentyfourteen_customize_preview_js' );
     38
     39/**
     40 * Generates two variants of the accent color, returns the original, and saves the others as theme mods.
     41 *
     42 * @param string $color The original color.
     43 * @return string $color The original color, sanitized.
     44 */
     45function twentyfourteen_generate_accent_colors( $color ) {
     46    $color = sanitize_hex_color( $color );
     47
     48    set_theme_mod( 'accent_lighter', twentyfourteen_adjust_color( $color, 14 ) );
     49    set_theme_mod( 'accent_much_lighter', twentyfourteen_adjust_color( $color, 71 ) );
     50
     51    return $color;
     52}
     53
     54/**
     55 * Tweaks the brightness of a color by adjusting the RGB values by the given interval.
     56 *
     57 * Use positive values of $steps to brighten the color and negative values to darken the color.
     58 * All three RGB values are modified by the specified steps, within the range of 0-255. The hue
     59 * is generally maintained unless the number of steps causes one value to be capped at 0 or 255.
     60 *
     61 * @param string $color The original color, in 3- or 6-digit hexadecimal form.
     62 * @param int $steps The number of steps to adjust the color by, in rgb units.
     63 * @return string $color The new color, in 6-digit hexadecimal form.
     64 */
     65function twentyfourteen_adjust_color( $color, $steps ) {
     66    // Convert shorthand to full hex.
     67    if ( strlen( $color ) == 3 ) {
     68        $color = str_repeat( substr( $color, 1, 1 ), 2 ) . str_repeat( substr( $color, 2, 1 ), 2 ) . str_repeat( substr( $color, 3, 1), 2 );
     69    }
     70
     71    // Convert hex to rgb.
     72    $rgb = array( hexdec( substr( $color, 1, 2 ) ), hexdec( substr( $color, 3, 2 ) ), hexdec( substr( $color, 5, 2 ) ) );
     73
     74    // Adjust color and switch back to hex.
     75    $hex = '#';
     76    foreach ( $rgb as $c ) {
     77        $c += $steps;
     78        if ( $c > 255 )
     79            $c = 255;
     80        elseif ( $c < 0 )
     81            $c = 0;
     82        $hex .= str_pad( dechex( $c ), 2, '0', STR_PAD_LEFT);
     83    }
     84
     85    return $hex;
     86}
     87
     88/**
     89 * Outputs the css for the Theme Customizer options.
     90 */
     91function twentyfourteen_customizer_styles() {
     92    $accent_color = get_theme_mod( 'accent_color' );
     93
     94    // Don't do anything if the current color is the default.
     95    if ( '#24890d' === $accent_color )
     96        return;
     97
     98    $accent_lighter = get_theme_mod( 'accent_lighter' );
     99    $accent_much_lighter = get_theme_mod( 'accent_much_lighter' );
     100
     101    $css = '<style type="text/css" id="twentyfourteen-accent-color">
     102        /* Custom accent color. */
     103        h1 a:hover,
     104        h2 a:hover,
     105        h3 a:hover,
     106        h4 a:hover,
     107        h5 a:hover,
     108        h6 a:hover,
     109        a,
     110        .primary-navigation ul ul a:hover,
     111        .entry-title a:hover,
     112        .cat-links a:hover,
     113        .site-content .post-navigation a:hover,
     114        .site-content .image-navigation a:hover,
     115        .comment-author a:hover,
     116        .comment-metadata a:hover,
     117        .comment-list .trackback a:hover,
     118        .comment-list .pingback a:hover,
     119        .content-sidebar a:hover,
     120        .paging-navigation .page-numbers.current {
     121            color: ' . $accent_color . ';
     122        }
     123
     124        button:hover,
     125        html input[type="button"]:hover,
     126        input[type="reset"]:hover,
     127        input[type="submit"]:hover,
     128        button:focus,
     129        html input[type="button"]:focus,
     130        input[type="reset"]:focus,
     131        input[type="submit"]:focus,
     132        .header-extra,
     133        .search-toggle,
     134        .bypostauthor .avatar,
     135        .widget-area button,
     136        .widget-area html input[type="button"],
     137        .widget-area input[type="reset"],
     138        .widget-area input[type="submit"],
     139        .widget_calendar a,
     140        .content-sidebar button:hover,
     141        .content-sidebar html input[type="button"]:hover,
     142        .content-sidebar input[type="reset"]:hover,
     143        .content-sidebar input[type="submit"]:hover,
     144        .content-sidebar button:focus,
     145        .content-sidebar html input[type="button"]:focus,
     146        .content-sidebar input[type="reset"]:focus,
     147        .content-sidebar input[type="submit"]:focus,
     148        .page-links a:hover {
     149            background-color: ' . $accent_color . ';
     150        }
     151
     152        ::-moz-selection {
     153            background: ' . $accent_color . ';
     154        }
     155
     156        ::selection {
     157            background: ' . $accent_color . ';
     158        }
     159
     160        .page-links a:hover,
     161        .paging-navigation .page-numbers.current {
     162            border-color: ' .  $accent_color . ';
     163        }
     164
     165        /* Generated variant of custom accent color: slightly lighter. */
     166        .search-toggle:hover,
     167        .search-toggle.active,
     168        .search-box,
     169        .widget-area button:hover,
     170        .widget-area html input[type="button"]:hover,
     171        .widget-area input[type="reset"]:hover,
     172        .widget-area input[type="submit"]:hover,
     173        .widget-area button:focus,
     174        .widget-area html input[type="button"]:focus,
     175        .widget-area input[type="reset"]:focus,
     176        .widget-area input[type="submit"]:focus,
     177        .widget-area button:active,
     178        .widget-area html input[type="button"]:active,
     179        .widget-area input[type="reset"]:active,
     180        .widget-area input[type="submit"]:active,
     181        .widget_calendar a:hover {
     182            background-color: ' . $accent_lighter . ';
     183        }
     184
     185        /* Generated variant of custom accent color: much lighter. */
     186        button:active,
     187        html input[type="button"]:active,
     188        input[type="reset"]:active,
     189        input[type="submit"]:active,
     190        .content-sidebar button:active,
     191        .content-sidebar html input[type="button"]:active,
     192        .content-sidebar input[type="reset"]:active,
     193        .content-sidebar input[type="submit"]:active {
     194            background-color: ' . $accent_much_lighter . ';
     195        }
     196
     197        a:hover,
     198        a:focus,
     199        a:active,
     200        .primary-navigation li.current_page_item > a,
     201        .primary-navigation li.current-menu-item > a,
     202        .secondary-navigation a:hover,
     203        #secondary .current_page_item > a,
     204        #secondary .current-menu-item > a,
     205        #featured-content .entry-meta a:hover,
     206        #featured-content .entry-title a:hover,
     207        #featured-content .more-link,
     208        .widget-area a:hover {
     209            color: ' . $accent_much_lighter . ';
     210        }
     211        </style>';
     212
     213    wp_add_inline_style( 'twentyfourteen-style', $css );
     214}
     215add_action( 'wp_enqueue_scripts', 'twentyfourteen_customizer_styles' );
Note: See TracChangeset for help on using the changeset viewer.