How to add full width header Twentyfifteen WordPress theme

This article was written by in May 25, 2015, & may not be posted on other sites!
Original source url for this article: How to add full width header Twentyfifteen WordPress theme

How to add full width header in Twentyfifteen WordPress theme.
Ok, so WordPress theme Twentyfifteen does already kind of support a type of header but unfortunately not a full width one above the content as expected. Find all built in support for Twentyfifteen under appearance > customize. If you want to add a full width header above the content in Twentyfifteen WordPress theme, this is how to do it:

How to add full width header Twentyfifteen WordPress theme

 

How to add full width header Twentyfifteen WordPress theme

Since Wordrpress theme Twentyfifteen does not support a full width header above the content, we have to add one manually. This is how to add a full width header in Twentyfifteen WordPress theme step by step:

  1. Make sure WordPress is up to date and you actually have the original Twentyfifteen theme installed.
  2. Create a childtheme for the Twentyfifteen theme and activate it. You should never alter the original files in any theme. All info & download on Twentyfifteen childtheme in this article.
    Every step from here on is about altering the files in your childtheme, not the actual Twentyfifteen theme. Copy the files from Twentyfifteen in to your childtheme folder, then upload it to your server.
  3. Open the header.php and add the following code right after the opening body tag. It should look something like this:
    <body <?php body_class(); ?>>
    <div id="custom-header">
    </div>
  4. In your style.css file, add the following code:
    @media screen and (min-width: 59.6875em) {
    #custom-header{
    height: 600px;
    background-color: #bbdbd3;
    position: relative;
    }
    }
  5. In your custom js file, add the following jQuery code: jQuery code file

 

Explaining the code

We have now added a new div above the content with ID #custom-header. This div is 600px in height and will only be displayed to larger screens keeping the responsivness of Twentyfifteen for mobile devices. The jQuery code in step 5 is actually a function from the original Twentyfifteen theme found here: wp-content > themes > Twentyfifteen > js > functions.js

 

Altering the code further on your own?

  • You can fill the div #custom-header with whatever content you like in the header.php file
  • You can alter the CSS to change the height, width, alignment or background / background-image for the #custom-header element.
  • The jQuery function is adapting automatically to the height of your custom header, but if you wish to alter the function further, here are some clues on what we added to the original jQuery code to get you started. Look for the scroll() function:
    How to add full width header Twentyfifteen WordPress theme

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

4 thoughts on “How to add full width header Twentyfifteen WordPress theme

  1. Sandy

    Hi there,
    Great tutorial thanks. And I managed to add a header….well almost 😉
    After following every step as best I could (only step 3 gave me a bit of a head ache), the header showed up on my side. But unfortunately the new header is messing up my sidebar & nav bar. The Sidebar was not visible at first, only when I scrolled down a bit it showed up out of the blue…but then always moved kind of weirdly when I scrolled up and down.
    Any idea why?
    I removed the header again, but I so want a full width header on my new site 😉
    Thanks

  2. Charlie

    Is there any way to get some advice on this procedure?
    I have followed all the steps, including the childtheme upload and the site is still working fine.
    But Im not sure how to get my header image to show on the page?
    Thanks!
    Charlie

  3. haxor Post author

    Add your image as the background image in the CSS:
    @media screen and (min-width: 59.6875em) {
    #custom-header{
    height: 600px;
    background-image: url(‘your-image.jpg’);
    position: relative;
    }
    }

  4. haxor Post author

    Sandy, this tutorial was made for the basic TwentyFifteen theme, did you do anything to your sidebar? Do you have a link to share? The header needs to be 600px in height for the tutorial to work, otherwise you need to alter the js file to get it to work.

Leave a Reply

Your email address will not be published. Required fields are marked *