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

   1 <?php
   2 /**
   3  * Custom header implementation
   4  *
   5  * @link https://codex.wordpress.org/Custom_Headers
   6  *
   7  * @package WordPress
   8  * @subpackage Twenty_Seventeen
   9  * @since 1.0
  10  */
  11
  12 /**
  13  * Set up the WordPress core custom header feature.
  14  *
  15  * @uses twentyseventeen_header_style()
  16  */
  17 function twentyseventeen_custom_header_setup() {
  18
  19         /**
  20          * Filter Twenty Seventeen custom-header support arguments.
  21          *
  22          * @since Twenty Seventeen 1.0
  23          *
  24          * @param array $args {
  25          *     An array of custom-header support arguments.
  26          *
  27          *     @type string $default-image              Default image of the header.
  28          *     @type string $default_text_color     Default color of the header text.
  29          *     @type int    $width                  Width in pixels of the custom header image. Default 954.
  30          *     @type int    $height                 Height in pixels of the custom header image. Default 1300.
  31          *     @type string $wp-head-callback       Callback function used to styles the header image and text
  32          *                                          displayed on the blog.
  33          *     @type string $flex-height                Flex support for height of header.
  34          * }
  35          */
  36         add_theme_support( 'custom-header', apply_filters( 'twentyseventeen_custom_header_args', array(
  37                 'default-image'      => get_parent_theme_file_uri( '/assets/images/header.jpg' ),
  38                 'width'              => 2000,
  39                 'height'             => 1200,
  40                 'flex-height'        => true,
  41                 'video'              => true,
  42                 'wp-head-callback'   => 'twentyseventeen_header_style',
  43         ) ) );
  44
  45         register_default_headers( array(
  46                 'default-image' => array(
  47                         'url'           => '%s/assets/images/header.jpg',
  48                         'thumbnail_url' => '%s/assets/images/header.jpg',
  49                         'description'   => __( 'Default Header Image', 'twentyseventeen' ),
  50                 ),
  51         ) );
  52 }
  53 add_action( 'after_setup_theme', 'twentyseventeen_custom_header_setup' );
  54
  55 if ( ! function_exists( 'twentyseventeen_header_style' ) ) :
  56 /**
  57  * Styles the header image and text displayed on the blog.
  58  *
  59  * @see twentyseventeen_custom_header_setup().
  60  */
  61 function twentyseventeen_header_style() {
  62         $header_text_color = get_header_textcolor();
  63
  64         // If no custom options for text are set, let's bail.
  65         // get_header_textcolor() options: add_theme_support( 'custom-header' ) is default, hide text (returns 'blank') or any hex value.
  66         if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
  67                 return;
  68         }
  69
  70         // If we get this far, we have custom styles. Let's do this.
  71         ?>
  72         <style id="twentyseventeen-custom-header-styles" type="text/css">
  73         <?php
  74                 // Has the text been hidden?
  75                 if ( 'blank' === $header_text_color ) :
  76         ?>
  77                 .site-title,
  78                 .site-description {
  79                         position: absolute;
  80                         clip: rect(1px, 1px, 1px, 1px);
  81                 }
  82         <?php
  83                 // If the user has set a custom color for the text use that.
  84                 else :
  85         ?>
  86                 .site-title a,
  87                 .colors-dark .site-title a,
  88                 .colors-custom .site-title a,
  89                 body.has-header-image .site-title a,
  90                 body.has-header-video .site-title a,
  91                 body.has-header-image.colors-dark .site-title a,
  92                 body.has-header-video.colors-dark .site-title a,
  93                 body.has-header-image.colors-custom .site-title a,
  94                 body.has-header-video.colors-custom .site-title a,
  95                 .site-description,
  96                 .colors-dark .site-description,
  97                 .colors-custom .site-description,
  98                 body.has-header-image .site-description,
  99                 body.has-header-video .site-description,
 100                 body.has-header-image.colors-dark .site-description,
 101                 body.has-header-video.colors-dark .site-description,
 102                 body.has-header-image.colors-custom .site-description,
 103                 body.has-header-video.colors-custom .site-description {
 104                         color: #<?php echo esc_attr( $header_text_color ); ?>;
 105                 }
 106         <?php endif; ?>
 107         </style>
 108         <?php
 109 }
 110 endif; // End of twentyseventeen_header_style.
 111
 112 /**
 113  * Customize video play/pause button in the custom header.
 114  */
 115 function twentyseventeen_video_controls( $settings ) {
 116         $settings['l10n']['play'] = '<span class="screen-reader-text">' . __( 'Play background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'play' ) );
 117         $settings['l10n']['pause'] = '<span class="screen-reader-text">' . __( 'Pause background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'pause' ) );
 118         return $settings;
 119 }
 120 add_filter( 'header_video_settings', 'twentyseventeen_video_controls' );