How To Add Backstretch Background Slider To Your Theme

If you want to make your home page more eye catching or just add beautiful, responsive full screen background slider, you are in the right place. In this short tutorial I'll show you how to add backstretch to any WordPress theme without a plugin.

Whoooa, what is Backstretch?

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element
by Scott Robbin

There are some solutions that will do the job, but following tutorials will help you understand how to edit and customize WordPress themes without overloading database. As I'm not a jQuery developer, the script might be improved, but it works great.

1. Required assets

You will need few files and proper folder structure, which is available in download form below or you can create them following the tutorial. I assume you have call in functions.php to most recent jQuery version. If not, we'll take care of that later.

[sociallocker id="35746"]slider[/sociallocker]

2. Files

Create images and js folders in your theme's directory so it will look like this:

/wp-content/theme_name/js
/wp-content/theme_name/images

The next step is to upload backstretch.js  from our assets to the js directory and create backstretch-set.js with this code:

jQuery(document).ready(function($) {
$("body").backstretch([BackStretchImg.src,BackStretchImg2.src,BackStretchImg3.src,BackStretchImg4.src],{duration:1500,fade:750});

$('#next').click(function(x) {
x.preventDefault();
$('body').data('backstretch').next();
});
$('#prev').click(function(x) {
x.preventDefault();
$('body').data('backstretch').prev();
});
});

You can modify this file to match your needs. In this example duration is set to 1.5s (1500ms) and transition fade to 750ms. Second row stands for using images that will be included in functions.php. It also makes sure that backstretch will be assigned to the body class, you can change it, but remember to change all values.In this example it also supports next/prev buttons which you can put at any place on your site. Make sure they have structure like this:

//Left
<a id="prev" href="#prev">Previous text or arrow image</a>
//Right
<a id="next" href="#next">Next text or arrow image</a>

Now open your functions.php file and use this code:

//* Enqueue Backstretch script slider and prepare images for loading
add_action( 'wp_enqueue_scripts', 'es_enqueue_scripts' );

function es_enqueue_scripts() {
//* Load scripts only on home page, to enable on all pages remove the if is_home line and last line from the script

if ( is_home() ) {

wp_enqueue_script( 'es-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'es-backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'es-backstretch' ), '1.0.0' );
wp_localize_script( 'es-backstretch-set', 'BackStretchImg', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg1.jpg' ) );
wp_localize_script( 'es-backstretch-set', 'BackStretchImg2', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg2.jpg' ) );
wp_localize_script( 'es-backstretch-set', 'BackStretchImg3', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg3.jpg' ) );
wp_localize_script( 'es-backstretch-set', 'BackStretchImg4', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg4.jpg' ) );

}
}

The is_home part is responsible for displaying background slider on homepage only. If you want to enable it across the site just remove the if ( is_home() ) { and the last } mark.

You can also see wp_localize_script lines, which stands for images. You can add as many as you wish, just add next lines with proper numbers. Give it also names you want, I used bg and number.
(If you do so, don't forget to edit backstretch-set.js file!)

3. Images

Now upload your photos to images folder and give it names you used in the functions.php script.

That's all, I hope you enjoyed this tutorial.
Kris