Genesis Tutorials

Cafe Pro Slide Show Behind Site Header

This tutorial provides the code which enables you to replace the site header image with a slide show on the front page. The slideshow displays full width of screen and is fully mobile responsive.

Watch the following demo video to see the slider in action:

The slider enables you to add any number of images to your WordPress Media Library or host them externally and paste the URL’s for each image in a comma separated list.

Your site title and tagline will then float over your slider images as seen in the above demo video.

Code Installation

  1. Download the folder named slideshow and upload it to the Cafe Pro themes root directory.
  2. Copy and paste the PHP code from the functions.php file inside the slideshow folder to the end of your child theme’s functions file.
  3. Swap out the links in the slideshow > slideshow-settings.js file with your own images.

Here’s the slideshow folder for logged in members:

2 replies on “Cafe Pro Slide Show Behind Site Header”

Hello why is it that it is not working in my local set-up even if I followed all of the instructions?

I don’t know but you may have missed a step. Right click the front page in Chrome and look for a red cross which may display errors.

Leave a Reply

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