Multiple Background Images for Cafe Pro’s Front Page Header using Backstretch and Soliloquy

Updated on March 10, 2020

In the comments section of Multiple Backstretched Background Images for Front Page 1 widget area of Digital Pro via Soliloquy, a user asked:

Hi,
I would love to use this method to display more background images in the Cafe Pro theme. I know you have a couple of tutorials on how to do that with a normal Soliliquy slider etc, but all those other methods mean that I have to give up on having the images fill the entire browser window. So, I figured this might be a good candidate.

I have tried for a while to get this to work on the Cafe Pro, but I must obviously be missing something. Any chance we can get a new tutorial like this one, except prepared for Cafe Pro?

In this tutorial we shall

• upload the desired background images to a Soliloquy slider named say, Front Page Header
• use soliloquy_output filter to store the slider's images into an array
• use wp_enqueue_scripts action hook to load Backstretch and pass the URLs of slide images to Backstretch initialization file if Front Page Header is present, otherwise the default image which can be changed in the customizer

to replace the static single background image behind the featured section (front page header) in Cafe Pro with cycling background images.

Tested in Cafe Pro 1.0.5.

Step 1

Install and activate Soliloquy (the free lite or the premium one) plugin.

Create a slider named Front Page Header and upload/select the desired background images. Since we are going to just use it as an easy way to manage the background images, settings in Config and Misc tabs do not matter and need not be configured.

Step 2

Upload jquery.backstretch.min.js to js directory.

Create a file named say, backstretch-set.js in the same location having the following code: