wp-content/themes/twentyfifteen/inc/custom-header.php

   1 <?php
   2 /**
   3  * Custom Header functionality for Twenty Fifteen
   4  *
   5  * @package WordPress
   6  * @subpackage Twenty_Fifteen
   7  * @since Twenty Fifteen 1.0
   8  */
   9
  10 /**
  11  * Set up the WordPress core custom header feature.
  12  *
  13  * @uses twentyfifteen_header_style()
  14  */
  15 function twentyfifteen_custom_header_setup() {
  16         $color_scheme        = twentyfifteen_get_color_scheme();
  17         $default_text_color  = trim( $color_scheme[4], '#' );
  18
  19         /**
  20          * Filter Twenty Fifteen custom-header support arguments.
  21          *
  22          * @since Twenty Fifteen 1.0
  23          *
  24          * @param array $args {
  25          *     An array of custom-header support arguments.
  26          *
  27          *     @type string $default_text_color     Default color of the header text.
  28          *     @type int    $width                  Width in pixels of the custom header image. Default 954.
  29          *     @type int    $height                 Height in pixels of the custom header image. Default 1300.
  30          *     @type string $wp-head-callback       Callback function used to styles the header image and text
  31          *                                          displayed on the blog.
  32          * }
  33          */
  34         add_theme_support( 'custom-header', apply_filters( 'twentyfifteen_custom_header_args', array(
  35                 'default-text-color'     => $default_text_color,
  36                 'width'                  => 954,
  37                 'height'                 => 1300,
  38                 'wp-head-callback'       => 'twentyfifteen_header_style',
  39         ) ) );
  40 }
  41 add_action( 'after_setup_theme', 'twentyfifteen_custom_header_setup' );
  42
  43 /**
  44  * Convert HEX to RGB.
  45  *
  46  * @since Twenty Fifteen 1.0
  47  *
  48  * @param string $color The original color, in 3- or 6-digit hexadecimal form.
  49  * @return array Array containing RGB (red, green, and blue) values for the given
  50  *               HEX code, empty array otherwise.
  51  */
  52 function twentyfifteen_hex2rgb( $color ) {
  53         $color = trim( $color, '#' );
  54
  55         if ( strlen( $color ) == 3 ) {
  56                 $r = hexdec( substr( $color, 0, 1 ).substr( $color, 0, 1 ) );
  57                 $g = hexdec( substr( $color, 1, 1 ).substr( $color, 1, 1 ) );
  58                 $b = hexdec( substr( $color, 2, 1 ).substr( $color, 2, 1 ) );
  59         } else if ( strlen( $color ) == 6 ) {
  60                 $r = hexdec( substr( $color, 0, 2 ) );
  61                 $g = hexdec( substr( $color, 2, 2 ) );
  62                 $b = hexdec( substr( $color, 4, 2 ) );
  63         } else {
  64                 return array();
  65         }
  66
  67         return array( 'red' => $r, 'green' => $g, 'blue' => $b );
  68 }
  69
  70 if ( ! function_exists( 'twentyfifteen_header_style' ) ) :
  71 /**
  72  * Styles the header image and text displayed on the blog.
  73  *
  74  * @since Twenty Fifteen 1.0
  75  *
  76  * @see twentyfifteen_custom_header_setup()
  77  */
  78 function twentyfifteen_header_style() {
  79         $header_image = get_header_image();
  80
  81         // If no custom options for text are set, let's bail.
  82         if ( empty( $header_image ) && display_header_text() ) {
  83                 return;
  84         }
  85
  86         // If we get this far, we have custom styles. Let's do this.
  87         ?>
  88         <style type="text/css" id="twentyfifteen-header-css">
  89         <?php
  90                 // Short header for when there is no Custom Header and Header Text is hidden.
  91                 if ( empty( $header_image ) && ! display_header_text() ) :
  92         ?>
  93                 .site-header {
  94                         padding-top: 14px;
  95                         padding-bottom: 14px;
  96                 }
  97
  98                 .site-branding {
  99                         min-height: 42px;
 100                 }
 101
 102                 @media screen and (min-width: 46.25em) {
 103                         .site-header {
 104                                 padding-top: 21px;
 105                                 padding-bottom: 21px;
 106                         }
 107                         .site-branding {
 108                                 min-height: 56px;
 109                         }
 110                 }
 111                 @media screen and (min-width: 55em) {
 112                         .site-header {
 113                                 padding-top: 25px;
 114                                 padding-bottom: 25px;
 115                         }
 116                         .site-branding {
 117                                 min-height: 62px;
 118                         }
 119                 }
 120                 @media screen and (min-width: 59.6875em) {
 121                         .site-header {
 122                                 padding-top: 0;
 123                                 padding-bottom: 0;
 124                         }
 125                         .site-branding {
 126                                 min-height: 0;
 127                         }
 128                 }
 129         <?php
 130                 endif;
 131
 132                 // Has a Custom Header been added?
 133                 if ( ! empty( $header_image ) ) :
 134         ?>
 135                 .site-header {
 136                         background: url(<?php header_image(); ?>) no-repeat 50% 50%;
 137                         -webkit-background-size: cover;
 138                         -moz-background-size:    cover;
 139                         -o-background-size:      cover;
 140                         background-size:         cover;
 141                 }
 142
 143                 @media screen and (min-width: 59.6875em) {
 144                         body:before {
 145                                 background: url(<?php header_image(); ?>) no-repeat 100% 50%;
 146                                 -webkit-background-size: cover;
 147                                 -moz-background-size:    cover;
 148                                 -o-background-size:      cover;
 149                                 background-size:         cover;
 150                                 border-right: 0;
 151                         }
 152
 153                         .site-header {
 154                                 background: transparent;
 155                         }
 156                 }
 157         <?php
 158                 endif;
 159
 160                 // Has the text been hidden?
 161                 if ( ! display_header_text() ) :
 162         ?>
 163                 .site-title,
 164                 .site-description {
 165                         clip: rect(1px, 1px, 1px, 1px);
 166                         position: absolute;
 167                 }
 168         <?php endif; ?>
 169         </style>
 170         <?php
 171 }
 172 endif; // twentyfifteen_header_style
 173
 174 /**
 175  * Enqueues front-end CSS for the header background color.
 176  *
 177  * @since Twenty Fifteen 1.0
 178  *
 179  * @see wp_add_inline_style()
 180  */
 181 function twentyfifteen_header_background_color_css() {
 182         $color_scheme            = twentyfifteen_get_color_scheme();
 183         $default_color           = $color_scheme[1];
 184         $header_background_color = get_theme_mod( 'header_background_color', $default_color );
 185
 186         // Don't do anything if the current color is the default.
 187         if ( $header_background_color === $default_color ) {
 188                 return;
 189         }
 190
 191         $css = '
 192                 /* Custom Header Background Color */
 193                 body:before,
 194                 .site-header {
 195                         background-color: %1$s;
 196                 }
 197
 198                 @media screen and (min-width: 59.6875em) {
 199                         .site-header,
 200                         .secondary {
 201                                 background-color: transparent;
 202                         }
 203
 204                         .widget button,
 205                         .widget input[type="button"],
 206                         .widget input[type="reset"],
 207                         .widget input[type="submit"],
 208                         .widget_calendar tbody a,
 209                         .widget_calendar tbody a:hover,
 210                         .widget_calendar tbody a:focus {
 211                                 color: %1$s;
 212                         }
 213                 }
 214         ';
 215
 216         wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $header_background_color ) );
 217 }
 218 add_action( 'wp_enqueue_scripts', 'twentyfifteen_header_background_color_css', 11 );
 219
 220 /**
 221  * Enqueues front-end CSS for the sidebar text color.
 222  *
 223  * @since Twenty Fifteen 1.0
 224  */
 225 function twentyfifteen_sidebar_text_color_css() {
 226         $color_scheme       = twentyfifteen_get_color_scheme();
 227         $default_color      = $color_scheme[4];
 228         $sidebar_link_color = get_theme_mod( 'sidebar_textcolor', $default_color );
 229
 230         // Don't do anything if the current color is the default.
 231         if ( $sidebar_link_color === $default_color ) {
 232                 return;
 233         }
 234
 235         // If we get this far, we have custom styles. Let's do this.
 236         $sidebar_link_color_rgb     = twentyfifteen_hex2rgb( $sidebar_link_color );
 237         $sidebar_text_color         = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $sidebar_link_color_rgb );
 238         $sidebar_border_color       = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $sidebar_link_color_rgb );
 239         $sidebar_border_focus_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $sidebar_link_color_rgb );
 240
 241         $css = '
 242                 /* Custom Sidebar Text Color */
 243                 .site-title a,
 244                 .site-description,
 245                 .secondary-toggle:before {
 246                         color: %1$s;
 247                 }
 248
 249                 .site-title a:hover,
 250                 .site-title a:focus {
 251                         color: %1$s; /* Fallback for IE7 and IE8 */
 252                         color: %2$s;
 253                 }
 254
 255                 .secondary-toggle {
 256                         border-color: %1$s; /* Fallback for IE7 and IE8 */
 257                         border-color: %3$s;
 258                 }
 259
 260                 .secondary-toggle:hover,
 261                 .secondary-toggle:focus {
 262                         border-color: %1$s; /* Fallback for IE7 and IE8 */
 263                         border-color: %4$s;
 264                 }
 265
 266                 .site-title a {
 267                         outline-color: %1$s; /* Fallback for IE7 and IE8 */
 268                         outline-color: %4$s;
 269                 }
 270
 271                 @media screen and (min-width: 59.6875em) {
 272                         .secondary a,
 273                         .dropdown-toggle:after,
 274                         .widget-title,
 275                         .widget blockquote cite,
 276                         .widget blockquote small {
 277                                 color: %1$s;
 278                         }
 279
 280                         .widget button,
 281                         .widget input[type="button"],
 282                         .widget input[type="reset"],
 283                         .widget input[type="submit"],
 284                         .widget_calendar tbody a {
 285                                 background-color: %1$s;
 286                         }
 287
 288                         .textwidget a {
 289                                 border-color: %1$s;
 290                         }
 291
 292                         .secondary a:hover,
 293                         .secondary a:focus,
 294                         .main-navigation .menu-item-description,
 295                         .widget,
 296                         .widget blockquote,
 297                         .widget .wp-caption-text,
 298                         .widget .gallery-caption {
 299                                 color: %2$s;
 300                         }
 301
 302                         .widget button:hover,
 303                         .widget button:focus,
 304                         .widget input[type="button"]:hover,
 305                         .widget input[type="button"]:focus,
 306                         .widget input[type="reset"]:hover,
 307                         .widget input[type="reset"]:focus,
 308                         .widget input[type="submit"]:hover,
 309                         .widget input[type="submit"]:focus,
 310                         .widget_calendar tbody a:hover,
 311                         .widget_calendar tbody a:focus {
 312                                 background-color: %2$s;
 313                         }
 314
 315                         .widget blockquote {
 316                                 border-color: %2$s;
 317                         }
 318
 319                         .main-navigation ul,
 320                         .main-navigation li,
 321                         .secondary-toggle,
 322                         .widget input,
 323                         .widget textarea,
 324                         .widget table,
 325                         .widget th,
 326                         .widget td,
 327                         .widget pre,
 328                         .widget li,
 329                         .widget_categories .children,
 330                         .widget_nav_menu .sub-menu,
 331                         .widget_pages .children,
 332                         .widget abbr[title] {
 333                                 border-color: %3$s;
 334                         }
 335
 336                         .dropdown-toggle:hover,
 337                         .dropdown-toggle:focus,
 338                         .widget hr {
 339                                 background-color: %3$s;
 340                         }
 341
 342                         .widget input:focus,
 343                         .widget textarea:focus {
 344                                 border-color: %4$s;
 345                         }
 346
 347                         .sidebar a:focus,
 348                         .dropdown-toggle:focus {
 349                                 outline-color: %4$s;
 350                         }
 351                 }
 352         ';
 353
 354         wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $sidebar_link_color, $sidebar_text_color, $sidebar_border_color, $sidebar_border_focus_color ) );
 355 }
 356 add_action( 'wp_enqueue_scripts', 'twentyfifteen_sidebar_text_color_css', 11 );