• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2966

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Subscriptions
  • Access
  • Log in

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

  • Add Soliloquy Slider In Header of Any Theme

Slider

Reader Interactions

Comments

  1. philr says

    March 11, 2016 at 3:45 pm

    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?

    Reply
    • Brad Dalton says

      March 11, 2016 at 6:00 pm

      Put it in front-page.php

      Reply
  2. Jason Brantley says

    November 23, 2014 at 2:45 am

    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!

    Reply
    • Brad Dalton says

      November 23, 2014 at 2:52 am

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

      Reply
  3. Chad Ritchie says

    June 20, 2014 at 11:01 am

    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!

    Reply
    • Brad Dalton says

      June 20, 2014 at 11:10 am

      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.

      Reply
      • Chad Ritchie says

        June 20, 2014 at 4:57 pm

        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!

        Reply
        • Brad Dalton says

          June 20, 2014 at 11:16 pm

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

          Reply
          • Chad Ritchie says

            June 21, 2014 at 12:54 am

            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 says

    May 22, 2014 at 5:25 pm

    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!

    Reply
    • Brad Dalton says

      May 22, 2014 at 5:35 pm

      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.

      Reply
  5. Chad Ritchie says

    May 19, 2014 at 8:53 pm

    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!

    Reply
    • Brad Dalton says

      May 20, 2014 at 3:46 am

      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?

      Reply
      • Chad Ritchie says

        May 20, 2014 at 3:27 pm

        The theme I am using is Minimum Pro.

        Reply
        • Brad Dalton says

          May 20, 2014 at 5:13 pm

          So what did you do Chad? Get this fixed?

          Reply
          • Chad says

            May 20, 2014 at 5:41 pm

            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' ); }
          • Brad Dalton says

            May 20, 2014 at 5:52 pm

            No need to add another function for the slider.

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

          • Chad says

            May 20, 2014 at 5:43 pm

            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?

          • Brad Dalton says

            May 20, 2014 at 5:50 pm

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

    May 16, 2014 at 12:44 am

    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.

    Reply
    • Brad Dalton says

      May 16, 2014 at 1:55 am

      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.

      Reply
  7. Jonathan Wilson says

    May 5, 2014 at 10:54 pm

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

    Reply
    • Brad Dalton says

      May 5, 2014 at 11:11 pm

      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.

      Reply
      • Jonathan Wilson says

        May 6, 2014 at 3:17 am

        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!

        Reply
        • Jonathan Wilson says

          May 6, 2014 at 3:18 am

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

          Reply
        • Brad Dalton says

          May 6, 2014 at 5:36 am

          It depends on what conditionals.

          Just 3 of anything?

          Reply
  8. Scott says

    January 16, 2014 at 9:42 pm

    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!

    Reply
    • Brad Dalton says

      January 17, 2014 at 12:32 am

      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.

      Reply
  9. hainusan says

    December 30, 2013 at 4:26 am

    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

    Reply
  10. Erin says

    November 1, 2013 at 8:02 am

    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.

    Reply
    • Brad Dalton says

      November 1, 2013 at 3:00 pm

      Change the hook from

      genesis_after_header to genesis_before_loop
      Reply
      • Erin says

        November 1, 2013 at 3:31 pm

        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!

        Reply
        • Brad Dalton says

          November 1, 2013 at 4:28 pm

          Hello Erin

          Worked perfectly for me when i tested it locally.

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

          Reply
  11. Nate says

    October 30, 2013 at 4:47 am

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

    Reply
  12. Nate says

    October 30, 2013 at 4:45 am

    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.

    Reply
    • Brad Dalton says

      October 30, 2013 at 11:58 am

      Looks fine to me Nate.

      What was the problem?

      Reply
      • Nate says

        October 30, 2013 at 10:47 pm

        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

        Reply
        • Brad Dalton says

          October 30, 2013 at 11:55 pm

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

          Reply
  13. Chad Ritchie says

    October 18, 2013 at 2:42 pm

    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

    Reply
    • Brad Dalton says

      October 18, 2013 at 2:56 pm

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

      Thanks for the kind words.

      Reply
      • Chad Ritchie says

        October 31, 2013 at 3:51 pm

        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?

        Reply
        • Brad Dalton says

          October 31, 2013 at 4:03 pm

          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.

          Reply
          • Nate says

            October 31, 2013 at 10:42 pm

            Awesome!
            Brilliant. Saved!

            Thanks so much for helping out.

  14. Zimbrul says

    September 18, 2013 at 9:49 am

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

    Reply
    • Brad Dalton says

      September 18, 2013 at 2:51 pm

      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.

      Reply
  15. Keith Davis says

    September 16, 2013 at 8:01 pm

    Do you ever slow down Brad?

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

    Reply
    • Brad Dalton says

      September 16, 2013 at 8:36 pm

      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?

      Reply
  16. Jeff Guynn says

    September 16, 2013 at 6:39 pm

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

    Reply
    • Brad Dalton says

      September 16, 2013 at 7:36 pm

      No worries Jeff.

      Thanks for the kind words.

      Reply

Leave a Reply Cancel reply

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

Primary Sidebar

Code written by Brad Dalton specialist for Genesis & WooCommerce.

Advertise · WPEngine · Genesis · Log in

  • Account
  • Consulting
  • Post Tags
  • Contact
  • Terms
  • Monthly Membership
  • Yearly Subscriptions
  • Log in
 

Loading Comments...