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.
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 :
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?
Put it in front-page.php
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!
Support information. http://wpsites.net/registration/
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!
Your code is not displaying. Please paste it into a Github Gist and link to it from here.
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.
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.
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!
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?
The theme I am using is Minimum Pro.
So what did you do Chad? Get this fixed?
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?
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?
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.
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.
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:
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.
https://gist.github.com/mrjonwilson/c6ae1ed9b70d488ac423
It depends on what conditionals.
Just 3 of anything?
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.
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
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.
Change the hook from
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!
Hello Erin
Worked perfectly for me when i tested it locally.
Try another hook position. http://wpsites.net/web-design/list-of-genesis-hooks/
I am using the Metro theme FYI and here is the test site
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.
Looks fine to me Nate.
What was the problem?
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
Just updated the post with 2 more options. Posts page and front page.
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
Just updated your code Chad with the conditional tag for the front page.
Thanks for the kind words.
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.
Awesome!
Brilliant. Saved!
Thanks so much for helping out.
I thing there is a paragraph missing at the beginning of the article saying this is about Soliloquy Slider…
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.
Do you ever slow down Brad?
Is Soliloquy a premium plugin or are you using the free version?
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?
I’m new to your site and really loving it. I learn something new and useful everyday. Many thanks.
No worries Jeff.
Thanks for the kind words.