SHARE
TWEET

custom-header.php

a guest Nov 4th, 2013 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.  
  107. /*              .site-header {
  108.                         background: url(<?php header_image(); ?>) no-repeat scroll top;
  109.                         background-size: 1600px auto;
  110.                 } */
  111.  
  112. /* Customizing header image to fit various sizes : */
  113.  
  114.                 .site-header {
  115.             background: url(‘http://ensemblepourviroflay.org/i/banner_1600px.png’) no-repeat scroll top;
  116.         }
  117.  
  118.  
  119.  
  120.         @media (max-width: 1440px){
  121.  
  122.             .site-header {
  123.  
  124.             background: url(‘http://ensemblepourviroflay.org/i/banner_1440px.png’) no-repeat scroll top;
  125.  
  126.                 }
  127.  
  128.         }
  129.  
  130.  
  131.  
  132.         @media (max-width: 1366px){
  133.  
  134.             .site-header {
  135.  
  136.             background: url(‘http://ensemblepourviroflay.org/i/banner_1366px.png’) no-repeat scroll top;
  137.  
  138.                 }
  139.  
  140.         }
  141.  
  142.  
  143.         @media (max-width: 1280px){
  144.  
  145.             .site-header {
  146.  
  147.             background: url(‘http://ensemblepourviroflay.org/i/banner_1280px.png’) no-repeat scroll top;
  148.  
  149.                 }
  150.  
  151.         }
  152.  
  153.  
  154.         @media (max-width: 1152px){
  155.  
  156.             .site-header {
  157.  
  158.             background: url(‘http://ensemblepourviroflay.org/i/banner_1152px.png’) no-repeat scroll top;
  159.  
  160.                 }
  161.  
  162.         }
  163.  
  164.  
  165.         @media (max-width: 1024px){
  166.  
  167.             .site-header {
  168.  
  169.             background: url(‘http://ensemblepourviroflay.org/i/banner_1024px.png’) no-repeat scroll top;
  170.  
  171.                 }
  172.  
  173.         }
  174.  
  175.  
  176.         @media (max-width: 800px){
  177.  
  178.             .site-header {
  179.  
  180.             background: url(‘http://ensemblepourviroflay.org/i/banner_800px.png’) no-repeat scroll top;
  181.  
  182.                 }
  183.  
  184.         }
  185.  
  186.  
  187.         @media (max-width: 600px){
  188.  
  189.             .site-header {
  190.  
  191.             background: url(‘http://ensemblepourviroflay.org/i/banner_600px.png’) no-repeat scroll top;
  192.  
  193.                 }
  194.  
  195.         }
  196.  
  197.  
  198.         @media (max-width: 400px){
  199.  
  200.             .site-header {
  201.  
  202.             background: url(‘http://ensemblepourviroflay.org/i/banner_400px.png’) no-repeat scroll top;
  203.  
  204.                 }
  205.  
  206.         }
  207.      
  208.  
  209.  
  210.         <?php
  211.                 endif;
  212.  
  213.                 // Has the text been hidden?
  214.                 if ( ! display_header_text() ) :
  215.         ?>
  216.                 .site-title,
  217.                 .site-description {
  218.                         position: absolute;
  219.                         clip: rect(1px 1px 1px 1px); /* IE7 */
  220.                         clip: rect(1px, 1px, 1px, 1px);
  221.                 }
  222.         <?php
  223.                         if ( empty( $header_image ) ) :
  224.         ?>
  225.                 .site-header .home-link {
  226.                         min-height: 0;
  227.                 }
  228.         <?php
  229.                         endif;
  230.  
  231.                 // If the user has set a custom color for the text, use that.
  232.                 elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
  233.         ?>
  234.                 .site-title,
  235.                 .site-description {
  236.                         color: #<?php echo esc_attr( $text_color ); ?>;
  237.                 }
  238.         <?php endif; ?>
  239.         </style>
  240.         <?php
  241. }
  242.  
  243. /**
  244.  * Style the header image displayed on the Appearance > Header admin panel.
  245.  *
  246.  * @since Twenty Thirteen 1.0
  247.  *
  248.  * @return void
  249.  */
  250. function twentythirteen_admin_header_style() {
  251.         $header_image = get_header_image();
  252. ?>
  253.         <style type="text/css" id="twentythirteen-admin-header-css">
  254.         .appearance_page_custom-header #headimg {
  255.                 border: none;
  256.                 -webkit-box-sizing: border-box;
  257.                 -moz-box-sizing:    border-box;
  258.                 box-sizing:         border-box;
  259.                 <?php
  260.                 if ( ! empty( $header_image ) ) {
  261.                         echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';
  262.                 } ?>
  263.                 padding: 0 20px;
  264.         }
  265.         #headimg .home-link {
  266.                 -webkit-box-sizing: border-box;
  267.                 -moz-box-sizing:    border-box;
  268.                 box-sizing:         border-box;
  269.                 margin: 0 auto;
  270.                 max-width: 1040px;
  271.                 <?php
  272.                 if ( ! empty( $header_image ) || display_header_text() ) {
  273.                         echo 'min-height: 230px;';
  274.                 } ?>
  275.                 width: 100%;
  276.         }
  277.         <?php if ( ! display_header_text() ) : ?>
  278.         #headimg h1,
  279.         #headimg h2 {
  280.                 position: absolute !important;
  281.                 clip: rect(1px 1px 1px 1px); /* IE7 */
  282.                 clip: rect(1px, 1px, 1px, 1px);
  283.         }
  284.         <?php endif; ?>
  285.         #headimg h1 {
  286.                 font: bold 60px/1 Bitter, Georgia, serif;
  287.                 margin: 0;
  288.                 padding: 58px 0 10px;
  289.         }
  290.         #headimg h1 a {
  291.                 text-decoration: none;
  292.         }
  293.         #headimg h1 a:hover {
  294.                 text-decoration: underline;
  295.         }
  296.         #headimg h2 {
  297.                 font: 200 italic 24px "Source Sans Pro", Helvetica, sans-serif;
  298.                 margin: 0;
  299.                 text-shadow: none;
  300.         }
  301.         .default-header img {
  302.                 max-width: 230px;
  303.                 width: auto;
  304.         }
  305.         </style>
  306. <?php
  307. }
  308.  
  309. /**
  310.  * Output markup to be displayed on the Appearance > Header admin panel.
  311.  *
  312.  * This callback overrides the default markup displayed there.
  313.  *
  314.  * @since Twenty Thirteen 1.0
  315.  *
  316.  * @return void
  317.  */
  318. function twentythirteen_admin_header_image() {
  319.         ?>
  320.         <div id="headimg" style="background: url(<?php header_image(); ?>) no-repeat scroll top; background-size: 1600px auto;">
  321.                 <?php $style = ' style="color:#' . get_header_textcolor() . ';"'; ?>
  322.                 <div class="home-link">
  323.                         <h1 class="displaying-header-text"><a id="name"<?php echo $style; ?> onclick="return false;" href="#"><?php bloginfo( 'name' ); ?></a></h1>
  324.                         <h2 id="desc" class="displaying-header-text"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></h2>
  325.                 </div>
  326.         </div>
  327. <?php }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top