Sridhar Katakam

Genesis and WordPress Tutorials

How to replace the Front page Header Background Image with a Slider in Café Pro

by 33 Comments

In Cafe Pro by default site title and site description appear centered on top of a big fixed background image below the Before Header section. In this tutorial I show how we can replace this background image with a slider.

Live Demo

Overview of the steps:

  • Remove the front page header from automatically getting inline height via JS to ensure that the solution works in a responsive manner.
  • Insert Soliloquy (commercial plugin) slider in a function hooked togenesis_header on the front page.
  • Float the title area using absolute positioning relative to the front page header using CSS.

Step 1

In home.js inside the js directory, comment out or delete both the instances of

$('.front-page-header') .css({'height': newHeight +'px'});
view raw home.js hosted with ❤ by GitHub

Screen Shot 2015-03-15 at 12.40.05 pm

Step 2

Install and activate Soliloquy. Create a slider named say, 'Home Slider' and upload your desired slide images. Use images that are big and wide or as per your design needs. Images used in the demo site are 1600 x 1034.

In the 'Config' tab, select 'Full Width' for Slider Dimensions. Set the width of your slide images in the width field. Set the height to how tall/high you want the slider to be. In the demo site, I used 700.

soliloquy-slider-cafe-pro

Step 3

In front-page.php add the following before closing genesis();:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Still not working. Same issue despite updating JS. Slider is not responsive. The bg image is visible behind the slider & is setting the height…so there is 235px top, 120px bottom where the image is showing through behind the slider. Unfortunately, I am unable to provide link as I don’t have a dev site set-up for this site.

    Reply

  • Would this also work for the altitude pro theme? I want to replace the static image in the first widget area with a soliloquy slider. Not sure if I should follow these directions or the ones for centric or maybe for the parallax theme?

    Reply

  • Okay, I’m stumped. I’ve added this code to the site, but the slider doesn’t appear. I don’t even see it being referenced in the source code.

    If I add it to a widget (I tested it by adding the short code to Front Page 1) it DOES appear there. But the front-page.php function is not adding it. I’ve tried using both the slug (home-slider) and the numerical ID for the slider, but no luck.

    It’s a fresh install and unmodified theme. Any idea what I might be doing wrong?

    My site’s temp URL is: http://ecbiz171.inmotionhosting.com/~kithar5/

    Any ideas what might be wrong?

    Thanks.

    Reply

    • Okay, never mind. Typo in the slider title! (It’s always something stupid…)

      Thanks for the terrific tutorial.

      Reply

  • Friend:

    I need pay for Soliloquy and for me the slider is not good.

    Question:
    How I can insert Slider Pro “http://codecanyon.net/item/slider-pro-responsive-wordpress-slider-plugin/253501” or usind Genesis Responsive Slider

    Reply

  • Hi there.

    Firstly, I got excited but I think the slider isn’t “parallax” is it? Man it would be awesome if it was

    Secondly, your example doesn’t “stretch” – how can that happen?

    David

    Reply

  • Hi Sridhar,

    This is great! And it’s working for me! One question though… is it possible to force the slideshow area to equal the height of the window? And have the bottom navigation always attached (and visible) on the bottom of the window, no matter the size?

    Thanks!
    Kristine

    Reply

  • Hi Can this be done with LayerSlider instead of Soliloquy keeping the menu at the bottom of the screen
    Regards Alistair

    Reply

  • Also you can use Master Slider with this code. Change the 1 to the id of your slider ID
    add_action( ‘genesis_header’, ‘sk_slider’ );
    function sk_slider() {
    masterslider(1);
    }
    genesis();

    Reply

  • Hi Sridar,

    I used this on two sites and the most recent one just brought it to my attention that the slider shifts either to the left or stays in the center on larger monitors. I thought maybe I did something wrong, but your demo is behaving the same way. If you reduce it down – the slider doesn’t stay full width like the backstretch images. Is this possible? The client is using an iMac and she’s a photographer and she wants to make sure her visitors can see her images in the best possible way.

    Here’s a screenshot of what it looks like on your demo – https://drive.google.com/file/d/0Bw1EEUG2USHYd0R0YjJMVWNEcUE/view?usp=sharing.

    Thanks for your help.

    Reply

  • Hello – thanks s this great tutorial! Everything is good, except, The title which should overlay the slider on the homepage is under it.. how do i put it back on top? Also i would like to use a logo image in place of the site title –
    thank you

    Reply
    • >