Add Custom Header in Genesis

Update: Once you add support for a custom header, you won’t see a new Header page added because WordPress adds this functionality to the customizer instead.

The following video shows you 2 methods for adding a image to your header.

Out of the box, some Genesis child themes don’t provide support for a custom header.

But wait!

The support is built into the core Genesis framework, you just need to add one line of code.

This means its easy to enable the header link under your Appearance menu which links to a new page you’ll see later on in this post.

Here’s what i’m referring too.

No Custom Header Support

No Custom Header Support

Theme With Custom Header Support

Custom Header Support

Adding Basic Custom Header Support

Add this code to your child themes functions.php file.

You can easily change the values for the height in this code.

You’ll also need to find the CSS code for your header in your child themes style.css file and change the height to match your php code.

Example for sites running XHTML:

#header {
	background-color: #fff;
	min-height: 100px;
	margin: 0 auto;
	overflow: hidden;
	width: 960px;
}

Sites Running HTML 5

.site-header {
	background-color: #fff;
	min-height: 100px;
	margin: 0 auto;
	overflow: hidden;
	width: 960px;
}

Once you’ve changed the values for your header height, you can go to Appearance > Header and upload a header with your logo.

Should look something like this:

Add Custom Header

You’ll find the header dimensions displayed on this page according to the values you have set in your functions file.

Add Support For Default Custom Header

Another option is to add support for a header image which you have uploaded into your child themes images folder:

Simply paste this code in your child themes functions.php file:

//* Add support for custom header
add_theme_support( 'custom-header', array(
    'default-image' => get_stylesheet_directory_uri() . '/images/hd.png',
	'default-color' => 'efefe9',
	'header_image'    => '',
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 115,
	'width'           => 960,
) );

The code includes the path to your default header image as well as several other values you will want to configure to match your theme.


Comments

17 responses to “Add Custom Header in Genesis”

  1. I’ve gotten the custom header to show my header logo just fine. However, I have the default “Genesis Framework – Supports HTML5 and Mobile Responsive Design” still showing up in the header in front of my image.

    Did I miss something somewhere, because I can not find where in the theme to shut that option off.

    Thank you!

  2. Hi Brad,

    I’m trying to add a wide header image (1000×300) in the Agency Pro theme, I’m following these steps, however the image is not responsive. Is there a way to change this?
    Many thanks in advance!

    1. Brad Dalton Avatar
      Brad Dalton

      Use the Media Queries Petri.

  3. thank you so much brad! i am creating my first wordpress website. after much researching i felt genesis to be the best choice but do not like the appearance of any of their child themes. your tutorials are so so so helpful! i will just start with the sample theme and follow your steps.
    will be back to share a link once it’s up and running =)
    happy holidays and best wishes!

    1. Brad Dalton Avatar
      Brad Dalton

      Good choice to start with. Merry Xmas.

  4. Joseph Foster Avatar
    Joseph Foster

    Does this work with the regular genesis theme or does it need a child theme?

    1. Brad Dalton Avatar
      Brad Dalton

      You should always use a child theme.

      There’s a free Sample child theme for Genesis you can use.

  5. If you do a tute on how to add a smaller logo image in the larger space by making a larger image that fits, with the logo on the left, I will link to it multiple times a day. 😀

    1. Brad Dalton Avatar
      Brad Dalton

      No problem but which theme Andrea?

      1. Any theme that uses the full width header uploader. (Pro ones uses a narrower one).

        People seem to think the widget area will hide the header and don’t think to use an image with a space there is all.

          1. OoooOOOoo.. did not know you had those!

          2. Brad Dalton Avatar
            Brad Dalton

            What i do is use the Google custom search for my site.

            Otherwise it takes too long to find solutions on my site.

          3. With the number of blogs out there from the greater Genesis Community, it’s hard to know who has written what, exactly. :-/

          4. Brad Dalton Avatar
            Brad Dalton

            Understand. Here’s one solution for the Education child theme. http://www.studiopress.com/forums/topic/making-header-logo-larger-in-education-theme/#post-62998

  6. thuansky Avatar

    Also when I uncheck “Show Header Text” and save it rechecks the box every time. Any ideas?
    you can help me !

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.