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
 137                         /*
 138                          * No shorthand so the Customizer can override individual properties.
 139                          * @see https://core.trac.wordpress.org/ticket/31460
 140                          */
 141                         background-image: url(<?php header_image(); ?>);
 142                         background-repeat: no-repeat;
 143                         background-position: 50% 50%;
 144                         -webkit-background-size: cover;
 145                         -moz-background-size:    cover;
 146                         -o-background-size:      cover;
 147                         background-size:         cover;
 148                 }
 149
 150                 @media screen and (min-width: 59.6875em) {
 151                         body:before {
 152
 153                                 /*
 154                                  * No shorthand so the Customizer can override individual properties.
 155                                  * @see https://core.trac.wordpress.org/ticket/31460
 156                                  */
 157                                 background-image: url(<?php header_image(); ?>);
 158                                 background-repeat: no-repeat;
 159                                 background-position: 100% 50%;
 160                                 -webkit-background-size: cover;
 161                                 -moz-background-size:    cover;
 162                                 -o-background-size:      cover;
 163                                 background-size:         cover;
 164                                 border-right: 0;
 165                         }
 166
 167                         .site-header {
 168                                 background: transparent;
 169                         }
 170                 }
 171         <?php
 172                 endif;
 173
 174                 // Has the text been hidden?
 175                 if ( ! display_header_text() ) :
 176         ?>
 177                 .site-title,
 178                 .site-description {
 179                         clip: rect(1px, 1px, 1px, 1px);
 180                         position: absolute;
 181                 }
 182         <?php endif; ?>
 183         </style>
 184         <?php
 185 }
 186 endif; // twentyfifteen_header_style
 187
 188 /**
 189  * Enqueues front-end CSS for the header background color.
 190  *
 191  * @since Twenty Fifteen 1.0
 192  *
 193  * @see wp_add_inline_style()
 194  */
 195 function twentyfifteen_header_background_color_css() {
 196         $color_scheme            = twentyfifteen_get_color_scheme();
 197         $default_color           = $color_scheme[1];
 198         $header_background_color = get_theme_mod( 'header_background_color', $default_color );
 199
 200         // Don't do anything if the current color is the default.
 201         if ( $header_background_color === $default_color ) {
 202                 return;
 203         }
 204
 205         $css = '
 206                 /* Custom Header Background Color */
 207                 body:before,
 208                 .site-header {
 209                         background-color: %1$s;
 210                 }
 211
 212                 @media screen and (min-width: 59.6875em) {
 213                         .site-header,
 214                         .secondary {
 215                                 background-color: transparent;
 216                         }
 217
 218                         .widget button,
 219                         .widget input[type="button"],
 220                         .widget input[type="reset"],
 221                         .widget input[type="submit"],
 222                         .widget_calendar tbody a,
 223                         .widget_calendar tbody a:hover,
 224                         .widget_calendar tbody a:focus {
 225                                 color: %1$s;
 226                         }
 227                 }
 228         ';
 229
 230         wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $header_background_color ) );
 231 }
 232 add_action( 'wp_enqueue_scripts', 'twentyfifteen_header_background_color_css', 11 );
 233
 234 /**
 235  * Enqueues front-end CSS for the sidebar text color.
 236  *
 237  * @since Twenty Fifteen 1.0
 238  */
 239 function twentyfifteen_sidebar_text_color_css() {
 240         $color_scheme       = twentyfifteen_get_color_scheme();
 241         $default_color      = $color_scheme[4];
 242         $sidebar_link_color = get_theme_mod( 'sidebar_textcolor', $default_color );
 243
 244         // Don't do anything if the current color is the default.
 245         if ( $sidebar_link_color === $default_color ) {
 246                 return;
 247         }
 248
 249         // If we get this far, we have custom styles. Let's do this.
 250         $sidebar_link_color_rgb     = twentyfifteen_hex2rgb( $sidebar_link_color );
 251         $sidebar_text_color         = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $sidebar_link_color_rgb );
 252         $sidebar_border_color       = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $sidebar_link_color_rgb );
 253         $sidebar_border_focus_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $sidebar_link_color_rgb );
 254
 255         $css = '
 256                 /* Custom Sidebar Text Color */
 257                 .site-title a,
 258                 .site-description,
 259                 .secondary-toggle:before {
 260                         color: %1$s;
 261                 }
 262
 263                 .site-title a:hover,
 264                 .site-title a:focus {
 265                         color: %1$s; /* Fallback for IE7 and IE8 */
 266                         color: %2$s;
 267                 }
 268
 269                 .secondary-toggle {
 270                         border-color: %1$s; /* Fallback for IE7 and IE8 */
 271                         border-color: %3$s;
 272                 }
 273
 274                 .secondary-toggle:hover,
 275                 .secondary-toggle:focus {
 276                         border-color: %1$s; /* Fallback for IE7 and IE8 */
 277                         border-color: %4$s;
 278                 }
 279
 280                 .site-title a {
 281                         outline-color: %1$s; /* Fallback for IE7 and IE8 */
 282                         outline-color: %4$s;
 283                 }
 284
 285                 @media screen and (min-width: 59.6875em) {
 286                         .secondary a,
 287                         .dropdown-toggle:after,
 288                         .widget-title,
 289                         .widget blockquote cite,
 290                         .widget blockquote small {
 291                                 color: %1$s;
 292                         }
 293
 294                         .widget button,
 295                         .widget input[type="button"],
 296                         .widget input[type="reset"],
 297                         .widget input[type="submit"],
 298                         .widget_calendar tbody a {
 299                                 background-color: %1$s;
 300                         }
 301
 302                         .textwidget a {
 303                                 border-color: %1$s;
 304                         }
 305
 306                         .secondary a:hover,
 307                         .secondary a:focus,
 308                         .main-navigation .menu-item-description,
 309                         .widget,
 310                         .widget blockquote,
 311                         .widget .wp-caption-text,
 312                         .widget .gallery-caption {
 313                                 color: %2$s;
 314                         }
 315
 316                         .widget button:hover,
 317                         .widget button:focus,
 318                         .widget input[type="button"]:hover,
 319                         .widget input[type="button"]:focus,
 320                         .widget input[type="reset"]:hover,
 321                         .widget input[type="reset"]:focus,
 322                         .widget input[type="submit"]:hover,
 323                         .widget input[type="submit"]:focus,
 324                         .widget_calendar tbody a:hover,
 325                         .widget_calendar tbody a:focus {
 326                                 background-color: %2$s;
 327                         }
 328
 329                         .widget blockquote {
 330                                 border-color: %2$s;
 331                         }
 332
 333                         .main-navigation ul,
 334                         .main-navigation li,
 335                         .secondary-toggle,
 336                         .widget input,
 337                         .widget textarea,
 338                         .widget table,
 339                         .widget th,
 340                         .widget td,
 341                         .widget pre,
 342                         .widget li,
 343                         .widget_categories .children,
 344                         .widget_nav_menu .sub-menu,
 345                         .widget_pages .children,
 346                         .widget abbr[title] {
 347                                 border-color: %3$s;
 348                         }
 349
 350                         .dropdown-toggle:hover,
 351                         .dropdown-toggle:focus,
 352                         .widget hr {
 353                                 background-color: %3$s;
 354                         }
 355
 356                         .widget input:focus,
 357                         .widget textarea:focus {
 358                                 border-color: %4$s;
 359                         }
 360
 361                         .sidebar a:focus,
 362                         .dropdown-toggle:focus {
 363                                 outline-color: %4$s;
 364                         }
 365                 }
 366         ';
 367
 368         wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $sidebar_link_color, $sidebar_text_color, $sidebar_border_color, $sidebar_border_focus_color ) );
 369 }
 370 add_action( 'wp_enqueue_scripts', 'twentyfifteen_sidebar_text_color_css', 11 );