Last active
January 16, 2016 23:31
-
-
Save neilgee/466d5ad7b35fb6400dfb to your computer and use it in GitHub Desktop.
Twenty Sixteen Full width Header with Background Image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.site-header { | |
background-size: cover !important; | |
min-height: 200px; | |
margin-bottom: 20px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* The template for displaying the header | |
* | |
* Displays all of the head element and everything up until the "site-content" div. | |
* | |
* @package WordPress | |
* @subpackage Twenty_Sixteen | |
* @since Twenty Sixteen 1.0 | |
*/ | |
?><!DOCTYPE html> | |
<html <?php language_attributes(); ?> class="no-js"> | |
<head> | |
<meta charset="<?php bloginfo( 'charset' ); ?>"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="profile" href="http://gmpg.org/xfn/11"> | |
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?> | |
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> | |
<?php endif; ?> | |
<?php wp_head(); ?> | |
</head> | |
<body <?php body_class(); ?>> | |
<div id="page" class="site"> | |
<div class="site-inner"> | |
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentysixteen' ); ?></a> | |
<header id="masthead" class="site-header" role="banner" style="background:url(<?php echo get_header_image()?>) center no-repeat;"> | |
<div class="site-header-main"> | |
<div class="site-branding"> | |
<?php if ( is_front_page() && is_home() ) : ?> | |
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> | |
<?php else : ?> | |
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p> | |
<?php endif; | |
$description = get_bloginfo( 'description', 'display' ); | |
if ( $description || is_customize_preview() ) : ?> | |
<p class="site-description"><?php echo $description; ?></p> | |
<?php endif; ?> | |
</div><!-- .site-branding --> | |
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?> | |
<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button> | |
<div id="site-header-menu" class="site-header-menu"> | |
<?php if ( has_nav_menu( 'primary' ) ) : ?> | |
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php _e( 'Primary Menu', 'twentysixteen' ); ?>"> | |
<?php | |
wp_nav_menu( array( | |
'theme_location' => 'primary', | |
'menu_class' => 'primary-menu', | |
) ); | |
?> | |
</nav><!-- .main-navigation --> | |
<?php endif; ?> | |
<?php if ( has_nav_menu( 'social' ) ) : ?> | |
<nav id="social-navigation" class="social-navigation" role="navigation" aria-label="<?php _e( 'Social Links Menu', 'twentysixteen' ); ?>"> | |
<?php | |
wp_nav_menu( array( | |
'theme_location' => 'social', | |
'menu_class' => 'social-links-menu', | |
'depth' => 1, | |
'link_before' => '<span class="screen-reader-text">', | |
'link_after' => '</span>', | |
) ); | |
?> | |
</nav><!-- .social-navigation --> | |
<?php endif; ?> | |
</div><!-- .site-header-menu --> | |
<?php endif; ?> | |
</div><!-- .site-header-main --> | |
</header><!-- .site-header --> | |
<div id="content" class="site-content"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* add to end of style.css */ | |
/* Make Twenty Sixteen full width header */ | |
.site-inner { | |
max-width: none; | |
} | |
.site-content, | |
.site-footer, | |
.site-header-main { | |
max-width: 1320px; | |
margin: 0 auto; | |
} | |
@media screen and (min-width: 44.375em) { | |
.site { | |
margin: 0; | |
} | |
body:not(.custom-background-image):before, body:not(.custom-background-image):after { | |
height: 0; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php //<- don't add me in | |
add_filter( 'twentysixteen_custom_header_args', 'wpb_new_header_size'); | |
//add your parameters in - https://codex.wordpress.org/Custom_Headers | |
function wpb_new_header_size($array) { | |
$array = array ( | |
'default-text-color' => $default_text_color, | |
'width' => 1600, | |
'height' => 200, | |
'flex-height' => true, | |
'wp-head-callback' => 'twentysixteen_header_style', | |
); | |
return $array; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I used it in Twenty Sixteen theme personalization (work in progress) https://github.com/ooscarr/wp-feunap2016