[Summary view] [Print] [Text view]

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