<

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!

About Bhagwad Park

Bhagwad has been writing WordPress tutorials for years. He also creates tutorials on Linux server administration, and has a ton of experience writing about and using web hosting products! Send me an e-mail!

Comments

  1. you make it easy to understand. unfortunately, i tried using this code in the custom code plugin you created, but it didn’t work. can you please explain why? I’m using the elif lite theme if that could be the reason. and this is how I used the code.
    add_filter( ‘the_title’, ‘insert_image_before_title’, 10, 2 );
    function change_the_header($url_for_image) {
    if (is_home())
    $url_for_image = “[http://www.chioojukwu.com/wp-content/uploads/2018/03/PicsArt_03-02-01.20.261.png]”;

    if (is_category( ‘fiction’ ))
    $url_for_image = “[http://www.chioojukwu.com/wp-content/uploads/2018/03/writingquote1.png]”;

    return $url_for_image;
    }
    add_filter(‘theme_mod_header_image’, ‘change_the_header’);

    Reply

    • WPTweaks Admin says:

      Remove the square brackets “[]” around your URLs!

      Reply

      • Thank you but it’s still not working.

        Reply

        • WPTweaks Admin says:

          You seem to have an extra “add_filter” in your code that you pasted.

          Could you paste the final version of the code you’re using?

          Reply

          • so I used your custom code plugin for more than one code.

            <?php

            /* Plugin Name: Custom Plugin for Code
            Description: Plugin for extra theme independent code
            */
            function insert_image_before_title( $title, $id = null ) {

            if(get_post_meta($id, 'image_before_title_url', true)) {
            $img_source = get_post_meta(get_the_ID(), 'image_before_title_url', true);
            $title = '’ . $title;
            }

            return $title;
            }
            add_filter( ‘the_title’, ‘insert_image_before_title’, 10, 2 );
            function change_the_header($url_for_image) {
            if (is_home())
            $url_for_image = “http://www.chioojukwu.com/wp-content/uploads/2018/03/PicsArt_03-02-01.20.261.png”;

            if (is_category( ‘fiction’ ))
            $url_for_image = “http://www.chioojukwu.com/wp-content/uploads/2018/03/writingquote1.png”;

            return $url_for_image;
            }
            add_filter(‘theme_mod_header_image’, ‘change_the_header’);

            Reply

          • WPTweaks Admin says:

            Ok, do this.

            Change the “pretty” apostrophes “” to normal quotes “”. Same with the single quotes. Change ‘’ to regular apostrophes ” in your URLs and function declarations.

            In general, always try and copy paste your code into a plain text editor like Notepad, or Notepad++ .

            Edit: I just realized you might already be doing this and it’s my comment display that’s causing problems! Is that the case?

            If so, make sure that your header functionality is already turned on and that you have a default header image showing on the rest of your pages. Is that working?

            Reply

          • Perhaps there is something else preventing the code from working. I have decided against using varied header images at the moment. Thank you though, your code on adding image before post title worked flawlessly and I would be looking to your blog for more aid.

            Reply

  2. Thanks for this tip and hopefully you can help me make it work for my purposes.

    I am trying to make this work with the twenty-seventeen theme and woocommerce generated pages with no luck. Is this snippet only good for older wordpress themes and not woocommerce? I like to keep the home page header image but change all the header images for every other page including woocommerce.

    Thanks in advance.

    Here is what I tried:
    function change_the_header($url_for_image) {
    if (is_shop())
    $url_for_image = “http://localhost/mysite/wp-content/uploads/2018/03/header-blog3.png”;
    if (is_single())
    $url_for_image = “http://localhost/mysite/wp-content/uploads/2018/03/header-blog3.png”;

    return $url_for_image;
    }
    add_filter(‘theme_mod_header_image’, ‘change_the_header’);

    Reply

    • After doing some research at woocommerce I tried this but it didn’t work either.
      function change_the_header($url_for_image) {
      if (is_shop())
      wc_get_page_id( ‘245’ )
      $url_for_image = “http://localhost/mysite/wp-content/uploads/2018/03/header-blog3.png”;
      if (is_single())
      $url_for_image = “http://localhost/mysite/wp-content/uploads/2018/03/header-blog3.png”;

      return $url_for_image;
      }
      add_filter(‘theme_mod_header_image’, ‘change_the_header’);

      Reply

    • WPTweaks Admin says:

      Hi Paul, do you face this problem even if you use regular conditional tags like “is_home” etc instead of “is_shop”? I’ll have to test this out with Woocommerce to see if there are any conflicts…

      Reply

      • Hi thanks for your reply. When I use the is_home conditional tag and the is_single conditional tags I see the same header image (hero image cropped) from the home page on every page and not the custom image I want on all pages except the home page. It seems that twenty-seventeen won’t allow you to change the header image for other pages while keeping the hero image for the home page.

        Reply

        • I’ve also tried using just css but for some reason twenty seventeen doesn’t function like other templates from wordpress.

          Although I can remove the header image on woocommerce generated pages with css, I can’t seem to replace the header image with css. The header images shows for a milisecond than reverts to the homepage image. Javascript maybe??

          .woocommerce .custom-header-media img { background-image: url(http://localhost/mysite/wp-content/uploads/2018/03/header-blog3.png) !important; }
          .woocommerce .custom-header-media img {display:none;}

          Reply

          • I’ll have to test this out with Woocommerce to see if there are any conflicts…

            Any progress on your tests yet? I have been unable to make anything work and am hoping your results are much better. Thanks.

            Reply

          • WPTweaks Admin says:

            Not yet, no 🙁

            Reply

          • No problem. I’m still trying to find a way also.

            Reply

          • So I am guessing that you’ve been unable to figure this out and have given up also. Very strange that wp would create a theme that doesn’t allow for a different header on each page while maintaining the parallax effect on the front page only. Even WP is refusing to provide a solution for this issue as witnessed by the many posts on their forum. I tried paying a coder and he couldn’t do it either so I guess I’m out of luck. Thanks for trying though.

            Reply

  3. greate article!

    Reply

Speak Your Mind

*