Add Header Image Logo To Genesis 2.0 Sample Theme

The new Genesis 2.0 HTML 5 enabled Sample child theme is not only free, its become very popular. Its a fairly minimalistic theme however you can add support for more functions fairly easily.

One feature it doesn’t include, is a built in Custom Header page which many other child themes built on Genesis already include by default.

In many cases, you don’t really need a custom header uploader to add an image however i’ll provide the code which adds one to this theme as another option.

Upload Logo or Header To Images Folder

Firstly, lets look at the easiest way to add your logo or another image in the header of the Sample child theme.

On Line 889 on this themes style.css file you’ll find the CSS which effects the logo image already included in the images folder.

/* Logo, hide text */

.header-image .site-header .wrap {
	background: url(images/logo.png) no-repeat left;
	padding: 0;
}

This makes adding your own logo super easy. Simply upload your image to your images folder and overwrite the default image named logo using a .png extension.

Also make sure you have selected image logo in your Genesis > Theme Settings > Header settings.

header image logo

The default size for the logo is 360px width by 164px height.

logo images folder

No CSS or PHP coding needed.

How about if we change the size and use a image which is 320px width by 164px height.

logo default css

Works fine also.

And it even works o.k for a logo which is less than 164px in height.

logo smaller height

But how about if we use a full width header image which is 1139px width x 164px height? Still works well as long as the header image is named logo with a .png file extension.

header image full width

Lets now look at using PHP code to add a Custom Header page for logos and header images.

Change Header Height

If your header image height is larger than the default, you will need to modify the value for the height in the CSS code on Line 895 on your child themes style.css file.

.header-image .site-title a {
	float: left;
	min-height: 164px;
	width: 100%;
}

You’ll need to do this regardless of whether you use the pure CSS method or PHP code to add your header image.

Add Custom Header Page Using PHP Code

add_theme_support( 'custom-header', array(
	'default-text-color'     => 'ffffff',
	'header-selector'        => '.header-image .site-header .wrap',
	'height'                 => 164,
	'width'                  => 320,
) );

The dimensions used in this code need to match the width and height of the image you upload or the function will force you to crop the image before uploading.

Lets look at a very simple example. If you changed the values in the above PHP to 1139 x 164 and try to upload an image which is 1139 x 100px, this is what happens.

Crop Header Image

add_theme_support( 'custom-header', array(
	'default-text-color'     => 'ffffff',
	'header-selector'        => '.header-image .site-header .wrap',
	'height'                 => 164,
	'width'                  => 1139,
) );

So that’s an easy fix as you simply make sure the image is exactly the same size as the values in the PHP code for width and height.

How about if you want your logo to display on the far left of your header? You can do this by editing the CSS code in your style sheet or use PHP code in your child themes functions file.

If you remove the line of PHP code which includes the headers like these:

'header-selector'        => '.header-image .site-header .wrap',

Then you can move your logo over to display from the far left of your site.

add_theme_support( 'custom-header', array(
	'default-text-color'     => 'ffffff',
	'height'                 => 164,
	'width'                  => 320,
) );

And here’s the result:

logo no css

How about adding a full width header image which extends from one side of the site to the other?

If you upload an image to your images folder which is wider than 1139px it won’t display full width. Here’s an image which is 1600px x 164px that i added to the images folder and named it logo.

logo images file

To make this work, you can use this PHP code and change the value for the width as well as removing the line of code for the header selectors:

add_theme_support( 'custom-header', array(
	'default-text-color'     => 'ffffff',
	'height'                 => 164,
	'width'                  => 1600,
) );

And here’s the result when adding the new full width image using the Custom Header page which the code creates.

full width header

The only problem with this method is you’ll need to make sure the logo or header image text in your image is aligned center so it looks perfect when viewed on different sized screens.

Learn more about How To Add Full Width Images In Any StudioPress Themes.

How About Different Header Images Of Different Sizes

You can also use different header images on different pages of your site even if they’re not the same size.

Posts Related To The Genesis Sample Themes Header

Options for Other Themes

Never Miss a Tip from Brad Dalton

