/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. add_action( 'after_setup_theme', 'twentythirteen_custom_header_setup', 11 ); 
  63.  
  64. /** 
  65. * Load our special font CSS files. 
  66. * 
  67. * @since Twenty Thirteen 1.0 
  68. */ 
  69. function twentythirteen_custom_header_fonts() { 
  70. // Add Source Sans Pro 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() . '/genericons/genericons.css', array(), '3.03' ); 
  75. add_action( 'admin_print_styles-appearance_page_custom-header', 'twentythirteen_custom_header_fonts' ); 
  76.  
  77. /** 
  78. * Style the header text displayed on the blog. 
  79. * 
  80. * get_header_textcolor() options: Hide text (returns 'blank'), or any hex value. 
  81. * 
  82. * @since Twenty Thirteen 1.0 
  83. */ 
  84. function twentythirteen_header_style() { 
  85. $header_image = get_header_image(); 
  86. $text_color = get_header_textcolor(); 
  87.  
  88. // If no custom options for text are set, let's bail. 
  89. if ( empty( $header_image ) && $text_color == get_theme_support( 'custom-header', 'default-text-color' ) ) 
  90. return; 
  91.  
  92. // If we get this far, we have custom styles. 
  93. ?> 
  94. <style type="text/css" id="twentythirteen-header-css"> 
  95. <?php 
  96. if ( ! empty( $header_image ) ) : 
  97. ?> 
  98. .site-header { 
  99. background: url(<?php header_image(); ?>) no-repeat scroll top; 
  100. background-size: 1600px auto; 
  101. @media (max-width: 767px) { 
  102. .site-header { 
  103. background-size: 768px auto; 
  104. @media (max-width: 359px) { 
  105. .site-header { 
  106. background-size: 360px auto; 
  107. <?php 
  108. endif; 
  109.  
  110. // Has the text been hidden? 
  111. if ( ! display_header_text() ) : 
  112. ?> 
  113. .site-title,  
  114. .site-description { 
  115. position: absolute; 
  116. clip: rect(1px 1px 1px 1px); /* IE7 */ 
  117. clip: rect(1px, 1px, 1px, 1px); 
  118. <?php 
  119. if ( empty( $header_image ) ) : 
  120. ?> 
  121. .site-header .home-link { 
  122. min-height: 0; 
  123. <?php 
  124. endif; 
  125.  
  126. // If the user has set a custom color for the text, use that. 
  127. elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) : 
  128. ?> 
  129. .site-title,  
  130. .site-description { 
  131. color: #<?php echo esc_attr( $text_color ); ?>; 
  132. <?php endif; ?> 
  133. </style> 
  134. <?php 
  135.  
  136. /** 
  137. * Style 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. #headimg .home-link { 
  156. -webkit-box-sizing: border-box; 
  157. -moz-box-sizing: border-box; 
  158. box-sizing: border-box; 
  159. margin: 0 auto; 
  160. max-width: 1040px; 
  161. <?php 
  162. if ( ! empty( $header_image ) || display_header_text() ) { 
  163. echo 'min-height: 230px;'; 
  164. } ?> 
  165. width: 100%; 
  166. <?php if ( ! display_header_text() ) : ?> 
  167. #headimg h1,  
  168. #headimg h2 { 
  169. position: absolute !important; 
  170. clip: rect(1px 1px 1px 1px); /* IE7 */ 
  171. clip: rect(1px, 1px, 1px, 1px); 
  172. <?php endif; ?> 
  173. #headimg h1 { 
  174. font: bold 60px/1 Bitter, Georgia, serif; 
  175. margin: 0; 
  176. padding: 58px 0 10px; 
  177. #headimg h1 a { 
  178. text-decoration: none; 
  179. #headimg h1 a:hover { 
  180. text-decoration: underline; 
  181. #headimg h2 { 
  182. font: 200 italic 24px "Source Sans Pro", Helvetica, sans-serif; 
  183. margin: 0; 
  184. text-shadow: none; 
  185. .default-header img { 
  186. max-width: 230px; 
  187. width: auto; 
  188. </style> 
  189. <?php 
  190.  
  191. /** 
  192. * Output markup to be displayed on the Appearance > Header admin panel. 
  193. * 
  194. * This callback overrides the default markup displayed there. 
  195. * 
  196. * @since Twenty Thirteen 1.0 
  197. */ 
  198. function twentythirteen_admin_header_image() { 
  199. $style = 'color: #' . get_header_textcolor() . ';'; 
  200. if ( ! display_header_text() ) { 
  201. $style = 'display: none;'; 
  202. ?> 
  203. <div id="headimg" style="background: url(<?php echo esc_url( get_header_image() ); ?>) no-repeat scroll top; background-size: 1600px auto;"> 
  204. <div class="home-link"> 
  205. <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> 
  206. <h2 id="desc" class="displaying-header-text" style="<?php echo esc_attr( $style ); ?>"><?php bloginfo( 'description' ); ?></h2> 
  207. </div> 
  208. </div> 
  209. <?php } 
.