WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

Add a Customizable Header Image to Personalize Your WordPress Theme

Last Updated on September 11th, 2023

When WordPress 3.0 was introduced, it brought along with it a host of new features including the ability to change your wordpress theme header! From within the admin panel, under the “appearance” tab, the feature was built into the ‘TwentyTen’ wordpress theme. In case, you want to add this functionality to your own wordpress theme, how would you go about it? Thankfully, it’s quite an easy routine to do, by simply adding some custom code to your theme’s functions.php file!

What is the Header Image?

The pictures or videos displayed at the top of all website’s pages and posts are referred to as website header images. This element can also be called the hero image or the banner image. 

This section is part of the site’s header, and in most cases, you can customize it from the theme’s Header menu. 

Adding this picture to a website helps establish its visual identity, promote a brand, or offer product discounts and limited-time offers. 

However, some WordPress themes don’t support this functionality, and you have to alter their code to add a custom website header image to your site.

You can quickly check if a theme supports this option. Simply, browse the WordPress theme library and see if the preview contains an image. If it does, you can upload a custom picture after you complete the installation and activation. 

Switching to a theme with the header image element is a painless process, and you don’t have to edit the theme’s documents just so you can upload a photo you like.

Uploading a Header Image to a WordPress Theme

Changing a theme’s default hero image is a straightforward process that shouldn’t take more than a few minutes. 

I’d like to remind you that all themes have image dimensions and size limits, and ideally, you should crop the image to the recommended size before uploading it. Don’t forget that blurry, low-resolution images can ruin the site’s visual appearance. 

Use JPEG file format for photos or MP4 for videos, even if the theme supports displaying other media formats. 

Article Continues Below

Here’s what you need to do to add a custom header image in WordPress

  • Go to the Dashboard, and open the Appearance menu
  • You’ll be able to see the Header option in the Appearance menu only if the option is included with the theme, you selected.
  • The Customize window will appear on the screen after you click on the Header submenu.
  • You’ll see the image size instructions on the upper left side of the screen
  • Click the Add Image button, and select an image from the WordPress media library or upload a picture from your computer. 
  • Crop the image if it’s too big, and click the Publish button to save the changes.

Some WordPress themes have the Header Media submenus within the Header menu. So, you should complete the steps we listed above from this submenu if the theme you selected comes with the Header Media submenu.

Themes like ‘Twenty Seventeen’ also allow you to add multiple headers to the site’s pages but keep in mind that, in most cases, you won’t be able to upload photos from Flickr or other external sources.

However, select WordPress themes allow you to use YouTube videos as header videos. 

Creating Hero Images with Themes That Don’t Have the Header Image Option

Although it’s highly technical, adding a header image to a custom theme or a WordPress theme that doesn’t have this element is far from impossible. However, you should create a child theme, or back up the website before you start editing the theme’s files. 

When ready, you should complete the following steps:

Insert Code to Functions.php

Open or create a file called functions.php in your WordPress theme’s folder, and paste the following code :

[php]
<?php
//Check see if the customisetheme_setup exists
if ( !function_exists(‘customisetheme_setup’) ):
//Any theme customisations contained in this function
function customisetheme_setup() {
//Define default header image
define( ‘HEADER_IMAGE’, ‘%s/header/default.jpg’ );

//Define the width and height of our header image
define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘customisetheme_header_image_width’, 960 ) );
define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘customisetheme_header_image_height’, 220 ) );

//Turn off text inside the header image
define( ‘NO_HEADER_TEXT’, true );

Article Continues Below

//Don’t forget this, it adds the functionality to the admin menu
add_custom_image_header( ”, ‘customisetheme_admin_header_style’ );

//Set some custom header images, add as many as you like
//%s is a placeholder for your theme directory
$customHeaders = array (
//Image 1
‘perfectbeach’ => array (
‘url’ => ‘%s/header/default.jpg’,
‘thumbnail_url’ => ‘%s/header/thumbnails/pb-thumbnail.jpg’,
‘description’ => __( ‘Perfect Beach’, ‘customisetheme’ )
),
//Image 2
‘tiger’ => array (
‘url’ => ‘%s/header/tiger.jpg’,
‘thumbnail_url’ => ‘%s/header/thumbnails/tiger-thumbnail.jpg’,
‘description’ => __( ‘Tiger’, ‘customisetheme’ )
),
//Image 3
‘lunar’ => array (
‘url’ => ‘%s/header/lunar.jpg’,
‘thumbnail_url’ => ‘%s/header/thumbnails/lunar-thumbnail.jpg’,
‘description’ => __( ‘Lunar’, ‘customisetheme’ )
)
);
//Register the images with WordPress
register_default_headers($customHeaders);
}
endif;

if ( ! function_exists( ‘customisetheme_admin_header_style’ ) ) :
//Function fired and inline styles added to the admin panel
//Customise as required
function customisetheme_admin_header_style() {
?>
<style type="text/css">
#wpbody-content #headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
border: 1px solid #333;
}
</style>
<?php
}
endif;

//Execute our custom theme functionality
add_action( ‘after_setup_theme’, ‘customisetheme_setup’ );
?>
[/php]

  • Default.jpg is the default image header file, so rename that if you wish
  • 960 is the default width of the image
  • 220 is the default height of the image.

Once you have added this code, and activated your theme, you will see the new menu option under “Appearance” called “Header” – this is where you can upload and choose which header file to use.

Place the Image in your Theme

The final step is to place code in your theme that will show the chosen image, the following code will probably go in your header.php file :

[php]
<div id="header">
<!– other header code here…. –>

<!– This line adds the header to the theme –>
<img id="headerimg" src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header image alt text" />
</div>
[/php]

Frequently Asked Questions about Adding Customizable Image Headers to WordPress Themes

How Do I Add a Custom Header Image in WordPress?

You must manually add this functionality to a theme if it’s (WordPress customizer) not included in its core features, which can be daunting for anyone unfamiliar with coding!

So, switching to a theme that allows you to add customizable image headers to a website is the easiest way to avoid editing the theme’s documents. 

Article Continues Below

Uploading a photo or a video to a theme that supports this option is simple since all you need to do is follow the size guidelines. You can complete this task from the Header submenu located in the WordPress Dashboard’s Appearance menu. 

How to Change Header Images in WordPress?

All themes allow you to change header images as often as you want. So, whenever you want to upload a new hero image, you should return to the Header Media menu, and choose the new source image.

Avoid cropping images during the upload because you may have to remove sections of the image with valuable information. Resize the picture beforehand to meet the theme’s size and dimension requirements. 

Final Thoughts 

Uploading a custom header image to a WordPress website can help you establish brand identity, improve sales, or make a page more dynamic. This functionality is included with most themes, but you can also use code to add it to a custom theme. 

Thanks to Nooshu for the code above.

A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.