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

   1 <?php
   2 /**
   3  * Implement a custom header for Twenty Thirteen
   4  *
   5  * @link https://codex.wordpress.org/Custom_Headers
   6  *
   7  * @package WordPress
   8  * @subpackage Twenty_Thirteen
   9  * @since Twenty Thirteen 1.0
  10  */
  11
  12 /**
  13  * Set up the WordPress core custom header arguments and settings.
  14  *
  15  * @uses add_theme_support() to register support for 3.4 and up.
  16  * @uses twentythirteen_header_style() to style front-end.
  17  * @uses twentythirteen_admin_header_style() to style wp-admin form.
  18  * @uses twentythirteen_admin_header_image() to add custom markup to wp-admin form.
  19  * @uses register_default_headers() to set up the bundled header images.
  20  *
  21  * @since Twenty Thirteen 1.0
  22  */
  23 function twentythirteen_custom_header_setup() {
  24         $args = array(
  25                 // Text color and image (empty to use none).
  26                 'default-text-color'     => '220e10',
  27                 'default-image'          => '%s/images/headers/circle.png',
  28
  29                 // Set height and width, with a maximum value for the width.
  30                 'height'                 => 230,
  31                 'width'                  => 1600,
  32
  33                 // Callbacks for styling the header and the admin preview.
  34                 'wp-head-callback'       => 'twentythirteen_header_style',
  35                 'admin-head-callback'    => 'twentythirteen_admin_header_style',
  36                 'admin-preview-callback' => 'twentythirteen_admin_header_image',
  37         );
  38
  39         add_theme_support( 'custom-header', $args );
  40
  41         /*
  42          * Default custom headers packaged with the theme.
  43          * %s is a placeholder for the theme template directory URI.
  44          */
  45         register_default_headers( array(
  46                 'circle' => array(
  47                         'url'           => '%s/images/headers/circle.png',
  48                         'thumbnail_url' => '%s/images/headers/circle-thumbnail.png',
  49                         'description'   => _x( 'Circle', 'header image description', 'twentythirteen' )
  50                 ),
  51                 'diamond' => array(
  52                         'url'           => '%s/images/headers/diamond.png',
  53                         'thumbnail_url' => '%s/images/headers/diamond-thumbnail.png',
  54                         'description'   => _x( 'Diamond', 'header image description', 'twentythirteen' )
  55                 ),
  56                 'star' => array(
  57                         'url'           => '%s/images/headers/star.png',
  58                         'thumbnail_url' => '%s/images/headers/star-thumbnail.png',
  59                         'description'   => _x( 'Star', 'header image description', 'twentythirteen' )
  60                 ),
  61         ) );
  62 }
  63 add_action( 'after_setup_theme', 'twentythirteen_custom_header_setup', 11 );
  64
  65 /**
  66  * Load our special font CSS files.
  67  *
  68  * @since Twenty Thirteen 1.0
  69  */
  70 function twentythirteen_custom_header_fonts() {
  71         // Add Source Sans Pro and Bitter fonts.
  72         wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null );
  73
  74         // Add Genericons font.
  75         wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.03' );
  76 }
  77 add_action( 'admin_print_styles-appearance_page_custom-header', 'twentythirteen_custom_header_fonts' );
  78
  79 /**
  80  * Style the header text displayed on the blog.
  81  *
  82  * get_header_textcolor() options: Hide text (returns 'blank'), or any hex value.
  83  *
  84  * @since Twenty Thirteen 1.0
  85  */
  86 function twentythirteen_header_style() {
  87         $header_image = get_header_image();
  88         $text_color   = get_header_textcolor();
  89
  90         // If no custom options for text are set, let's bail.
  91         if ( empty( $header_image ) && $text_color == get_theme_support( 'custom-header', 'default-text-color' ) )
  92                 return;
  93
  94         // If we get this far, we have custom styles.
  95         ?>
  96         <style type="text/css" id="twentythirteen-header-css">
  97         <?php
  98                 if ( ! empty( $header_image ) ) :
  99         ?>
 100                 .site-header {
 101                         background: url(<?php header_image(); ?>) no-repeat scroll top;
 102                         background-size: 1600px auto;
 103                 }
 104                 @media (max-width: 767px) {
 105                         .site-header {
 106                                 background-size: 768px auto;
 107                         }
 108                 }
 109                 @media (max-width: 359px) {
 110                         .site-header {
 111                                 background-size: 360px auto;
 112                         }
 113                 }
 114         <?php
 115                 endif;
 116
 117                 // Has the text been hidden?
 118                 if ( ! display_header_text() ) :
 119         ?>
 120                 .site-title,
 121                 .site-description {
 122                         position: absolute;
 123                         clip: rect(1px 1px 1px 1px); /* IE7 */
 124                         clip: rect(1px, 1px, 1px, 1px);
 125                 }
 126         <?php
 127                         if ( empty( $header_image ) ) :
 128         ?>
 129                 .site-header .home-link {
 130                         min-height: 0;
 131                 }
 132         <?php
 133                         endif;
 134
 135                 // If the user has set a custom color for the text, use that.
 136                 elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
 137         ?>
 138                 .site-title,
 139                 .site-description {
 140                         color: #<?php echo esc_attr( $text_color ); ?>;
 141                 }
 142         <?php endif; ?>
 143         </style>
 144         <?php
 145 }
 146
 147 /**
 148  * Style the header image displayed on the Appearance > Header admin panel.
 149  *
 150  * @since Twenty Thirteen 1.0
 151  */
 152 function twentythirteen_admin_header_style() {
 153         $header_image = get_header_image();
 154 ?>
 155         <style type="text/css" id="twentythirteen-admin-header-css">
 156         .appearance_page_custom-header #headimg {
 157                 border: none;
 158                 -webkit-box-sizing: border-box;
 159                 -moz-box-sizing:    border-box;
 160                 box-sizing:         border-box;
 161                 <?php
 162                 if ( ! empty( $header_image ) ) {
 163                         echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';
 164                 } ?>
 165                 padding: 0 20px;
 166         }
 167         #headimg .home-link {
 168                 -webkit-box-sizing: border-box;
 169                 -moz-box-sizing:    border-box;
 170                 box-sizing:         border-box;
 171                 margin: 0 auto;
 172                 max-width: 1040px;
 173                 <?php
 174                 if ( ! empty( $header_image ) || display_header_text() ) {
 175                         echo 'min-height: 230px;';
 176                 } ?>
 177                 width: 100%;
 178         }
 179         <?php if ( ! display_header_text() ) : ?>
 180         #headimg h1,
 181         #headimg h2 {
 182                 position: absolute !important;
 183                 clip: rect(1px 1px 1px 1px); /* IE7 */
 184                 clip: rect(1px, 1px, 1px, 1px);
 185         }
 186         <?php endif; ?>
 187         #headimg h1 {
 188                 font: bold 60px/1 Bitter, Georgia, serif;
 189                 margin: 0;
 190                 padding: 58px 0 10px;
 191         }
 192         #headimg h1 a {
 193                 text-decoration: none;
 194         }
 195         #headimg h1 a:hover {
 196                 text-decoration: underline;
 197         }
 198         #headimg h2 {
 199                 font: 200 italic 24px "Source Sans Pro", Helvetica, sans-serif;
 200                 margin: 0;
 201                 text-shadow: none;
 202         }
 203         .default-header img {
 204                 max-width: 230px;
 205                 width: auto;
 206         }
 207         </style>
 208 <?php
 209 }
 210
 211 /**
 212  * Output markup to be displayed on the Appearance > Header admin panel.
 213  *
 214  * This callback overrides the default markup displayed there.
 215  *
 216  * @since Twenty Thirteen 1.0
 217  */
 218 function twentythirteen_admin_header_image() {
 219         $style = 'color: #' . get_header_textcolor() . ';';
 220         if ( ! display_header_text() ) {
 221                 $style = 'display: none;';
 222         }
 223         ?>
 224         <div id="headimg" style="background: url(<?php echo esc_url( get_header_image() ); ?>) no-repeat scroll top; background-size: 1600px auto;">
 225                 <div class="home-link">
 226                         <h1 class="displaying-header-text"><a id="name" style="<?php echo esc_attr( $style ); ?>" onclick="return false;" href="#" tabindex="-1"><?php bloginfo( 'name' ); ?></a></h1>
 227                         <h2 id="desc" class="displaying-header-text" style="<?php echo esc_attr( $style ); ?>"><?php bloginfo( 'description' ); ?></h2>
 228                 </div>
 229         </div>
 230 <?php }