WP SITES

Log in

Installing Full Width Responsive Slider In Genesis

—

by

Brad Dalton

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

Comments

49 responses to “Installing Full Width Responsive Slider In Genesis”

  1. philr Avatar
    philr

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      Put it in front-page.php

  2. Jason Brantley Avatar
    Jason Brantley

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      Support information. http://wpsites.net/registration/

  3. Chad Ritchie Avatar
    Chad Ritchie

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Chad Ritchie Avatar
        Chad Ritchie

        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!

        1. Brad Dalton Avatar
          Brad Dalton

          Your code is not displaying. Please paste it into a Github Gist and link to it from here.

          1. Chad Ritchie Avatar
            Chad Ritchie

            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. Frances Avatar
    Frances

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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. Chad Ritchie Avatar
    Chad Ritchie

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      Hey Buddy.

      You can either:

      1. Change the hook for the slider and/or nav menu (reposition)
      or
      2. Add a 3rd parameter for positioning priority to one or both hooks.

      Which theme is it?

      1. Chad Ritchie Avatar
        Chad Ritchie

        The theme I am using is Minimum Pro.

        1. Brad Dalton Avatar
          Brad Dalton

          So what did you do Chad? Get this fixed?

          1. Chad Avatar
            Chad

            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?
            [code]
            //* 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’ ); }
            [/code]

          2. Brad Dalton Avatar
            Brad Dalton

            No need to add another function for the slider.

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

          3. Chad Avatar
            Chad

            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?

          4. Brad Dalton Avatar
            Brad Dalton

            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?

            [code]
            add_action( ‘genesis_after_header’, ‘home_slider’, 9 );
            [/code]

            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. Thomas Speak Avatar
    Thomas Speak

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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. Jonathan Wilson Avatar
    Jonathan Wilson

    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! 🙂

    1. Brad Dalton Avatar
      Brad Dalton

      Your Gist didn’t display.

      Add the conditional after the function:
      [code]
      if ( ! is_home() || ! is_front_page() )
      [/code]

      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.

      1. Jonathan Wilson Avatar
        Jonathan Wilson

        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!

        1. Jonathan Wilson Avatar
          Jonathan Wilson

          The embed isn’t working.
          https://gist.github.com/mrjonwilson/c6ae1ed9b70d488ac423

        2. Brad Dalton Avatar
          Brad Dalton

          It depends on what conditionals.

          Just 3 of anything?

  8. Scott Avatar
    Scott

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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. hainusan Avatar
    hainusan

    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. Erin Avatar
    Erin

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Change the hook from [code]genesis_after_header to genesis_before_loop[/code]

      1. Erin Avatar
        Erin

        Thanks, Brad!

        I was using genesis_after_content to hook in in after my nav! Close but not what I needed.

        Thank you so much!

        1. Brad Dalton Avatar
          Brad Dalton

          Hello Erin

          Worked perfectly for me when i tested it locally.

          Try another hook position. http://wpsites.net/web-design/list-of-genesis-hooks/

  11. Nate Avatar
    Nate

    I am using the Metro theme FYI and here is the test site

  12. Nate Avatar
    Nate

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Looks fine to me Nate.

      What was the problem?

      1. Nate Avatar
        Nate

        Hi again, thanks for the quick reply.

        I would like to display only on the front page. At the moment it is displaying on all pages.

        Thanks

        1. Brad Dalton Avatar
          Brad Dalton

          Just updated the post with 2 more options. Posts page and front page.

  13. Chad Ritchie Avatar
    Chad Ritchie

    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

    1. Brad Dalton Avatar
      Brad Dalton

      Just updated your code Chad with the conditional tag for the front page.

      Thanks for the kind words.

      1. Chad Ritchie Avatar
        Chad Ritchie

        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?

        1. Brad Dalton Avatar
          Brad Dalton

          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.

          1. Nate Avatar
            Nate

            Awesome!
            Brilliant. Saved!

            Thanks so much for helping out.

  14. Zimbrul Avatar
    Zimbrul

    I thing there is a paragraph missing at the beginning of the article saying this is about Soliloquy Slider…

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  15. Keith Davis Avatar
    Keith Davis

    Do you ever slow down Brad?

    Is Soliloquy a premium plugin or are you using the free version?

    1. Brad Dalton Avatar
      Brad Dalton

      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?

  16. Jeff Guynn Avatar
    Jeff Guynn

    I’m new to your site and really loving it. I learn something new and useful everyday. Many thanks.

    1. Brad Dalton Avatar
      Brad Dalton

      No worries Jeff.

      Thanks for the kind words.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.