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
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 );
//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.
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.
Help!! I tried entering this code in the functions.php file and now my whole website is white. When I access it from Mozilla it’s just a blank white page. When I access it from internet explorer I get this error:
The website cannot display the page
HTTP
500
Most likely causes:
The website is under maintenance.
The website has a programming error.
What you can try:
Refresh the page.
Go
back to the previous page.
More
informationI don’t know wordpress well enough to figure out what to do or how to restore my old setting. I’m not able to get into the theme and functions.php to replace the code with the old code. Any advice??
Do you have FTP access to your site ?
You can FTP into your site, navigate to the theme directory, download the functions.php file and remove the code and re-upload.
Thanks for sharing this, I just built a multi-user website for a client and was looking for a way to streamline the sub-blog themes into one. You article just brought me one step closer.
Thank you very much Oli. I hope this tutorials gives you a boost because the problem with the old ones is that they are BACKGROUND images and like the new Twenty Ten theme, they are displayed as images instead.
just wondering how i can center the image? otherwise it worked perfectly!
so i thought it worked but now i’m having the same issue as previous poster had with website showing up white.
This is cool, thanks. Can you suggest a mod that will let the user specify which page(s) the customer header appears on? I would like to try this very much. Would love to hear your thoughts
Thank you,
Charles
sorry, that should be “custom” header, not customer :-)
Hello there! Thanks for the tip!! THnk god. Finally, i have a header on my blog! Thank you!
I can adjust a big header on my own. Really customizable. Have a problem on Europe free theme. Would like to have a page bar under/above the header. Can you help me?
Is this okay with WordPress 3.4 and in any theme?
Thanks for this cool tutorial. :)
Hi! Thanks for the code! What a lifesaver! It took me a while to get it, but it changed my menu font to something plain like times. All of my other fonts are great, and I didn’t think it would affect that. Any suggestions? Thanks!
is there any way that i can put different images on certain pages..
That’s man, very useful !!!!!
i’ve been search a lot for this code.
Hey man, just a little question, how can put a custom field in some place above header image?… in my theme, i want to header images of pictures width naming the author of it, so, i need custom field in the same location were change the header image.
Help!
(sorry, my english is awful)
Pablo form Chile
Hi,
Is this just to add image to the header. There is no fallback if image does not exist.
I’m not sure where you’re getting your information, but good topic.
I needs to spend some time learning much more or understanding more.
Thanks for excellent info I was looking for this info for my
mission.