WP SITES

2722

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

Installing Full Width Responsive Slider In Genesis

In this tutorial, i’ll show you what i consider to be the best way to add the fastest loading full width slider to your home page.

This is the fastest loading slider plugin i have tested and doesn’t require any custom coding to make it mobile responsive.

Simply paste this code at the end of your child themes functions.php file using Notepad++.

You may need to replace home-page in the code above to the ID or slug of your slider.

download

The above slider is installed in the Minimum Pro child theme by StudioPress.

Add On Front Page Only

Use this code if you only want to display the full width slider on the front page of your website.

Blog Page Template Only ( Posts Page )

If you want to display your slider before your posts page which uses the blog page template, change the conditional tag from is_front_page() to genesis_is_blog_template() like this :

Related Tutorials

Reader Interactions

Comments

  1. Hi Brad
    If just using slider on front page, is putting the code in functions.php result in a faster load time than putting in front-page.php? Which way is best? is there pro’s and con’s to either way?

  2. Great post Brad!

    I have this almost working, but for some reason my mobile drop down menu is not working. I’ve been banging my head on this for hours and can’t sort it out. If you drop the view port down under 720px on the home page you’ll see what I mean.

    You can click on any of the sliders to move to another page in the site and see the mobile menu works everywhere but the home page where I have put this slider in.

    Using Soliloquy and Minimum Pro, and followed you instructions above.

    Can’t figure out what customization I have done that is causing this?

    Thanks for your great site and email list!

  3. Brad,
    I have added a full width slider to our band site. Not sure what has happened, but now I can’t get a sidebar to appear on our news (blog) page. Any suggestions as to what might be causing this problem?
    The News page has been set to show posts and the Home page set to static. http://cl.ly/image/2G0j3x342C00

    The news page has been set to display Content>sidebar. http://cl.ly/image/0w28253E0x3h

    Here is the function I am using to display the full width slider.

    Thanks!

    • What is your code and what slider did you use?

      If your theme includes a front-page.php or home.php file then you don’t need to change the Reading settings which may have caused the problem.

      • I am using a child theme for Minimum Pro.
        Here is the front.php code.

        Here is my functions.php code.

        I am using the Soliloquy v2 slider.

        Thanks!

          • Gist was set to secret must have been the reason it wasn’t displaying.

            Here is the front-papge.php file.

            Here is the function.php file.

  4. Brad I got rid of Genesis Slider, installed the Soliloquy plugin and it worked super well. Only question. My images aren’t very sharp, what is the best image size for the full width. If you’ve answered this question a million times already i’m sorry, it’s a bit different when it personalized. Thank you so much!

    • Good move, nothing against the Genesis slider but Soliloquy is easy to hook in directly with the template tag the slider includes.

      I think you should crop them to the exact same size before uploading.

      The size depends on what sized screen you want them to look best on i think as you have to take into account some people use those really big Apple monitors so try 1600 width and the work down by 100px in testing until you get the right size.

      I don’t use a slider myself but i do know making sure they are all exactly the same size before uploading works best once you get the size worked out.

  5. Brad,
    I’ve ran into a situation that is putting the Primary Navigation under the slider. Anyway to have the Primary Navigation above the slider?
    I’ve tried “genesis_after_header” function but it’s not working.

    Thanks!

          • I’m not sure how to reposition the nav/slider hook.
            I have added the Soliloquy slider to the Minimum Pro theme via the functions.php and haven’t altered the page files at all—is this where the reposition needs to take place or in the functions.php file?

            Is there a function to reposition the slider AFTER the nav?

            //* Adds Soliloquy Slider to Home Page only
add_action( 'genesis_after_header', 'home_slider', 9 );

