Make a Full Width Twenty Sixteen Theme Header

Here’s how you can make a full width header with a background image in WordPress’ latest default theme ‘Twenty Sixteen’.

twenty-sixteen-default-header

So above I have just chosen the color scheme as grey and added a header image, which just sits the image below the the site title and menu – maybe you want the image as a background image instead behind the site title and menu and also to go full width. This will utilise the header space.

CSS Containers

First up is to remove the controlling site-inner containers CSS and then set the same max width on the site-content, site-header-main and site-footer. So you’ll need to add this at the end of your style.css

/* 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;
}
}
view raw ts-added-css.css hosted with ❤ by GitHub

Header Markup

Next up is to remove the .header-image div that contains the image and then set a background CSS rule to .site-header so the header image sits behind it still using the uploaded file via the customizer – this uses the get_header_image function. The CSS background rule also is setting the image to not repeat and focuses on the center of the image.

Below is the changed header.php file

<?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">
view raw header.php hosted with ❤ by GitHub

Now it should resemble something like the below – which we still need to add some more CSS to control how it fills the space, how deep you want it and add some margin in front of the content.

twenty-sixteen-background-header

 

Header CSS

.site-header {
background-size: cover !important;
min-height: 200px;
margin-bottom: 20px;
}
view raw header-css.css hosted with ❤ by GitHub

So this is also added in your style.css with the other snippet, the first rule background-size covers the area, the min-height will set the minimum depth this will depend on how much of the image you want to show and finally just a bit of margin to separate the main content.

Now you should have something like the below.

twenty-sixteen-desktop

Desktop view

twenty-sixteen-mobile

Mobile View

 

 

Changing the Default Header Size

You can also change the Twenty Sixteen default header image size by adjusting the width and height values in the /inc/customizer.php file from line 53

 add_theme_support( 'custom-header', apply_filters( 'twentysixteen_custom_header_args', array(
 'default-text-color' => $default_text_color,
 'width' => 1600,
 'height' => 200,
 'flex-height' => true,
 'wp-head-callback' => 'twentysixteen_header_style',
 ) ) ); 

Adjust the width and height for a new image to suit, or if you don’t want to change the original theme file you can use the filter twentysixteen_custom_header_args and add the change in your functions.php

<?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;
}

You certainly want to do it this way if you have a parent/child set up so you preserve your changes on any parent update.

 

Demo site here.

 

34 Comments

  1. MO Abdali on December 24, 2016 at 9:18 am

    Thank you, it work for me

  2. Leva mundos on October 19, 2016 at 1:52 pm

    Hi!

    Great tutorial, and nice codes for turning over a basic theme to a nice theme. The code worked but i can’t change the height on the header or the menu, neither in the PHP or in the style.css under the site-header. Ive tried margin-bottom, top bottom, height, min and max height but nothing seems to affect it.

    How do i do this?

    Again, great tutorial!

    • Neil Gowran on October 20, 2016 at 10:40 pm

      The header height can be changed with by changing the min-height value


      .site-header {
      background-size: cover !important;
      min-height: 600px;
      margin-bottom: 20px;
      }

      For the menu height – I would change the padding on the link tag

      @media screen and (min-width: 56.875em)
      .main-navigation a {
      outline-offset: -8px;
      padding: 1.5em 0.875em;
      white-space: nowrap;
      }

  3. sjoerd vogelzang on September 18, 2016 at 12:00 pm

    my problem is exactly as in the demo. Used all the full width codes but still (like in the demo) the header is wider than the content.
    How to get this the same ??

  4. kietygory on September 14, 2016 at 11:32 pm

    Thanks for the code for header image. It works fine.

    I want the feature image to have full width, but cannot get it. Can you help me?

    My site is: http://www.scandinaviansolution.com

    WordPress topic is here:
    https://wordpress.org/support/topic/twenty-sixteen-full-width-featured-image/

  5. Bastian on August 30, 2016 at 4:37 pm

    Hi Neil,

    thank you for sharing your skills.

    Actually i want to redesign my familyblog based on the Twentysixteen Theme.
    I did everything like you explain it, but with that functions.php my Site just show a “white wall” 🙂


    $default_text_color,
    'width' => 1600,
    'height' => 200,
    'flex-height' => true,
    'wp-head-callback' => 'twentysixteen_header_style',
    );
    return $array;

    ?>

    Can you explain me the error?

    Regards from Germany,
    Bastian

  6. Julie on July 12, 2016 at 9:05 pm

    Hi Neil,

    I love the ability to have a full-width header in 2016. Thanks for that!

    The issue I have is that I had to tweak it to get the menu under the header and now I have a full-width header that is not responsive. I posted in the WorPress.org forum:
    https://wordpress.org/support/topic/how-to-move-menu-below-header-image?replies=7#post-8631789

    but have not had any responses. I credited your code as having got me part way. Any help to make it responsive would be appreciated!

  7. Moleboge Matotoka on June 28, 2016 at 12:26 pm

    Thank you, this worked out perfectly for me. But the site-header then hides my site-logo. Any ideas what i can do to change that?

    • Tina Dubinsky on November 11, 2016 at 12:26 pm

      Hi Moleboge,

      In the header.php file, add

      Line 31

      after

      Line 30

      I compared the old header.php with the new header.php and saw this was missing. Adding it back worked for me and hasn’t caused any issues, however you might want to check if it looks okay on other devices such as mobile (I haven’t checked yet and it may be why it was left out).

      Neil – Thanks for the code to make a full width header. It’s much appreciated.

  8. sjjstar on June 22, 2016 at 3:21 am

    I’m wondering if anyone can help me. I’m trying to customize my header image load on one specific page where all the other pages have the header image random from a choice of four different options thorough the customizer. How do I load one specific header image on just one of the pages so the images are not random on this page but they are random on all of the other pages?

  9. Angela on April 24, 2016 at 5:52 pm

    Hi. This worked beautifully, but where would I put the code in my child theme to MOVE the menu below the header image?
    Thanks!

    • Raielene Langdon on May 12, 2016 at 8:47 pm

      I ran into the same issue, Angela. Did you find a solution?

  10. Kashif Asrar on April 14, 2016 at 8:42 am

    Thank You very much , the tutorial is very much helpful for novices like me , you can watch my blog as well.

    It would be more convenient if you had added that slider in your tutorial , at the same place with same condition , i hope i make sense.

    Thanks and Regards,

  11. Florian Neukirchen on April 4, 2016 at 7:16 am

    Thanks a lot, this really helped me to tweak the design of my Website to look the way I wanted.

  12. Karen Rempel on March 27, 2016 at 10:52 pm

    Thank you, your instructions were very helpful. I got the exact results you promised, and am very pleased!

    • Neil Gowran on March 28, 2016 at 5:01 am

      Great – glad it worked out for you!

  13. Andrea Marzano on March 19, 2016 at 4:51 pm

    Hi there,

    I followed all the instructions but I cannot make the header’s height smaller. help please….

  14. Mohammad on February 2, 2016 at 10:25 am

    Thank you very much, it worked like a charm and you helped me understand how headers work.
    Things I modified: is moving the (center no-repeat) attributes of .site-header from the header.php to the css file. Also I used 100vh as the height of .site-header because I want the header to cover the whole screen, please advise if you think there is a better practice to achieve that
    Also I don’t understand why did you limit the width of .site-header-main to 1320px, isn’t it better to use 100% or 100 vw ?

    • Neil Gowran on February 2, 2016 at 10:40 am

      Hi Mohammad – thanks for the feedback -yes moving the background position value to CSS is the cleaner way, I limited the width of .site-header-main purely for my own aesthetic reasons, sometimes content spread full width over a certain size seems unbalanced, all subjective though 🙂

  15. FRUSTATED SOMEONE on January 24, 2016 at 5:30 am

    i dont understand. all this is like japanese jargon.
    why wordpress being more than 20% of the internet, can’t be more USER FRIENDLY.

    i mean, drag, drop, adjust, drag, adjust, click,click this on, click that off. ready, click publish, bam lets got out dinner with s.o.
    simple , basic stuff,

    wordpress must deliver a simple drag and drop , boxed layout. c,mon where in 2016!!!!!!! not evolution at all
    seems that this is all prehistoric computer era science.

    WHERE I PUT THOSE CSSSSSSSSSS STUFFF “css containers” WHERE ARE THOSE THINGS
    WHERE DO I CLICK TO PUT THAT &^%^&%^&%^& CODE

    whyyyyyy

    • Neil Gowran on January 24, 2016 at 6:38 am

      You always have other easier options – you can use Square Space or Wix – but you will run into issues also when you want to change something that the theme or template can’t do out of the box – this post and blog in general is for people that understand a bit of html, css and php.

      If you don’t understand some of those things ( and you shouldn’t have to) just pay someone to do the work for you.

      It’s like any trade if you are not a mechanic don’t go messing with your engine.

  16. Rick on January 11, 2016 at 6:35 pm

    Thanks Niel!

    Unlike what is shown on your tutorial, the site header appears in the middle of my background image.

    How is the site header moved to the top?

  17. Alex de Vulder on January 11, 2016 at 12:16 pm

    Hi,

    I’ve done everything shown in your post but the header is still tyhe same width.
    Like here: http://www.rikkivanderschoot.com/wp/

    Can you tell me please what i’ve done wrong? TIA

    Alex

    • Alex de Vulder on January 11, 2016 at 6:35 pm

      I’ve already resolved this item. Thank you.

  18. dbjdbj on December 27, 2015 at 1:26 pm

    Hi,

    All is a dandy theme is great but…
    Layout is somewhat “hopelessly” narrow. Also in 2016 “single view” .entry-footer “goes” left of .entry-content.
    Like here: http://dbjdbj.org/2015/06/08/what-we-exactly-do-for-you/
    Which all makes 2016 almost unusable for 2 column “page builder” layouts, and a such.
    My “fear” is to change this involves non-trivial page.php , production.

    New “full width” page/post template will solve all of this.

    Any isntant cook book recipe perhaps, would be nice 🙂

  19. موفقیت on December 26, 2015 at 1:25 pm

    It was good thanks

  20. Sean Vandenberg on December 26, 2015 at 5:57 am

    Cool, Neil. I hadn’t actually check out Twenty Sixteen yet – looks pretty nice! Good post, dig the PHP skills.

    • Neil Gee on December 26, 2015 at 6:07 am

      Thanks Sean, most of the changes are CSS but yes there are some important PHP functions for the header in there – TwentySixteen is a well designed mobile first theme but I needed to adjust the header for one of my projects.

Leave a Comment





%d bloggers like this: