WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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.

Reader Interactions

Comments

  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!

  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!

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

Leave a Reply