In one of my earlier posts on how to make background in Minimum Pro appear on selected pages, Chris asked in the comments:
How could different background images be used on different pages
Here's how it can be done. We are going to specify the background image for 2 specific static Pages (based on their IDs) and all other Pages are going to use the default background image uploaded in the backend.
But first, screenshots.
Homepage
Static Page 1 (ID: 14)
Static Page 2: (ID: 12)
Any other static Page
Thanks a ton….
If i would update the theme, would it not overwrite the front-page.php and your changes will be lost?
Yes. When updating a child theme, you will have to make a note of your customizations and re-apply them.
Thanks for these instructions, Sridhar. I stumbled across them trying to figure out this very problem and I’m glad to have found you!
Alas, when I adapt the instructions a bit for my own use (and I’m not a coder, so I probably made mistakes), I can’t get it to work. Using what was already in my Agency Pro genesis them functions.php file and what you provided above, I tried this:
//* Enqueue Backstretch script and prepare images for loading
add_action( ‘wp_enqueue_scripts’, ‘agency_enqueue_backstretch_scripts’ );
function agency_enqueue_backstretch_scripts() {
//* Load scripts only if custom background is being used
if ( ! get_background_image() )
return;
wp_enqueue_script( ‘agency-pro-backstretch’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/backstretch.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_script( ‘agency-pro-backstretch-set’, get_bloginfo( ‘stylesheet_directory’ ).’/js/backstretch-set.js’ , array( ‘jquery’, ‘agency-pro-backstretch’ ), ‘1.0.0’ );
if (is_home()) :
wp_localize_script( ‘agency-pro-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://lenski.com/go79zzrjc/files/2013/10/agency-background-tammy.png’ ) );
else:
wp_localize_script( ‘agency-pro-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => get_background_image() ) );
endif;
}
No go…the same background image, the default one, loaded on the home page as well as all other pages. I also tried if (is_front_page) to no avail. I don’t want to take undue advantage of your time and expertise, but if you easily notice where I went wrong, I’d so appreciate your help!
Of course, after staring at it for hours, 2 minutes after finally posting my note to you, I figured it out! I had modified the backstretch-set.js file many hours before finding your post, and once I put it back to the original, everything worked. Thank you so much for these instructions! I’m now following your blog.
Thanks for these instructions. I really appreciate it. But, how could I modify the code so that the background only shows on the homepage?
To clarify, the background I’ve set is showing on all pages.
Hi Sridhar,
First of all, you are my Genesis guru!!!
Secondly, would there be a way to implement this feature and have the images pulled from each pages’ featured image? If so, that would enable some seriously easy updates in the future.
Possible? Impossible?
Hi Sridhar,
Your posts are so incredibly helpful! Thank you very much! I have an interesting issue. I’m applying the above code to my pages. However, I’ve also removed the site-tagline from all the pages so the css above doesn’t apply to my pages. I’ve tried to apply the above style to .page .site-inner but it has no effect. Any suggestions? Thanks!
I retraced my steps and must have made initial errors because my pages now work with the proper css. Thanks again for your posts!
Can this be used on blog pages as well? I have followed the instructions and can’t seem to get it to work. The page I want it on is http://www.natepyle.com/blog
Hi – I have this working with different images on each page using the following code but the images on the other pages do not resize and cant be seen in mobile view – please can you help.
My code may need improving – I want to show images on 3 pages only – all 3 pages are static – one of these is the home page (3953). This is the code I used
//* Minimum custom body class
add_filter( ‘body_class’, ‘minimum_add_body_class’ );
function minimum_add_body_class( $classes ) {
$classes[] = ‘minimum’;
return $classes;
}
//* Enqueue scripts
add_action( ‘wp_enqueue_scripts’, ‘minimum_custom_enqueue_scripts’ );
function minimum_custom_enqueue_scripts() {
if ( is_page(array(3953,4034,3890))){
wp_enqueue_script( ‘minimum-backstretch’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/backstretch.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_script( ‘minimum-backstretch-set’, get_bloginfo(‘stylesheet_directory’).’/js/backstretch-set.js’ , array( ‘jquery’, ‘minimum-backstretch’ ), ‘1.0.0’ ); wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://met3.dev/wp-content/themes/minimum-pro/images/head5.jpg’) );
if (is_page(‘4034’)) :
wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://xx.dev/wp-content/themes/minimum-pro/images/myimage1.jpg’ ) );
elseif (is_page(‘3890’)) :
wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://xx.dev/wp-content/themes/minimum-pro/images/myimage2.jpg’ ) );
else:
wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => get_background_image() ) );
endif;
}
}
Hi – I have this working with different images on each page using the following code but the images on the other pages do not resize and cant be seen in mobile view – please can you help.
My code may need improving – I want to show images on 3 pages only – all 3 pages are static – one of these is the home page (3953). This is the code I used
//* Minimum custom body class
add_filter( ‘body_class’, ‘minimum_add_body_class’ );
function minimum_add_body_class( $classes ) {
$classes[] = ‘minimum’;
return $classes;
}
//* Enqueue scripts
add_action( ‘wp_enqueue_scripts’, ‘minimum_custom_enqueue_scripts’ );
function minimum_custom_enqueue_scripts() {
if ( is_page(array(3953,4034,3890))){
wp_enqueue_script( ‘minimum-backstretch’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/backstretch.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_script( ‘minimum-backstretch-set’, get_bloginfo(‘stylesheet_directory’).’/js/backstretch-set.js’ , array( ‘jquery’, ‘minimum-backstretch’ ), ‘1.0.0’ ); wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://xxdev/wp-content/themes/minimum-pro/images/head5.jpg’) );
if (is_page(‘4034’)) :
wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://xx.dev/wp-content/themes/minimum-pro/images/myimage1.jpg’ ) );
elseif (is_page(‘3890’)) :
wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://xx.dev/wp-content/themes/minimum-pro/images/myimage2.jpg’ ) );
else:
wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => get_background_image() ) );
endif;
}
}
I would like to do this on only the product category page, or possibly all the category pages. How would I do that?
Hello,
I tried to copy and paste the code from this tutorial and got several php error messages. I would love to know how to use the home page image as a banner image across all pages and posts on my site. I was trying to use this tutorial with conditional tags but it didn’t quite work.
Any suggestions?
It was because of quotes in the code not getting pasted as true quotes. I have edited my tutorial above and wrapped the code in WP code tags. Can you try again?
Do you have a screenshot of what you are trying to do?