How to Replace the Main Background Image with Revolution Slider in the Cafe Pro Theme by Genesis

I noticed a lot of people asking about this, so here’s the solution!

  1. Download Slider Revolution from Code Canyon and install it per Code Canyon’s instructions.
  2. Navigate to this folder: /public_html/wp-content/themes/cafe-pro via FTP.
  3. Open the front-page.php file and right before this last bit of code:
    genesis();

    Add this code:

  4. Save the file. This adds the Revolution Slider to our Home Page template.
  5. Open up the Cafe Pro theme’s style.css (/public_html/wp-content/themes/cafe-pro/style.css) file and add this code:

    If you look at the site now, you will see it isn’t quite there yet.
    We need to comment out some JavaScript that is conflicting with our CSS.

  6. Open up the home.js file (/public_html/wp-content/themes/cafe-pro/js/home.js) and comment out both instances of this code:

You did it!

0
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrShare on RedditBuffer this pageDigg thisEmail this to someone
Tell Your Friends

6 Replies to “How to Replace the Main Background Image with Revolution Slider in the Cafe Pro Theme by Genesis”

  1. Thanks for your tutorial. I followed the directions, but now all that displays on the site is this error message:’
    Parse error: syntax error, unexpected ‘\’ (T_NS_SEPARATOR), expecting identifier (T_STRING) in /home3/wabgbg0aadsq/public_html/wp-content/themes/cafe-pro/front-page.php on line 10

    This puzzles me, because I didn’t do anything to that part of the file.

    Looking at your tutorial, I also saw that the front-page template is expecting a slider called “main”. I made certain that I had a slider with that name.

    Do you have any idea what went wrong?

    Best regards,
    Bill

    1. Hey Bill,

      Looks like there is a syntax error somewhere in that file, most likely an unclosed single or double quote above that line in your code (Source). I’m happy to help and you’re right maybe I should make that part a little clearer on the Slider’s name. Can you post a link to your code please? I’m including a copy of the entirety of front-page.php that I’m using on a live site that is working.

  2. Hi Cameron,
    Thanks for your help. I start with your working front-page.php file, and I’ll let you know if I get it working (or not).
    Best regards,
    Bill

  3. This works great except… Is there a way to have the site identity block show over the slider?
    You know black block with the sites title and description in it. I may also want to show a header image where that block goes. I really love this theme and this would be really helpful.

    1. Not really with this set-up, as we are essentially plopping a slider over the theme default. With Revolution Slider you can create custom HTML/CSS blocks on top of your slide though. I think that is the easiest solution to achieving that. You can probably just copy the HTML/CSS that you want from the Chrome Inspector and then replicate that in the slider.

Leave a Reply

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