Get my latest web design tutorials, elegant coding solutions & useful tips.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

  1. Michael says

    EDIT: Do you think there’s any easy way to make the theme keep both the background and image logo in the header [not background]?

  2. Michael says

    Brad, thank you for the tutorial. I’m using 2.1.2 Genesis Sample Theme with support for genesis.custom.header so I can upload the logo file directly in the admin area. In my next step I’m trying to add background to the header area only from an image file in CSS (I can’t do that from the admin area – background options are limited to the entire site). I’m doing this by adding the last line of code with the background property.

    #header {
    	border-bottom: 2px solid #1e1e1e;
    	min-height: 120px;
    	overflow: hidden;
    	padding-bottom: 32px;
    	padding-bottom: 2rem;
    	background: url(''http://localhost/mojaeme/header-background.png')
    	repeat top left;
    	}

    With this code background doesn’t display. Oddly, it does display when I change header from image to text in the admin area. Do you think there’s any easy way to make the theme keep both the background and image logo in the background?

    Let me just mention that I tried removing support for genesis.custom.header so that I could control both logo and header background from CSS. With my limited skills I could only get as far as displaying the background – I also tried the code from this tutorial to get the logo to show up but with no effect. How would you go about this problem?

    • Brad Dalton says

      #header only works for I.D selectors
      .site-header is the new class for the header.

      SP Pro themes now use class selectors rather than I.D selectors.

      That’s the only problem with your CSS.

      Also, you don’t need to use the full URL to your image. You can use url(‘images/image.png’);

      As far as using 2 images, i would need to test that to find out what the solutions are.

      Here’s is what works:

      .site-header {
          background-image: url('images/header-background-image.jpg');
          background-repeat: no-repeat;
          background-size: 100%;
      }
      
      .header-image .site-header .wrap {
      	background: url(images/logo.png) no-repeat left;
      	padding: 0;
      }
      • Michael says

        Thank you for a quick reply. I went ahead and added this code to CSS file on a fresh install before touching anything else (including functions.php which has built in support for genesis-custom-header). It fails to display either header or background. What am I missing? This is what the header section looks like now:

        #header {
        	border-bottom: 2px solid #1e1e1e;
        	min-height: 120px;
        	overflow: hidden;
        	padding-bottom: 32px;
        	padding-bottom: 2rem;
        }
        
        .site-header {
            background-image: url('images/header-background.png');
            background-repeat: no-repeat;
            background-size: 100%;
        }
        
        .header-image .site-header .wrap {
        	background: url(images/logo.png) no-repeat left;
        	padding: 0;
        }
        
        #title {
        	line-height: 1;
        	margin: 40px 0 8px;
        	margin: 2.5rem 0 0.5rem;
        }
        
        .header-image #title {
        	margin: 0;
        }
        
        #description {
        	line-height: 1.25;
        }
        
        .header-full-width #title,
        .header-full-width #title a,
        .header-full-width #title-area {
        	width: 100%;
        }
        
        .header-image #title,
        .header-image #title a,
        .header-image #title-area {
        	display: block;
        	float: left;
        	min-height: 120px;
        	overflow: hidden;
        	text-indent: -9999px;
        	width: 50%;
        }
        
        .header-image #description {
        	display: block;
        	overflow: hidden;
        }
        • Michael says

          update: My code also fails to display both header image and background after removing support for genesis-custom-header from functions.php

        • Brad Dalton says

          Your code doesn’t work because, as previously mentioned, I.D # selectors do not work on HTML 5 themes.

          As far as displaying both your logo and header background image after removing support for the custom header, read this and you’ll see that’s correct either.

          • Michael says

            Thank you Brad – I really appreciate your answers and the new tutorial. Still – I couldn’t make it work on the fresh install of 2.1.2 Genesis Sample Theme just by following your steps.

            It looks like I’m trying to bite more than I can chew with this customization. Or there is something (possibly obvious to a trained eye) along the way I’m missing. This is really frustrating and makes me doubt if I really want to stick with Genesis if relative simple jobs require such heavy lifting.

          • Michael says

            Brad, thank you for your generous offer. I decided to let it sit and come back to the problem further down the road. It’s not that I don’t like Genesis. I’m just struggling on a steep learning curve is all.

  3. thierry says

    Hey Brad,

    I tried the 1600×164 logo to display on my site by adding the code you provide into the custom css plugin but it doesn’t display correctly, it’s to narrow and not wide enough.

    Thanks in advance

    • Brad Dalton says

      The screenshot shows exactly what the code produces.

      If it doesn’t in your case, the problem is at your end, not with my code.

      • thierry says

        Don’t be offended, i didn’t mean that your code is at fault, i just addressed it so i could get some help. I’m new to CSS and a little lost :-)

        • Brad Dalton says

          Thierry.

          Making it clear so there’s no confusion so you can resolve the issue as quickly as possible.

          • Brad Dalton says

            The CSS you have added/modified in your style sheet is this:

            .header-image .site-title > a {
                  background: url(images/logo.png) no-repeat left;
                  float: left;
                  min-height: 60px;
                  width: 100%;
            }

            The CSS i provided in this tutorial is this:

            .header-image .site-header .wrap {
                 background: url(images/logo.png) no-repeat left;
                 padding: 0;
            }

            You also need to modify the values in the CSS for the height to match your header image.

  4. Jeremy says

    It does not work. I’ve replaced the logo.png file with my own logo with same file name, and the header option in the admin panel is set correctly to Image Logo. This should work, but the default genesis logo still shows up. I’ve cleared my browser cache and turned off my site caching, and still it doesn’t work. Working with Studiopress is proving to be counterintuitive and counterproductive.

    • Brad Dalton says

      Hello Jeremy.

      Firstly, your email is invalid as i tried to send you an email and it does not exist according to Google.

      The method in this post works perfectly as the screenshot proves. You must have missed something.

      If you have other code or a plugin which effects the logo or header, it maybe interfering with the standard method of changing the logo.

      Not sure how the default logo would display if you have deleted it and replaced it with your own.

  5. Nelson says

    How do you add a smaller image (300×100) without having so much white space above the image and the nav?

  6. Tyler says

    Hi Brad,
    Thank you for this easy to use demo.
    I too am using the Genesis Child theme. I have tried numerous ways to get my logo to appear.
    If I do it your way, it “disappears” but something is there because when I hover over it, I can click to my homepage, in Firefox. In Safari and iPhone, it shows Genesis default logo.
    If I insert my logo as a URL (other blogs suggest this) it appears on Firefox but not in Safari or iPhone.
    When I first tried the URL method, I was using a SVG file and thought may have be the porblem. Then I used a PNG version of my logo…
    Could you please help?

    • Brad Dalton says

      Tyler

      The screenshots in this post are based on the exact instructions in this post so they all work perfectly otherwise i wouldn’t be able to display the different image sizes in the header.

      If you modify the code incorrectly, it will not work.

      Looking at your CSS, i see you have changed the file name of your logo

      .header-image .site-header .wrap {
      	background: url(images/logops.png) no-repeat left;
      	padding: 0;
      }

      I never mentioned changing the file name Tyler.

      Not sure what else you have changed.

      Please reverse all your code changes and follow the instructions on the post as they are tested and work exactly as the screenshots prove.

      • Tyler says

        Thank you Brad, I changed everything back as you suggested:

        /* Logo, hide text */
        
        .header-image .site-header .wrap {
        	background: url(images/logo.png) no-repeat left;
        	padding: 0;
        }

        And now it’s back to showing Genesis default logo.

        In my media library, I uploaded my logo which was saved as logo.png. And to confirm, I did switch to logo in Genesis theme settings.
        I must be missing something super obvious.
        Thanks again. Really appreciate it!

        • Brad Dalton says

          The 1st solution simply requires you to remove the default logo’s from your images folder and replace them with your own using exactly the same file name and extension.

          Otherwise you can add support for a custom header and use the new page added under the Appearance menu.

          When i checked your site, your site title and description where displaying meaning you have either added support for a custom header using PHP code or failed to change the Theme Settings > Header > Use for site title/logo > Dynamic Text to Image Logo.

          Try it on a fresh install. Rename the theme folder and theme name in the style.css file before activating.

          And don’t forget, you may not see any changes unless you flush your plugins and/or any server side caching as well as your browser cache.

  7. Jennifer says

    Hi there. I’m using the Genesis Sample Child theme. I’d like the bottom of my header logo and bottom of my header sidebar widgets to line up and sit closer to the top of the primary nav bar. The WP site is: http://openlearning.upenn.edu/; however, it’s currently under construction with a redirect to the existing site). I have tried various php and/or css snippets found elsewhere on this excellent resource (it’s already answered several other challenges for me), but this one is proving to be a real head scratcher for me.

    Thank you for your help!

  8. Jennifer says

    I am having the same trouble as Lee and DanT. I named my logo ‘logo.png’ and remembered to change the Genesis settings to display logo. It still is not showing up.

  9. Lee says

    Same here – I have ‘Image logo’ selected in my Genesis settings and I’ve overwritten the default ‘logo.png’ file in my child theme images folder, but it’s not showing my logo at all…

  10. DanT says

    I’m like Kevin…. a little. I did it and my logo will not show up on my page. I deleted all the other logos/images in my images folder and named my logo “logo.png” . The Sample Genesis logos disappeared but my logo will not come up.?

  11. Kevin says

    Never mind Brad. I of course failed to remember to switch Genesis settings to display logo instead of text. Maybe something to mention to forgetfull ding dongs like myself. Thanks for your great work.

  12. Kevin says

    I opened Filezila and replaced the existing logo.png with mine and nothing happened. How can I be missing what seems so simple?

  13. Justin says

    In your screenshot it seems like you have a header menu next to the logo. This doesn’t come by default with the Genesis, Sample theme. How do would you set this up?

      • Justin says

        Thanks Brad, I kept researching and got that to work. I’ve had a look at the layout of your site here and realised Im actually trying to acheive something similar with how you have the menu except I want a logo in my header. Ive been able to add the logo but at the moment it floats to the left and the header position seems static altogether, while the content below moves.

        On your site the logo is ”centred” over the content and sidebar and everybody moves together in harmony, when the page is resized while the menu still adjust down when the window is narrow. Ive been trying to adjust the margins and padding in different places, but everyone isn’t quite moving together as I like. I’m guessing that maybe I have to put the menu and content in the same div? or something like that?

        Thanks for your help so far!

        • Brad Dalton says

          Hi Justin

          I would need to taker a look at your site and code to see what you have done already so i can test a solution which works on your theme.

          Cannot accurately provide a solution based on the information you have left in the comments.

  14. Amit says

    This is the best tutorial for header image.

    There are many people who faced problem with header image while updating to genesis 2.0.0!

    Brad if you could find out a way to upload different header sizes for different devices (responsive ) it would be great.

    Nick has developed a plugin but i couldn’t get it to work.

    • Brad Dalton says

      Hi Amit

      You can add CSS to change how your images display on different devices which is personal choice.

      Different people want different parts of their site to display differently on different devices.

      Responsive design is customization based on how you want your site to look when it resizes.

      Its personal choice and varies for each person.

      Not many people use a theme right out of the box so they customize it. Responsive design is the same

      If you don’t like the default responsive design, simply change the CSS in the media queries to suit your needs.

  15. Joan says

    Hi Brad!

    Thanks again! Very instructive!

    Although it works fine for a logo which is less than 164px in height, the header keep being 164px height. How can I reduce this value? If I try to change the site-header height then the navigation bar height increases.

      • Joan says

        In style.css. You can see it here:
        As you can see, the image is 96px height, but the header is 164px. If I change the site-header to 100px, the navigation bar gains those 64px.

        • Brad Dalton says

          That’s right.

          You can easily fix that by modifying the values for the different header classes in your style sheet.

          • Brad Dalton says

            Hello Nelson

            All the values are under the Site Header section in the style.css file.

            Simply change the header right widget width and adjust the title area by the same amount.

          • Nelson says

            Thanks, don’t know why I didn’t see .header-image .site-header .widget-area

  16. Rick Rottman says

    Looks good Brad. I will take a look at it later when I get home and see if it’s better than what I did to replace the title with an image. I’m pretty sure your’s is better. :)

Leave a Reply

Your feedback is always appreciated.

Your feedback is always welcome & appreciated however WP Sites does not reply to anonymous comment authors or loaded questions. Members get answers to unlimited questions.