[Summary view] [Print] [Text view]

   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 }