backstretch-man

The Sixteen Nine Theme is one of the first themes released for version 2.0 of the Genesis Framework and was eagerly awaited by a lot of StudioPress fans.

Sixteen Nine has many features that make it stand out from the crowd. An elegant design, unique layout, Gravatar support in the header and integration of the popular Backstretch jQuery plugin by Scott Robbin are just a few.

After installing the theme, my first reaction was this thing is cool! I love how the background image stretches to fill the background at all widths. My second reaction was wouldn’t it be “cooler” if the background was a slideshow? Turns out slideshow functionality is already built-in to Backstretch and with a couple of simple mods you can implement it on your copy of Sixteen Nine.

Keep in mind these mods remove support for Backstretch via the get_background_image function. With this approach you upload your background images to your WordPress Media Library then add links to those images within the backstretch-set.js file located in the js folder of the Sixteen Nine Theme. You will no longer add the background image via Appearance > Custom Background.

Before proceeding make sure you have a complete backup of your Sixteen Nine Theme

Step 1 – Modify the Enqueue Scripts Function

Click “view raw” in lower right. Modify the sixteen_nine_enqueue_scripts function by removing some of the original code as seen below.

Step 2 – Modify the backstretch-set.js File

Click “view raw” in lower right. Modify the backstretch-set.js file with links to your images as seen below. Note that the last image entry does not end with a comma.

Your background should now be a slideshow based on the images added to your modified backstretch-set.js file. See my copy of Sixteen Nine installed here. You can experiment with the duration and fade settings to achieve the perfect transition between slides.

BradPotter.com is Powered the Genesis Framework

Genesis Framework for WordPress

The Genesis Framework by StudioPress empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and choose from a selection of great looking premade designs. Start using the Genesis Framework!

Comments

    • Brad Potter says

      Hi Carrie,

      Happy to see you here. Lots of WordPress people have shared their secrets with me. I’m just paying it forward.

  1. says

    Awesome, was wondering how you did that when I saw your tweet yesterday.
    Btw, you are missing backstretch.js and I think enqueueing responsive-menu.js shouldn’t be part of the code.

    • Brad Potter says

      Step 1 and Step 2 are modifications and in the case of Step 1, code is actually being removed. See the original Sixteen Nine functions file. I clarified Step 1 to note that code is being removed.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>