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
Theme With 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:
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.
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!
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!
Use the Media Queries Petri.
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!
Good choice to start with. Merry Xmas.
Does this work with the regular genesis theme or does it need a child theme?
You should always use a child theme.
There’s a free Sample child theme for Genesis you can use.
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. 😀
No problem but which theme Andrea?
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.
Ok i’ll find another theme to write about as have already written about these 6 already:
OoooOOOoo.. did not know you had those!
What i do is use the Google custom search for my site.
Otherwise it takes too long to find solutions on my site.
With the number of blogs out there from the greater Genesis Community, it’s hard to know who has written what, exactly. :-/
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
Here’s another Andrea http://wpsites.net/wordpress-themes/add-different-size-logo-header-images-in-education-theme/
Also when I uncheck “Show Header Text” and save it rechecks the box every time. Any ideas?
you can help me !