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

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