Show Different Banners on Different Pages Via The Customizer

This code enables you to display a different image on any page or post. You can set a default via the customizer and also add different images for different pages or posts via the customizer also. On top of this, you can also set defaults via your child themes images folder for each page or post.

This solution works well if you want to display a default image and a handful of unique images on specific pages or posts, including archives.

Add Unique Images Anywhere

You can add the background images to any existing element or hook in a new div. By default, the jQuery uses .site-header so the images display behind the header. Simply change this in the backstretch-set.js to any other class if needed:

$(".site-footer")

Simple as that.

Easy Code Installation

There’s only 2 steps:

Step 1 : Add the following code to your child themes functions file:

include_once( get_stylesheet_directory() . '/header/customize.php' );
include_once( get_stylesheet_directory() . '/header/output.php' );

Step 2 : Upload the folder named header to your child themes root directory.

Then you can add images to your images folder named header-1.jpg, header-2.jpg & header-3.jpg.

Here’s what they look like in the images folder:

3 image upload settings are included in the code which generate the upload fields in the customizer. You can easily add more. Members will find the instructions about how to do that below.

Here’s the header folder with all the code for logged in members:

Related Tutorials

• Different Header Background Images