Winning Agent

Sales That Work

  • About
  • Store
  • Blog
  • The Stream
  • Forum
  • Jobs

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

August 10, 2014 by Jackie D'Elia 17 Comments

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedIn

Add rotating images to Winning Agent Pro 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/

WordPress Installation Folder

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.

More Great Reading

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedIn

Filed Under: Realtor Tech Tips, Web and Social Media Tagged With: Background Images, BackStretch

About Jackie D'Elia

Web Designer and Developer using WordPress + Genesis Framework. Real Estate technology. Loves photography and writing. Lucky with plants. jackiedelia.com Follow me on Twitter @jdelia.

Comments

  1. David A says

    November 4, 2014 at 6:08 pm

    Thanks for the info, will this work on mobile?

    Reply
  2. jackie D'Elia says

    November 5, 2014 at 6:08 am

    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.

    Reply
  3. Davidavid says

    December 3, 2014 at 3:12 am

    Would this also work for the Agency Pro theme (Genesis)?

    Reply
    • Jackie D'Elia says

      December 3, 2014 at 6:46 am

      Yes, in fact I am using it on my site which is running Agency Pro theme. SavvyJackieDesigns.com

      Reply
  4. Doug Willis says

    January 7, 2015 at 12:17 pm

    Is it possible to replace the static images with video?

    Reply
    • Jackie D'Elia says

      January 10, 2015 at 7:55 am

      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.

      Reply
  5. Scott Pope says

    April 26, 2015 at 7:14 am

    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

    Reply
    • Jackie D'Elia says

      April 26, 2015 at 8:56 am

      Hi Scott,
      Not sure, but I would be happy to take a peek. Do you have a link to your site you can share?

      Reply
      • Scott Pope says

        April 26, 2015 at 9:13 am

        http://homesand.condos/

        If this matters, I have several domains in one hosting account.

        Reply
        • jackie D'Elia says

          April 26, 2015 at 9:41 am

          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.

          Reply
          • Scott Pope says

            April 26, 2015 at 10:57 am

            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.

  6. Kelin says

    May 12, 2015 at 12:07 am

    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.

    Reply
    • Jackie D'Elia says

      May 12, 2015 at 7:16 am

      Just so happens I wrote a post about that today. Here is the link: http://savvyjackiedesigns.com/adjust-height-of-winning-agent-background-image/

      Reply
  7. Sandy Ramsey says

    June 25, 2015 at 3:53 pm

    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!!

    Reply
  8. jimena says

    July 1, 2015 at 11:10 pm

    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!!

    Reply
  9. jimena says

    July 2, 2015 at 5:59 pm

    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?

    Reply
  10. London George says

    July 6, 2015 at 2:32 pm

    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

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Looking For Something?

Email Newsletter

Sign up to receive free updates from the Winning Agent blog.

Connect With Me

  • Facebook
  • LinkedIn
  • Pinterest
  • Twitter

StudioPress Real Estate WordPress Theme: Agent Focused Pro Theme

StudioPress Premium WordPress Themes: Winning Agent Pro Theme




Loan Types & Property Definitions

There are a lot of different types of mortgages, and there are a lot of different types of real estate property. Here is a list of the most common types of each. We’ve added some links to the most popular articles on the subject.

Read More

Real Estate and Mortgage Forum

We think getting many viewpoints to a particular question is important because it helps you to make better decisions. It’s so important that we have woven the Forum all throughout Winning Agent. We invite you to ask questions, make comments, and be part of the discussion.

Read More

Glossary of Real Estate Terms

Real estate and mortgage finance often times comes with its own unique language. If you work with it every day, it becomes 2nd nature, but most people don’t work with it every day. So we’ve created a glossary of mortgage and real estate terms.

Read More

Copyright © 2023 Winning Agent · Powered by the Genesis Framework · Contact Us
Become an Affiliate
This site uses affiliate links, but know that we only recommend products we personally use and enjoy!

 

Loading Comments...