custom-header.php 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <?php
  2. /**
  3. *
  4. * @package Sketch
  5. */
  6. /**
  7. * Setup the WordPress core custom header feature.
  8. *
  9. * @uses sketch_header_style()
  10. * @uses sketch_admin_header_style()
  11. * @uses sketch_admin_header_image()
  12. */
  13. function sketch_custom_header_setup() {
  14. add_theme_support( 'custom-header', apply_filters( 'sketch_custom_header_args', array(
  15. 'default-image' => '',
  16. 'default-text-color' => '333333',
  17. 'width' => 1092,
  18. 'height' => 400,
  19. 'flex-height' => true,
  20. 'wp-head-callback' => 'sketch_header_style',
  21. 'admin-head-callback' => 'sketch_admin_header_style',
  22. 'admin-preview-callback' => 'sketch_admin_header_image',
  23. ) ) );
  24. }
  25. add_action( 'after_setup_theme', 'sketch_custom_header_setup' );
  26. if ( ! function_exists( 'sketch_header_style' ) ) :
  27. /**
  28. * Styles the header image and text displayed on the blog
  29. *
  30. * @see sketch_custom_header_setup().
  31. */
  32. function sketch_header_style() {
  33. $header_text_color = get_header_textcolor();
  34. // If no custom options for text are set, let's bail
  35. // get_header_textcolor() options: HEADER_TEXTCOLOR is default, hide text (returns 'blank') or any hex value
  36. if ( HEADER_TEXTCOLOR == $header_text_color ) {
  37. return;
  38. }
  39. // If we get this far, we have custom styles. Let's do this.
  40. ?>
  41. <style type="text/css">
  42. <?php
  43. // Has the text been hidden?
  44. if ( 'blank' == $header_text_color ) :
  45. ?>
  46. .site-title,
  47. .site-description {
  48. position: absolute;
  49. clip: rect(1px, 1px, 1px, 1px);
  50. }
  51. <?php
  52. // If the user has set a custom color for the text use that
  53. else :
  54. ?>
  55. .site-title a,
  56. .site-description {
  57. color: #<?php echo $header_text_color; ?>;
  58. }
  59. <?php endif; ?>
  60. </style>
  61. <?php
  62. }
  63. endif; // sketch_header_style
  64. if ( ! function_exists( 'sketch_admin_header_style' ) ) :
  65. /**
  66. * Styles the header image displayed on the Appearance > Header admin panel.
  67. *
  68. * @see sketch_custom_header_setup().
  69. */
  70. function sketch_admin_header_style() {
  71. ?>
  72. <style type="text/css">
  73. .appearance_page_custom-header #headimg {
  74. background: white;
  75. border: none;
  76. font-size: 16px;
  77. }
  78. #headimg h1,
  79. #desc {
  80. }
  81. #headimg .site-branding-wrapper {
  82. border-bottom: 3px solid #eeeeee;
  83. margin: 0 0 27px;
  84. padding: 0 0 24px;
  85. }
  86. #headimg .site-branding-wrapper:before,
  87. #headimg .site-branding-wrapper:after {
  88. content: "";
  89. display: table;
  90. }
  91. #headimg .site-branding-wrapper:after {
  92. clear: both;
  93. }
  94. #headimg .site-branding {
  95. clear: none;
  96. float: left;
  97. margin-bottom: 14px;
  98. max-width: 50%;
  99. }
  100. #headimg h1 {
  101. clear: none;
  102. display: inline-block;
  103. font-family: Lato, Helvetica, Arial, sans-serif;
  104. font-size: 1.75em;
  105. font-weight: normal;
  106. line-height: 1;
  107. letter-spacing: 3px;
  108. margin: 0;
  109. max-width: 60%;
  110. text-transform: uppercase;
  111. vertical-align: middle;
  112. }
  113. #headimg a {
  114. text-decoration: none;
  115. }
  116. #desc {
  117. display: none;
  118. }
  119. #headimg .site-logo {
  120. max-height: 100px;
  121. width: auto;
  122. display: inline-block;
  123. margin-right: 14px;
  124. vertical-align: middle;
  125. }
  126. #headimg .custom-header {
  127. border-radius: 5px;
  128. display: block;
  129. margin: 0 auto;
  130. margin-bottom: 27px;
  131. max-width: 1092px;
  132. height: auto;
  133. }
  134. </style>
  135. <?php
  136. }
  137. endif; // sketch_admin_header_style
  138. if ( ! function_exists( 'sketch_admin_header_image' ) ) :
  139. /**
  140. * Custom header image markup displayed on the Appearance > Header admin panel.
  141. *
  142. * @see sketch_custom_header_setup().
  143. */
  144. function sketch_admin_header_image() {
  145. $style = sprintf( ' style="color:#%s;"', get_header_textcolor() );
  146. ?>
  147. <div id="headimg">
  148. <div class="site-branding-wrapper">
  149. <div class="site-branding">
  150. <?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
  151. <h1 class="displaying-header-text"><a id="name"<?php echo $style; ?> onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
  152. <div class="displaying-header-text" id="desc"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></div>
  153. </div>
  154. </div>
  155. <?php if ( get_header_image() ) : ?>
  156. <img src="<?php header_image(); ?>" alt="" class="custom-header">
  157. <?php endif; ?>
  158. </div>
  159. <?php
  160. }
  161. endif; // sketch_admin_header_image