How To Add A Clickable Custom Header Image

Seems there’s a lot of questions from problems caused when adding custom header images to different themes.

Part of the reason for this is that most people can work how to add a header image but not always make it link back to their homepage.

If you add your image url in your style.css file it won’t link back to your home page, so what to do?

Better to modify the PHP code which adds support for a custom header under your Appearance tab in your dashboard. This way you can use the custom header uploader which is coded in your functions.php file.

Lets take a look at using the Metro theme by StudioPress as one example in this tutorial.

We’ll be adding a header image which is 1080px X 150px

Child Themes Functions.php File

The default values in Metro on or about line 31 as follows:

add_theme_support( 'genesis-custom-header', array(
	'flex-height'	=> true,
	'height'		=> 87,
	'width'			=> 1080
) );

Simply change the height to 150.

add_theme_support( 'genesis-custom-header', array(
	'flex-height'	=> true,
	'height'		=> 150,
	'width'			=> 1080
) );

You’ll then find the header height values have changed when you go to Appearance > Header > Custom Header.

Default Custom Header Size

New Custom Header Size

You’ll also need to change the height values in your style sheet.

Child Themes Style.css File

Next, open up your child theme style.css file and find the CSS code which targets your header.

The defaults values for the height on line 516 are as follows:

#header {
	min-height: 87px;
	overflow: hidden;
}

And also the height value on line 558 which needs to be changed is:

.header-image #title,
.header-image #title a,
.header-image #title-area {
	display: block;
	float: left;
	min-height: 87px;
	overflow: hidden;
	text-indent: -9999px;
}

So change both these height values so the code looks like this:

#header {
	min-height: 150px;
	overflow: hidden;
}

And also the height value on line 558 which needs to be changed is:

.header-image #title,
.header-image #title a,
.header-image #title-area {
	display: block;
	float: left;
	min-height: 150px;
	overflow: hidden;
	text-indent: -9999px;
}

Using the custom header uploader to upload your image, which is added when you add support for a custom header page in your functions.php file, ensures your header image will link back to your home page when clicked.

More Display Options For Custom Header Images

You can still use the header right widget area however it will output your content in your header which may or may not display in your image.

If you have a logo which is smaller, you could create a new canvas using a web design tool like Paint.net for Windows or GIMP for Mac which is the same size as the dimensions you customized above and add your logo to a white or transparent background.

Adding header images and logos using CSS generally causes problems and won’t link back to your home page unless you know how to add a link to the code.

You may also some across some themes like Eleven40 which the above methods won’t work as there’s more involved when changing to a custom header image with themes like this.

Learn more about changing header sizes in different WordPress themes.

You can also display custom header images on different pages like your home page and category archives pages as well.