How to Add Rotating Background Images to Your WordPress Genesis Child Theme

I recently purchased the Winning Agent Pro (WAP) theme created by Carrie Dils. I was looking for a Genesis child theme with an upscale look and easy IDX integration. I am still building out my site, but so far I love this theme. The most common question I’ve read from users that purchase a Genesis child theme, is “how do I get it to look like the demo?” In fact, that was my initial frustration when I purchased the StudioPress Pro Package years ago. Since then, their setup instructions make that so much easier.

Carrie did a fantastic job with the setup instructions for Winning Agent Pro, so in a few minutes, my site was already looking like the demo. However, there were still a few areas that I wanted to customize:

Change the color scheme

I needed something that more closely matched our company brand and was able to make those changes, following these instructions:

https://www.winningagent.com/add-custom-color-scheme-winning-agent-pro/

Brighten the background image

With my new color scheme, I wanted to brighten up the background image. I found those instructions on how to reduce the opacity here:

https://www.winningagent.com/forums/topic/home-page-image-filter/

Add Rotating Background Images

There were no instructions for that, so I did some research and made those changes myself. I wanted the option to replace the static background image with a few rotating background images to add some visual interest to my site.

Here’s how I did it. I made use of the Backstretch.js code by Scott Robbin already in Winning Agent Pro. It enables the static background image to be dynamically-resized.

I purchased a few stock photos from a photo site (BigStockPhoto), and sized them to about 2000 x 1200 pixels. Carrie suggests using 1500 x 500, so use whatever works best for the images you’ve chosen. I recommend keeping them all the same size, whichever you choose. I saved them as .jpg files with a low resolution, trying to keep the file size under 250KB each. Most photo editing programs will be able to do that for you. There is an issue with them not rotating on a tablet or smartphone (I noticed it on my iPad and iPhone) if the files sizes are too large. I learned that through trial and error and reduced the file sizes.

First create three image files. You are free to add more images and see if they will work, however that may increase page load time. I recommend starting with three. To be consistent, use lowercase letters for filenames and extensions throughout this tutorial. Filenames must match exactly.

Name the files:

wap-bghome1.jpg
wap-bghome2.jpg
wap-bghome3.jpg

and uploaded them via FTP to a folder (backstretch_images) that you create in the WordPress root folder. That is the folder where WordPress is installed.

yoursite.com/backstretch_images/

Create a file with a text editor named backstretch-init.js. Cut and paste this code:

/*! Loads the Backstretch images */

jQuery(document).ready(function($) {

$.backstretch([
"/backstretch_images/wap-bghome1.jpg ",
"/backstretch_images/wap-bghome2.jpg ",
"/backstretch_images/wap-bghome3.jpg "
], {
fade: 750,
duration: 8000
});

});

The parameters fade and duration control the transition between images and how long each image displays. You can modify those if desired.

Save the file and upload the file via FTP to the folder:

yoursite.com/wp-content/themes/winning-agent/lib/js/

There are other files in that folder, just leave them as is.

Ok, now for the hardest part. Update your child theme’s (Winning Agent Pro) functions.php

Danger Will Robinson! Use caution when editing your functions.php file!!!

Carrie has some excellent tips on how to properly edit your site. Too avoid the white screen of death – know how to access your site via FTP and edit your functions.php file from there. I would suggest reading this beforehand.

Open your functions.php file:
mysite.com/wp-content/themes/winning-agent/functions.php

Locate this code in your functions PHP file (you will most likely find it starting around line number 137 and ending around line 155):

// Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'wap_enqueue_scripts_styles' );
function wap_enqueue_scripts_styles() {

// Enqueue the Google Web Font styles
wp_enqueue_style( 'wap-google-fonts', '//fonts.googleapis.com/css?family=Lato:300,400,700,900', array(), CHILD_THEME_VERSION );

// Enqueue responsive menu
wp_enqueue_script( 'wap-responsive-menu', get_stylesheet_directory_uri() . '/lib/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );

// Enqueue Backstretch scripts only if custom background is being used
if ( get_background_image() ) {

wp_enqueue_script( 'wap-backstretch', get_stylesheet_directory_uri() . '/lib/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'wap-backstretch-set', get_stylesheet_directory_uri() .'/lib/js/backstretch-set.js' , array( 'jquery', 'wap-backstretch' ), '1.0.0' );
wp_localize_script( 'wap-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );

}
}

and add this block of code after it (not inside of it):

// Add conditional rotating background images if static background image is not found
if (!get_background_image() ) {
add_action( 'wp_enqueue_scripts', 'wap_backstretch' );
function wap_backstretch() {
wp_enqueue_script( 'backstretch', get_bloginfo( 'stylesheet_directory' ) . '/lib/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'backstretch-init', get_stylesheet_directory_uri() . '/lib/js/backstretch-init.js', array( 'backstretch' ), '1.0.0' );
}
}

If you have uploaded a background image in the Dashboard > Appearance > Background – then that image will be displayed instead of the new rotating images. To enable the rotating images, simply delete that background image in the Dashboard > Appearance > Background section. That will trigger the new code to run and the rotating images you just uploaded will be displayed. If images do not display, check that they are in the backstretch_images folder and the filenames correspond to the filenames in backstretch-init.js file. Remember the filenames are case sensitive.

Here is a quick example I put together to demonstrate how the rotating backstretch looks on Winning Agent Pro:

http://winning-agent.jackiedelia.com

Now go forth and add some pizzazz to your site.