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.
Thanks for the info, will this work on mobile?
Yes it will. Keep the file sizes under 250kb and limit the number of images – I used 3 images and it works on iPhone and iPad.
Would this also work for the Agency Pro theme (Genesis)?
Yes, in fact I am using it on my site which is running Agency Pro theme. SavvyJackieDesigns.com
Is it possible to replace the static images with video?
Hi Doug,
I am not sure. I checked the backstretch documentation and did not see anything mentioned about video. That is certainly something I am interested in, so I’ll put it on my feature list. Thank you.
I have GoDaddy hosting and WA theme. I have followed all the directions to add rotating background, but only the first image ever shows. What could be the problem?
I really want this option and would appreciate any help you may give.
Thanks
Hi Scott,
Not sure, but I would be happy to take a peek. Do you have a link to your site you can share?
http://homesand.condos/
If this matters, I have several domains in one hosting account.
It is unable to find the second image: http://homesand.condos/backstretch_images/wap-bghome2.jpg Check the files in the backstretch_images folder and make sure you are using the correct filenames. That will cause it to stop.
The second image got named wap-bghome2.JPG with caps for extension instead of small letters. It’s working great now. Thank you so much for your help! I love the rotating background.
Jackie,
Is there a way to alter the height of the images? I have them rotating just fine, but I don’t like how you have to scroll down just to do a search (on my laptop anyway). I love the height of the rotating images on your southcharlottemarket.com, but I saw that you used a custom solution there, and it appears that you don’t offer that solution a la carte.
Just so happens I wrote a post about that today. Here is the link: http://savvyjackiedesigns.com/adjust-height-of-winning-agent-background-image/
Just used this today and had to make a few minor adjustments, my freshly downloaded version of agentpro didn’t have the script enque in the functions.php file and now /js/ is not inside /lib/, but on the same level
So…
the new backstretch_init.js looks like this (had to add the (“body”). part):
/*! Loads the Backstretch images */
jQuery(document).ready(function($) {
$(“body”).backstretch([
“/backstretch_images/wap-bghome3.jpg “,
“/backstretch_images/wap-bghome3.jpg “,
“/backstretch_images/wap-bghome3.jpg ”
], {
fade: 750,
duration: 8000
});
});
and the script call in the functions file looks like this (changed the js folder path):
// 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’ ) . ‘/js/backstretch.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_script( ‘backstretch-init’, get_stylesheet_directory_uri() . ‘/js/backstretch-init.js’, array( ‘backstretch’ ), ‘1.0.0’ );
}
}
works great!!
hello, thank you , excellent tip . I am using the theme Agent Press Pro. I followed all the steps but still can not get it to work. I think the error is in the php code. I added the code under the following paragraph;
// * Enqueue Scripts
add_action ( ‘ wp_enqueue_scripts ‘ ‘ agentpress_scripts ‘);
agentpress_scripts function ( ) {
wp_enqueue_style ( ‘ dashicons ‘);
wp_enqueue_script ( ‘ agentpress -responsive -menu , get_bloginfo ( ‘ stylesheet_directory ‘ )’ /js/responsive-menu.js ‘, array ( ‘ jquery ‘), 1.0.0 .’ ) ;
please , can you give me some help with this. Thanks!!
Thank Sandy, for help, finally I get it to work. But now, my question is: How to make this will only see on the landing page, and not on the other?
Hey Jackie, on the pages where I am using subdomains for IDX searches the backstretch images do not appear to be loading.
When I inspect the page I get errors like these,
“Font from origin ‘http://georgeandnoonan.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
“Origin ‘http://homes.georgeandnoonan.com’ is therefore not allowed access.
basic:1 GET http://homes.georgeandnoonan.com/backstretch_images/wap-bghome3.jpg 404 (Not Found)”
A page on the site to see what I am talking about can be found here: http://homes.georgeandnoonan.com/idx/search/basic