function home_slider() {
	if ( is_front_page() && function_exists( 'soliloquy_slider' ) )
	soliloquy_slider( '4' ); }

          • No need to add another function for the slider.

            Only if you want to reposition the nav menu but try repositioning the slider.

          • I’m not sure how to reposition the nav/slider hook.
            I have added the Soliloquy slider to the Minimum Pro theme via the functions.php and haven’t altered the page files at all—is this where the reposition needs to take place or in the functions.php file?

            Is there a function to reposition the slider AFTER the nav?

          • Simply change the hook or 3rd parameter in the action to change the position the slider outputs.

            This line contains the code which needs modifying?

            add_action( 'genesis_after_header', 'home_slider', 9 );

            Change genesis-after_header and/or the number 9 to a higher or lower number depending on exactly where you want your slider to output in relation to other functions using the same hook.

  6. Just have to say, you are the man. I am learning so much from all your material you are providing. I am just getting into Genesis and WP development in general and your resources are priceless.

    Thank you.

    • Hello Thomas

      I find taking code from one child theme and using it on others is very easy with StudioPress as all the code works on Genesis which is why i own all the SP child themes.

  7. Hi Brad! Thanks for the post. This worked great!

    I do have a question. I’m trying to use the backstretch functionality in the Agency Pro theme along with this slider code. When I have them both enabled in functions.php, the site won’t load. For now I have the following code commented so it doesn’t load at all.

    Here is the gist for the backstretch code:

    How do I do a conditional for only allowing the backstretch code to load on pages that are *not* the front/homepage?

    Thanks! 🙂

    • Your Gist didn’t display.

      Add the conditional after the function:

      if ( ! is_home() || ! is_front_page() )

      The is_home() conditional refers to the posts page set in your Reading Settings so it can be the front page or a specific posts page like a blog page.

      • Sorry about that! I had the Gist marked secret.

        Am I adding the code you mentioned after the backstretch function? How would I do 3 conditionals?

        Thanks Brad!

        • The embed isn’t working.


          add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
          function agency_enqueue_backstretch_scripts() {
          //* Load scripts only if custom background is being used
          if ( ! get_background_image() ) //Do I add something here?
          return;
          wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
          wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );
          wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );
          }

          view raw

          backstretch-agency.php

          hosted with ❤ by GitHub

  8. Hello Brad,

    What settings are you using for the soliloquy slider to fit the full width? What size images are you using as well? Thanks for the great tips!

    • I can’t remember exactly but i think it was 2000px width.

      I do remember testing other sliders and this only worked with Soliloquy which is why i wrote the post.

  9. Hi Brad , I use the genesis responsive slider, but I can not make it into full size, now I will try to use plugin that you recommend. thanks for the tutorial

  10. Thanks for the tutorial. Great site.

    I am trying to do this and move this over to the right. Nothing I’m doing seems to be working. I just don’t need it to be full width, as I’m using a sidebar on the homepage.

  12. Hi
    I am also trying to insert the slider into the home page only. I tried using the code above but nothing appears. I have changed the number so it is getting my slider but still it does not work.

  13. Brad, thank you for all of your helpful tutorials.

    I am trying to add the Soliloquy Lite slider to my church web site home page only. However, the slider is showing up on all of the pages. Any advice on what I am doing wrong?

    I added the following code to the Minimum Pro theme functions.php file

      • Brad, that’s exactly what I was looking for. Thanks so much—you are the man!
        So let me get this straight.
        Home page = is_front_page()
        and
        Blog page = is_home()
        Am I understanding this correctly?

        • Hello Chad

          is_front_page() conditional will always return true on the front page.

          is_home() returns true based on your Reading Settings.

          If you use the default settings, then your front page will display your posts so either conditional will return true for the front page.

          If you change the default Reading Settings and use a static page as your front page and a blog page as your posts page then the is_home() conditional will return true on your blog page (posts page in reading settings)

          The is_home() conditional tag will NOT return true for the front page of your site when you change the Reading settings and select as static page as your posts page.

    • Sorry, the slider i use is Soliloquy Pro and it loads really fast especially when installed using the code in this tutorial.

      Would be slower if using a shortcode in a widget for any slider because the widget has to load, then the widget styling and then the shortcode and then the slider function.

    • I did use the free version for awhile but its only $19 for the premium so i just purchased it.

      There’s a lot you can do with the plugin and its very flexible.

      It loads faster than any other slider and re-sizes really well.

      What slider plugin do you normally use Keith?

Leave a Reply