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

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