Full width Slider in Parallax Pro

In this beginner level article I show how a full width Genesis Responsive Slider can be set up below the header in homepage of Parallax Pro on the lines of my tutorial for Minimum Pro.


Step 1

Register a widget area for the Home Slider by adding the following in functions.php:

1 2 3 4 5
genesis_register_sidebar( array(
'id' => 'home-slider',
'name' => __( 'Home Slider', 'parallax' ),
'description' => __( 'This is the home slider widget area.', 'parallax' ),
) );
view raw functions.php hosted with ❤ by GitHub

Step 2

Let’s display this Home Slider widget area above Home Section 1.

Edit front-page.php.


if ( is_active_sidebar( 'home-section-1' ) || is_active_sidebar( 'home-section-2' ) || is_active_sidebar( 'home-section-3' ) || is_active_sidebar( 'home-section-4' ) || is_active_sidebar( 'home-section-5' ) ) {
view raw gistfile1.php hosted with ❤ by GitHub


if ( is_active_sidebar( 'home-section-1' ) || is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-section-2' ) || is_active_sidebar( 'home-section-3' ) || is_active_sidebar( 'home-section-4' ) || is_active_sidebar( 'home-section-5' ) ) {
view raw gistfile2.php hosted with ❤ by GitHub

and add

1 2 3 4
genesis_widget_area( 'home-slider', array(
'before' => '<div class="home-slider widget-area">',
'after' => '</div>',
) );
view raw gistfile4.php hosted with ❤ by GitHub

immediately before

1 2 3 4
genesis_widget_area( 'home-section-1', array(
'before' => '<div class="home-odd home-section-1 widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
view raw gistfile3.php hosted with ❤ by GitHub

Step 3

Install and activate Genesis Responsive Slider.

Below are the settings used in my test site for this tutorial:


Go to Appearance > Widgets and drag Genesis – Responsive Slider widget into the Home Slider widget area.

Screen Shot 2014-03-17 at 11.49.13 AM

Step 4

Add the following in style.css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
/* Full width Slider
------------------------------------------ */
.home-slider #genesis-responsive-slider {
border: none;
padding: 0;
.home-slider .slide-excerpt-border p {
margin-bottom: 0;
.home-slider .flex-control-nav li a,
.home-slider .flex-direction-nav li a {
border-bottom: none;
.home-slider .flex-direction-nav li .prev {
left: 0;
.home-slider .flex-direction-nav li .next {
right: 0;
.home-slider .flexslider .slides img {
width: 100%;
.home-slider .flexslider {
max-width: 100%;
@media only screen and (max-width: 768px) {
.home-slider .slide-excerpt {
width: 100%;
@media only screen and (max-width: 568px) {
.home-slider .slide-excerpt {
display: none;
.home-slider .flex-direction-nav {
display: none;
view raw style.css hosted with ❤ by GitHub

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 655 other subscribers


Found this article helpful?


  1. K Askins says

    this is very helpful and a great start for me! i tried to use the same instructions for magazine pro. so that i could add a slider the same way but its showing up in the home page content area instead of at the top like this example. any tips?
    thanks again!

  2. Mark Purvis says

    Hi Sridhar,
    Thank you for posting so many helpful tips about customizing Genesis. I have tried to use this tutorial, actually starting with the Minimum-Pro theme, to add a Royal Slider to both the Minimum and Parallax themes with success only with the Genesis Responsive Slider.
    Is there something I’m missing in order to use this technique to add other sliders? My typical use is Royal Slider and Layer Slider plugins. The Royal Slider doesn’t stay within the container created by the widget area, but flows horizontally down the page.
    I’m using a sandbox site, but could send you a url in private email if that helps.
    Thanks again for all your time and hard work.
    Warmest regards,

  3. André says

    Hi, this is great! However, I am struggling to change the look of the excerpt. I’d like to amend it to something in between the excerpt from Outpost Pro (the transparent box) and Executive Pro (the left block). Whenever I am changing the CSS the CSS from the plugin is used rather than the custom CSS. I cannot remove the border and add other CSS values. It looks like html > body .slide-excerpt-border from the plugin CSS overrides all. Is there anything I need to change in addition? Many thanks!


  4. David says

    I have added a Soliloquy slider using this method.

    My question is, how to make that slider section, also parallax?
    It just scrolls through like the mobile version.

  5. says

    Sweet! Thank you soooo much for these instructions. Worked like a charm! One question…I would like to remove the border around my slider image. I want my image to fill the entire length of the screen. The current size of my image & the settings in the slider is 1700 x 500. Thanks for any help!!! Again, thank you for the details!

Leave a Reply

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

+ five = 6

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>