How To Add A Full Width Header In Genesis

I really like the Genesis themes. They offer a lot of functions out of the box that other themes would require plugins for.  They also look very nice and are responsive.  This means that all you have to do is upload the theme and your website will work on laptop, tablet, and mobile without any monkeying around.

The problem with Genesis themes is that it’s a real pain to modify certain elements without changing the code of the theme.  One of these elements that I have had a real problem with was the header.

The theme that I use is Metro Pro. On Metro Pro, it allows you to upload a custom image that is limited to 270 x 80 pixels.  I don’t know about you, but that’s just not cutting it. I could make a small image to put in there but if it’s a choice between that and the default text image, I’ll go with the text image because I think it looks cleaner.

What I want is a full screen header that is responsive. On Metro Pro, the header dimensions are 1068 x either 200 or 300 pixels.

What I tried

I went through a bunch of different methods to change my header to the full width of the menu. First, I tried to monkey with making a graphic at the default size.  It’s so small though so nothing I made ever worked out.

Second, I tried to mess with the actual code of the site using the editor under the appearance tab on the wordpress dashboard.  I must have messed something up because after I hit save, it completely broke my site and I had to upload a previous database file to get the site back up and running.

Next, I tried to upload a header using a plugin that I found. This didn’t work at all so I just erased the plugin.

Solutions

Finally, I sat down and dedicated a good chunk of time to dealing with this issue. I tried to search for other people having the same problem and it seems to be a big issue, but the problem was that the solutions weren’t for responsive headers.

I needed a responsive header.  Why do it at all if it doesn’t work across all devices?

I went to the level of going to a Philadelphia WordPress Meetup to see what other people said. They gave me some good advice, but ultimately didn’t work. To be fair to them though, they didn’t discuss the matter at length with me 1 on 1.

I was just about to give up when I stumbled upon a site called keypresswp.com.  The author is a gentleman named Tom who wrote a whole post breaking down the different ways to do a header. I was only interested in a full screen responsive header. Thankfully he covers this.  Tom’s page is also filled with a bunch of other articles tackling Genesis issues, so you should absolutely check out his page.

The Method

One thing the WordPress Meetup people told me was that I should get some kind of FTP software to use to upload the changes to the files of my site. Of course, I’m a stubborn prick and decided that was too complicated.  Yes you should use FTP software to do this, but no you don’t have to. I just went through the WordPress editor found under the appearance tab on the left side of the dashboard.

Step 1:

Disable the header image in the functions.php by commenting out or deleting this specific code

//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘width’ => 270,
‘height’ => 80,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false
) );

Personally, I just deleted the code and it worked fine.

Step 2:

Add this code to the bottom of your functions.php.

/**
* Filter the genesis_seo_site_title function to use an image for the logo instead of a background image
*
* The genesis_seo_site_title function is located in genesis/lib/structure/header.php
* @link http://blackhillswebworks.com/?p=4144
*
*/

add_filter( ‘genesis_seo_title’, ‘bhww_filter_genesis_seo_site_title’, 10, 2 );

function bhww_filter_genesis_seo_site_title( $title, $inside ){

$child_inside = sprintf( ‘<a href=”%s” title=”%s”><img src=”‘. get_stylesheet_directory_uri() .’/images/logo.png” title=”%s” alt=”%s”/></a>’, trailingslashit( home_url() ), esc_attr( get_bloginfo( ‘name’ ) ), esc_attr( get_bloginfo( ‘name’ ) ), esc_attr( get_bloginfo( ‘name’ ) ) );

$title = str_replace( $inside, $child_inside, $title );

return $title;

}

Step 3:

Right here you should have your functions.php handled.  Hit Save at the bottom of the screen.  If you did everything correctly, or are using FTP software, it should save fine.  If you messed something up, it may break your site.  If that’s the case you’re going to have to log into your hosting account and upload the last save file for your site they have.  That will get you off the white screen of death and able to log back into your dashboard.

Step 4:

Head over to your style.css file and add this code to the bottom.

.header-image .site-description, .header-image .site-title a {
text-indent: 0;
}

.title-area {
width: 100%;
}

.header-image .site-title, .header-image .title-area {
min-height: 0;
}

.header-image .site-title a {
max-width: none;
min-height: 0;
}

.site-title a, .site-title a:hover {
background: transparent;
}

.site-title img {
vertical-align: top;
}

Step 5:

Save your file.  Again, if you did this correctly you’ll be good.  If you messed something up here, you may get the white screen of death again.  Go upload your last save file again and figure out what you messed up and fix it.

Step 6:

At this point the code of your site should be good to go.  The only thing left to do is upload an image to your site’s files.  When I first was trying this out I thought that you did this through the media tab on the left hand side of the dashboard.  That is not correct. You have to go into the image directory of your theme and upload your file there.

According to the code I have above, you should name your file logo.png.  If the name of your file is something else, you will have to modify the code to reflect that change.  It’s up to you what you want to do, but I just made it less complicated by naming the file logo.png.

As for image size, the width of the menu on Metro Pro is 1068 pixels.  I have made two image sizes for my sites.  One of them is 1068 x 200 pixels that you can find here.  You’ll notice that the header fits very well.  I have also used 1068 x 300 pixels here.  You’ll see that if you go with a certain height on your image, there will be a theme color border around the image.  In my case it was green.

I happen to like that theme color border, but you may not.  If you don’t like it, either go with 200 pixels or modify the code slightly to change that.  I’m not 100% sure how to do that to be honest but I believe it has something to do with the “buffering”.

Another thing to consider when choosing the size of your header is how much of your site shows “above the fold”.  200 pixels high seems to work better here as you can see more content without having to scroll down.  300 pixels seems a bit too big as the header takes up almost half the screen on my 13 inch laptop. Again, you decide what’s best for you.

If you are using FTP software, just upload the logo.png file to the images folder under themes in your account. If up to this point you haven’t been using FTP software, there’s a way to do this through your browser as well.  You have to log into your hosting account and use the cpanel to upload the file.

I use Bluehost as my hosting.  If you use some other hosting, there will be slight differences to what I’m about to say.

On cpanel, under file management, hit the file manager button.

 

Next a dialog box comes up.  Hit Ok.  It will bring you to the files of your sites.  On the left hand side, click on the folder of the site you want to add files to.  Then you just drill down through the folders to find the right spot.  Click on wp-content, then themes, then metro-pro, then images.  Once here, hit the upload button on the top menu.

 

Now just upload your logo.png file.

Once you have done this, go to your site and hit refresh.  Your new fancy full screen header should be showing.

Congrats.

Common Questions

I need to point out that I have Metro Pro on my sites.  I have experience working with Metro Pro and a little with Streamline Pro. If you have a different Genesis theme installed, you may have to do small adjustments to the code above to get a full screen header to work. This may include a different width for your header. Experiment.

You may find that there is something off about your specific header.  I’m not a big expert in code.  I am just someone who found a solution and messed around a little to get it to work.  Try and mess around with your code and get it to work for you.

I have a bunch of sites that I use to play around with the code. That way, if something gets really messed up, it’s not my main site that is going down.  So do all your experiments on a site you own that you don’t care about.  You could also just use FTP software so that you can easily fix anything or revert to old files.

If you have any questions, I’ll do my best to answer them below in the comments.

Conclusion

Genesis has some really good themes to use, but having a full width header is one of many things you can do to make your theme stand out. Play around, and customize your theme.

If you have no idea what I’m talking about and want to get a blog of your own, head over to this post explaining how to do that.

-Tate

Check me out on Twitter
Follow @Tatetime