Different Page Sliders in Genesis

We recently worked on a B2B website redesign for Diamond Global, a trusted foreign worker agency used by Canadian employers. One of the requirements was to include a full-width slider on the site with the ability to have different page sliders in Genesis theme Epik. Here is how we did it.

First let’s set the stage. Our Wordpress theme for this project was the Genesis child theme Epik. For the slider we used LayerSlider.

Adding Different Page Sliders in Genesis

Home Page
For the home page we added the slider via the LayerSlider widget through the backend of Wordpress. That was simple. Configuring LayerSlider takes a little time to understand the nuances, but once you do you’ll realize how powerful a slider it is.

Individual Pages

1. We created our sliders for each page or section in LayerSlider.
2. We wrote the code to control which slider displayed on which pages.

   To create each snippet of code we needed to:

   • Know the specific page id
   • Know the slider id
   • Add page id to code for specific slider
   Get Page ID
   Click on the Pages link in the left sidebar in the backend of Wordpress. This will display the list of all pages of your site. Then click on the page you would like to get the page id. (like you would if you were editing the page)
   In the url you will see the following: post=xx. In the example to the right you see post=35.
   35 is the page id.
   Get Slider ID
   To get your Slider id click on the LayerSlider WP link in the left sidebar. You will see a list of sliders created. The first column is called ID and you will see the Slider ID’s next to the Slider name.
   In the example to the right the Industry slider is id 2.

   The code we used for a single page was:

   
<?php
if (  is_page( array (2) ) )
{ ?>
[layerslider id="2"]
<?php }
?>


   The code we used for multiple pages:

   
<?php
if ( is_page( array (29, 31, 33, 35, 39, 75, 205, 664) ) )
{ ?>
[layerslider id="4"]
<?php }
?>


    

   Code Explained
   
<?php - Opening tag for our php snippet

if ( is_page( array (12) ) ) - Conditional statement - if this (or these) page(s)
{ ?> - Start action code

[layerslider id="2"] - Specific slider to add

<?php } - closing tag

?> - closing tag


3. Next we added the Genesis Simple Hooks plugin
4. Finally we entered our hooks code in the “genesis_before_content_sidebar_wrap” field. Because our code uses php and the LayerSlider short code we need to check the two boxes below the input field.

[spacer size=”10″]

That’s it. The end result is you have different page sliders in Genesis and can control the slider on as many pages as you like. For Diamond Global we have 20 different sliders displaying across the site.

Surge Labs is a conversion optimization company helping companies improve conversions by 20% or more. The knowledge we gain through conversion optimizations benefits the websites we design. Need help building or redesigning your site to be conversion focussed? Contact us at 678-951-9506, via email at info at surgelabs.com, or complete our FastForm.