Revolution Slider – How to add to homepage only

Revolution slider Responsive WordPress Plugin from Theme Punch

Recently I was looking for a responsive WordPress slider to use on my front page website found at BDI Media. After looking at several Slider plugins I decided to run with the With the Revolution slider Responsive WordPress Plugin from Theme Punch.

Its a powerful plugin filled with many features (well beyond my expectations) and everything seems to fit the bill.

Adding the Revolution slider to the homepage only

Obviously I did not want the slider to appear on every page as that would have been too excessive for the design and appearing only on the homepage would be sufficient! The notes in the Plugin documentation does give the code for putting the slider into the homepage, however after a late night working on a test page I was completely ‘stumped’ to get the same result on the homepage!

The Revolution slider would appear fine but the original header image would appear underneath the slider and I was thinking surely there is some more code to add or change!

‘Googled’ the issue and found a number of posts relating to the code problem but none I could see could resolve the issue. So it was back to firing up Firebug and setting up a test site. Its great when you get that eureka moment late at night and the code you put in works!

I thought the slider is a great product and a shame that other people may have the same problem and decide the shelve the product so I thought I had best share the solution with everyone.

I will not highlight the suggested way of inserting the slider and its ‘pitfalls’ or installing the slider into wordpress. I have included the install link below at the end of this blog.

So follow the below instructions and you will have your slider on the homepage only without any other coding issues.

1. As per instructions make your slider as normal in the ‘control panel’ of the Revolution Slider’ and save it. In my case I have called the slider ‘intro1′.

2. There is only two snippets of code to change in your child theme files these are to the header.php file and the style.css sheet.

3. Firstly head over to your header.php file in your child theme and find the snippet of code that ends </hgroup> its round about line 76

Header code for inserting Revolution slider

Directly below the </hgroup> line, add <?php putRevSlider(“intro1″,”homepage”) ?> as seen below:

Header code for revolution slider with code added

Remember to change ‘intro1′ to the name of your saved slider!

This part of the code inserts your slider into the header

4. Now open your style.css in your child theme and add this snippet of code to the bottom of the sheet:

/* REMOVES HEADER IMAGE FROM HOMEPAGE */

.home header#branding a img{display:none;}

As in the image below:

Adding code to the css sheet

This snippet of code removes the header image bit allows the container to display the slider!

Once you have made the above changes you will have your Revolution slider working and displaying in the header area of your homepage only!

Hope this has helped a few painful hours and if you think it has helped please leave a comment below!