Add Multiple Site Background Images To Genesis Agency Pro Theme

You can add a multiple images as alternating site background images in the Genesis Agency Pro theme by tweaking the backstretch jQuery plugin that comes with the theme.

Out of the box Agency Pro uses one master site background image as set in the Customizer, preferably at 1600 x 1000px.

Prepare your images

Get your images ready at 1600 x 1000px and file them either in the uploader or in an images directory, have their URLs handy.

Create a Background Slider

Edit the main Backstretch function

<?php
//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {
// $image = get_option( 'agency-backstretch-image', sprintf( '%s/images/bg.jpg', get_stylesheet_directory_uri() ) );
//* Load scripts only if custom backstretch image is being used
//if ( ! empty( $image ) ) {
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' );
//wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );
// }
}
view raw agencypro.php hosted with ❤ by GitHub

Edit the main backstretch function in functions.php as above I have commented out the lines I no longer need, this is the code the ties the customizer image to the Backstretch jQuery plugin.

Edit the Backstretch script

In your js/backstretch-set.js file add the following…

jQuery(document).ready(function($) {
$("body.home").backstretch([
'/wp-content/themes/dmand/images/bg.jpg',
'/wp-content/themes/mytheme/images/bg1.jpg',
'/wp-content/themes/mytheme/images/bg2.jpg',
'/wp-content/themes/mytheme/images/bg3.jpg',
],{
duration:3000,
fade:750,
});
});
view raw backstretch-set.js hosted with ❤ by GitHub

So here just add in your images and correct paths – and that’s it done.

Load Alternate Images on Page Load

Instead of a slider you could also load different background images each time the page loads, to do this edit the backstretch script to be like the below.

jQuery(document).ready(function($) {
// Create an array of images that you'd like to use
var images = [
'/wp-content/themes/dmand/images/bg.jpg',
'/wp-content/themes/dmand/images/bg1.jpg',
'/wp-content/themes/dmand/images/bg2.jpg',
'/wp-content/themes/dmand/images/bg3.jpg',
];
// Get a random number between 0 and the number of images
var randomNumber = Math.floor( Math.random() * images.length );
// Use the random number to load a random image
$("body.home").backstretch([
images[randomNumber],
],{
duration:3000,
fade:750,
});
});
//Source - https://github.com/srobbin/jquery-backstretch/issues/135

3 Comments

  1. subversiv on January 26, 2017 at 6:22 pm

    hi, I did everything for the 411-theme, but it just comes out all white can’t even see the page. What could I be doing wrong thanks

  2. jivan on August 13, 2016 at 3:18 pm

    I am trying this with the 411 pro and it just does not work. Do I have to have dmand in or replace that with the 411-pro thanks

  3. Lynne on May 3, 2016 at 6:31 pm

    Cool, is there any way to add a random background image to a home page widget area in Genesis?

Leave a Comment





%d bloggers like this: