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.

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.

Options for Other Themes

5 Reasons Mad Mimi Is Better Than Other Services

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. Nelson says

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

  2. 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.

  3. 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!

  4. 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.

  5. 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…

  6. 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.?

  7. 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.

  8. 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?

  9. 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.

  10. 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.

  11. 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

  12. 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. :)

Ask a Question