Change the Header Image Per Page in WordPress

Many WordPress themes allow you to set a header image to display on top of the page. This is done via the GUI in the theme customization options like this:

set-header-image

But , this applies to ALL pages of the site. By default, there’s no way to choose which image displays on a “per page” basis. The function that’s in charge of displaying the header image is called “get_header_image”. And unfortunately, it doesn’t have an explicit filter. Normally, changing the header image depending on the section of the site requires you to modify your theme. And that needs a child theme. It can get very messy.

However, in this article, I’ll show you an easy way to modify the header images on a page by page basis. No theme modifications required!

Step 1: Upload the Header Images and Crop Them

The first step to changing the header images on a per page basis is to upload them. You can do this via the Media manager in WordPress, but it might be better to upload them through the Theme customizer – the same section as the first image. This way, it allows you to crop the image to fit the theme properly. The cropped images are saved separately like this:

cropped-images

Step 2: Get the Header Image URLs

Once you’ve uploaded them, get their URLs from the right hand side when you click on each image in the Media Library:

get-urls

Paste the Following Code into functions.php

Open your theme’s functions.php file and paste the following code into it:

function change_the_header($url_for_image) {
    if (is_home()) 
        $url_for_image = "[Header image URL 1]";

    if (is_single())
        $url_for_image = "[Header image URL 2]";

    return $url_for_image;
}
add_filter('theme_mod_header_image', 'change_the_header');

If you don’t know how to insert this snippet of code into your WordPress installation, check out my earlier tutorial on the same. This code allows you to insert different header images based on which area of the site is being viewed. In this example, I have a check for the homepage via the “”is_home” function and a check for an individual article via the “is_single” function. Each situation displays a different header image.

Replace the sections in [bold] above with the URLs you got earlier from Step 2.

You can easily add your own conditional tags and check for categories, archives, static pages, etc. With the above code, here is my home page header image:

one-image-for-the-homepage

And here is my “single page” header image:

Change Header Image per Page

You can see that it’s changing as per the conditions in the code. So while you can set a header image via the WordPress theme options, you can change it on a per page basis via a simple code snippet in functions.php!

Speak Your Mind

*