Genesis Responsive Slider – What Studio Press does NOT tell You
The Genesis Responsive Slider has been added to a Genesis Child Theme!
This post about the Genesis Responsive Slider was originally published on April 22, 2012. The response has been so great that we have decided to update it a little bit and send it out again. Please check the comment area too. There has been a lot of good discussion about the Genesis Responsive Slider there too.
I know, you think that with all the sliders available why would you need a new one? But this one, called Responsive Slider, is included with a Genesis Child Theme. StudioPress Themes are well known for their Genesis framework and the fantastic child themes to use with them. I’ve found Genesis to have nice clean code that is SEO friendly. Their themes are easy to use and produce a user friendly and visually pleasing website.
This new Genesis Responsive Slider is used in several Genesis themes. Since it is relatively new it seems as though they are still working through some issues with the slider. Update: Even though the Genesis Responsive Slider is not so new anymore the documentation is still lacking. Their forum is loaded with questions about this Responsive Slider. There are some tricks you need to use to make this Genesis Responsive Slider work correctly. Let’s try to make things a little more clear here.
Here is what I did to create an awesome Responsive Slider
The Genesis Responsive Slider can pull its images and content from either pages or posts. This is set in the Responsive Slider settings – found in your WordPress CMS settings under the Genesis tab. My example shows using pages. You can see that I have chosen to use the “include” option and have entered my page IDs.
If you are wondering where you get the Page ID it is rather simple but not often known by some new WordPress CMS users. Go to your Pages tab and click on All Pages. When you see the desired page that you want just hover your mouse over the page title and you will see on the left bottom side of your window a URL of the page. It will include in the string something like “post=18&action=edit”. Whatever that number is (this one is 18) determines your page ID. Simply take that page ID and insert it in your “include” option. Do the opposite if you are excluding. This same process works for both posts and pages.
Create a new page (or post depending on what you are using for your Responsive Slider) in your WordPress CMS
- In your WordPress CMS go to the Page tab—Add new.
- Enter all the content that you would like included in the page.
- Upload the image you would like to use as a “featured image.” The slider pulls from the first image inserted in your page. If you put an image in the content it will pull that one. This is not advised because you need a certain image size for your slider to work correctly.
Image size: 950px X 300px. This image will be partially hidden by the part of your slider that has the description in it (this is pulled from your page content). If you don’t mind part of your image being hidden behind this it will be fine. Update: With wider screen widths being used more frequently now you may want to adjust your image size to fit a wider width. - If you would like your whole image to show up then you will need to do a little fine tuning in Photoshop or a similar program.
- Create a new image file with the width 950px and the height 350px. Background contents: transparent. If you do not have Photoshop a program like Gimp should do the trick.
- PLEASE NOTE My Slider Excerpt Width (in percentage): 26. Have your slider image ready to go. This image size should be 630px X 300px (this depends on your slider excerpt width). Place your desired image and move it all the way to the right side (the slide description will be shown on the left side).
- Save for web and devices as a .png file.
- Upload this image file to your page Featured Image.
Content for your slider description is pulled from your page content and here is another place where Genesis should have done a little more work before they launched the Responsive Slider.
Slider pages must use the “more tag”. Place the more tag after about 103 characters. It is best if this is a line by itself at the top of your page content because you will need a space after it so the Read More button places correctly. (Note: I have entered a line height in the CSS — input[type="button"] line-height:34px;. That helps with the placement of the Read More button but it puts it right after the last word–not in a separate line.
With these instruction you will want to make adjustments for your particular Genesis Responsive Slider size and images.
Have any questions or more information to add? Let us know in the comment section below.
This plugin allows you to create a simple responsive slider that displays the featured image, along with the title and excerpt from each post.
Hi Eliz,
Thanks for your post. I did work on it, just as you said but my slider looks awful. Somehow even if I change the size settings it looks so out of place. There’s numerous boxes. I was wondering..have you used other sliders that are better?
Thanks!
camille
Hi Camille, sorry you’re having trouble with the slider. It is a pesky little thing sometimes. I wonder if you would be better off using the responsive slider with no text next to the image – that is just an image that is for example 950×300? I used the responsive slider like that on another one of our websites. Web designers Las Vegas
I’m assuming you are using a Genesis child theme. I’ve used a couple other sliders with Genesis child themes. But some of the themes are set up for using just one type slider. You can change but will take some coding. You might check out the Genesis Slider and see if that will work with the theme you are using.
Thank you so much for commenting. Let me know if you have any more questions. I’ll be glad to try and help.
Iam using a featured image from my maing page. Set it up the first time without fail. Using the silder to display one image (logo). Well I have just added a new page and now can not for the life of me figure out how to get the image to appear in the slider again. It just wants to pull from the newly added page. I have tried editing the dates on pages, etc. but nothing seems to work. Also I am using the “EDUCATION” theme
I hope you resolved this. I just saw your comment. If you are still having problems with the slider feel free to email me at slider(at)rankingedge dot com.
Hi Eliz,
I just started playing around with the Genesis framework and slider and I’m loving it so far! So clean, visually appealing and easy to use. Good tip on how to use pages with the slider…I couldn’t quite figure that out before. Thank you!
On another note, have you noticed that with any child themes that there is a 1 pixel white border between the menu bar and the slider (using the executive child theme)? It even wraps around 1 pixel down too. I’m a CSS noobie but I can’t seem to find where that white space is coded in the stylesheet.
I actually figured the 1 pixel thing out 🙂
It’s the box shadow:
#inner {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
background-color: #fff;
box-shadow: 0 0 0 1px #fff;
clear: both;
margin: 0 auto;
overflow: hidden;
}
Great David. Thank you for posting how you fixed the 1 px border. It is so much better than just saying you got it fixed. This should be able to help others too. Much appreciated.
Firebug can be a big help with fixing CSS and site issues.
I’m sorry I didn’t see your comment earlier or I would have replied sooner. Way to go in getting it figured out so your Responsive Slider is just how you want it.
Thanks!
I’m more of a N00b… What did you do to actually alter the appearance? Go in and edit the CSS file? If so, to what?
Hi James. Can you be a little more specific about what part of the appearance you would like to change?
Thanks, this was useful. I did most of this but how do you get the button to show up to say read more? Do I need to add some code somewhere for the button?
Thank you for your comment May. Can you tell me which Genesis Child Theme you are using please? It should be set up to include the button.
I worked out that you have to choose full post for the read more to show up.
The second problem is how the button is squashed up in terms of height and also it shows up right after where the text ends. I tried adding paragraph breaks but to no avail.
You may have to play around with the content that is before the “more” tag to get it exactly how you want it. I’ve had the same thing happen with the button and I just adjusted the amount of words before the more tag and sometimes added a line break between a heading and the content.
THANK YOU!!!! You provided clear instructions with an easy solution to something that was getting me a bit frustrated. Yay!
I’m so glad we could help you with the Genesis Responsive Slider. We first wrote this out of frustration so it is always great to be able to help someone make the process a little more simple.
Thank you! I was getting extremely aggravated, so much so I was having evil thoughts of ripping my keyboard out from the pc & putting a beat down on someone at studiopress…
Thanks for the laugh. I needed it. It has been a source of aggravation for many people. StudioPress documentation for the slider is next to none. You would really think they would get it together for their Responsive Slider. They are such great themes and so well coded I just can’t understand why they are lacking in this documentation. The forums are full of people asking questions about it.
Glad we could help and that your pc is still in one piece.
I have looked for how to create an Responsive Slider for much time,thank you for your sharing,this is really useful.
Glad we could help Grace!
Thank you very much,i have used it ,it is amazing.
I added a twist to the slider’s featured image. Yes, the images needs to be custom made for the slider’s dimensions, so the excerpt doesn’t cover the wrong part of the image. However, when the site goes mobile the excerpt box is dropped off, leaving just the image looking strange. Since I photoshopped the image to show the main image subject off to one side for aesthetics, I added text to the image (under the excerpt area) to briefly explain what the excerpt said. Mobile users still get to see what I had to say in the slider and desktop users never see anything but the excerpt. If anyone needs an example, I will post a link.
Eric, that’s such a great idea. I’m going to do that too. It’s funny, I have so many websites that use the Genesis framework but this site does not. I’m going to switch it today to Genesis and I’ll play around more with the slider. BTW, I looked at your website. Very Nice!
Recently, however, I had need of this myself. I am working on a client site and they are using this massive and confusing theme that is getting a bit dated. I’ve been asked to bring it up to Genesis but retain much of the existing functionality. They had a custom slider on the front page, but it isn’t responsive and it requires custom code which might break on updates then the theme has to be updated. I much prefer the idea of using the Genesis Responsive Slider because it is responsive and if a WordPress update ever breaks things there is a great team behind it that will update the plugin.
The Genesis Responsive Slider should work well for your client’s website. We use Genesis child themes on the majority of websites we develop for clients. A big reason is because any changes made in the child theme are not touched or changed when the Genesis framework is updated. Combining the Responsive Slider with a Genesis child theme should really help keep your site from ‘breaking’ when updates need to be performed.
I am having a problem with the genesis responsive slider for a new client’s site .. I have used before with no issues. Currently, I can’t get the picture to display across the full screen (1140) keeps displaying only 920 and a white box to the side. Any suggestions?
I would double check your display settings and content settings at the bottom of the Genesis Slider settings and make sure they coincide with what you need.
Hey Pam,
Did you ever figure this out? I am stuck too and its killing me.
Ryan
Hi Ryan, can you show us a link to your site, if it is available to be seen, so we can check it out a little further? Thanks!
Ryan,
I used regenerate thumbnails plug-in – install it. then go through to each of your pictures and have it regenerate the picture – should display complete length of the slider! Good luck
I got it taken care of. Thank you!
Do you know if there is a way to get thumnbnail pics on the Genesis Minimal Theme home page? Looks like I would have to code it in.
https://www.slapshare.com
The GPP Slideshow plugin is one of the most attractive responsive sliders available for WordPress. It creates a minimalist image gallery on your post or page using a shortcode. You can also drop its built-in widget into any widgetized area. Check out the live demo to see it in action.
Good to know Claudine. Not all of the slider plugins will work in the widgetized areas. I think it is a very good asset.
Thank you so much! That really helped!
Glad we could help Jamie! It’s a great slider once you have it figured out how to make it work the best for your website.
I’m using the slider on a couple of demo sites using the newest genesis framework and the education theme, but there are 2 issues I’m having trouble with:
1) You lose formatting in the text for the excerpt. No matter what I try, I can’t get line breaks, H tags or anything else to display properly. any ideas? (demo site is: https://www.protennisweb.com)
2) On a mobile phone, as someone stated, the text excerpt disappears. Since the user will be adding content to the slider, (I use recent posts for the slider) it won’t work to add text to the image, they can’t do that. Any ideas?
Thanks in advance.
I only took a quick look at your demo site. I’ve about had it for the night but I’ll try to take a more thorough look at it tomorrow and see how I can help you out with the responsive slider.
Hi
Thanks for this great article, which is exactly what is missing from the studiopress documentation. I now have this working as a result. Just one query, I cant seem to change the input button line height. Do I need to add the CSS in a specific place? I tried at the end of the file and in the input button section but no change. What I would really like to do is modify the button to be smaller (padding?) and use your positioning. No luck on the studio press forums or support. Its for a local dev site but yes I have used the slider on my site. Thanks in advance
Hi Sam, have you tried any of the settings in the CSS for
input[type="button"], input[type="submit"], #home-slider a.more-link? Or the padding in#home-slider pI’m not exactly clear what you would like the result to be. But if you just want the button to be smaller have you tried making a new button.png image?
thankyou thankyou I am new to wordpress the slider had me lost.
You are quite welcome. So glad we could help with the slider.
I originally had the Innov8ive child theme that came with the genesis responsive slider. When I decided to switch to the Eleven40 child theme, the slider remained and for some reason, it appeared as a widget in my page title area. It looked pretty nice because i never had any problems with the images being too large whatsoever but I only wanted for it to appear on my homepage/frontpage only vs. on every page. If you can suggest something to fix this, i’d appreciate.
Can you move the slider from the page title widget area and insert it in the home page widget area. I’m not using Eleven40 right now but I can put it on a test site to see if you can’t figure it out.
Eliz, thanks for replying . The problem is that, the Eleven40 child theme doesn’t come with a homepage widget.
I kind of figured as much but thought it was worth a try without looking at Eleven40. I would first submit a ticket at StudioPress or ask in the community forum. If that doesn’t help, come on back and I’ll see what I can figure out.
Will do. Thanks Eliz.
The slider does not work properly with eleven40 theme. It should be fixed for that theme too…
Studio Press support is awesome. I would check with them about the Genesis Responsive Slider and using the eleven40 theme.
I followed all the steps mentioned above but I am not getting the more tag as I can see in the snapshot. Is there anything that I missed or need to do to get it added?
Thanks in advance,
Esther
Hi Esther. I’m not sure what the problem is with not getting the “more” tag to show up. I just tried mine again and it worked fine. Have you tested the tag on any other posts or pages?
If your Genesis based theme is not mobile responsive, use the Genesis slider . If you have a mobile responsive theme that is based on the Genesis framework , use the Genesis Responsive Slider .
Thanks Rogelio. Good points.
The GPP Slideshow plugin is one of the most attractive responsive sliders available for WordPress. It creates a minimalist image gallery on your post or page using a shortcode. You can also drop its built-in widget into any widgetized area. Check out the live demo to see it in action.
Thanks Elmer. It’s always good to know about other responsive sliders.
I’m having an issue in setting the slider to full screen for various screen sizes.
I Set up a Widget in the Content area (full page layout) holding the Slider.
The slider should display full screen, below the nav bar; i.e. between the nav bar and down to fold and full width. In this application, since all screen sizes vary, there must be a default slider size and corresponding image size.
Any ideas how to accomplish this?
Hi Vito. Did you try a width of 1140px? It’s worth a try but you might have some difficulty using the responsive slider to get a full screen slider. Flex Slider is good for full screen.
You really have an impressive an comprehensive website…
Your writing style is fun and easy to read.
I love Genesis Themes and am using the Agency Theme for our new site.
I am having trouble getting the photo in the genesis responsive slider to have the picture fill up the entire slider.
I do not want an excerpt on the side.
I have uploaded my photos to be 950×300 and still the excerpt white area appears on the side.
Any suggestions would be much appreciated.
I will only answer your question if I get a cupcake 🙂 Just kidding! I just looked at your website and it looks like you have it working on one of your images. Are you still having a problem with it?
I am using Minimum Pro theme and would like to have a fixed header like you have on https://webdesignerslasvegas.net/. Could anyone point me in a direction how I can change the stretchable header to a fixed size one? My website is https://www.sigrun.com and sadly my images don’t look well in a stretchable theme.
Hello, this has been fabulous. I was having trouble with the slider on the Outreach theme and who knew that hovering over the post title would give you the number of the post so you can specify which number to include in the slider!!
There is a small white gap (when viewed on a desktop, not iPad or iPhone) but I gather that’s because the pic is not wide enough?
https://intouchkinesiology.com/
Honestly, it’s like learning a new language and posts like yours are a godsend to relatively newbies like me.
Thanks again.
Lisa
The Genesis Responsive Slider is a little tricky, isn’t it. Glad you mentioned about how to find the post title number. You would think there would be an easier way for that.
I just saw this comment, sorry I didn’t reply sooner. Did you resize your image to make it work so there isn’t a “small white gap” in the slider?
Greetings… I am using the Genesis Responsive Slider on the Legacy Child Theme. The slider works fine, but I need to tweak it a bit and can’t figure out how. I am choosing the “display content in slider” setting, but I would like to use it more as a descriptive title of the picture than an excerpt of the content… basically a one-line kind of thing. And my content is only one line, so no problem there.
BUT, I want to make the text smaller, decrease the padding on the text box and make the text box a different color than the opaque white it has now. Maybe a shade of gray. I can’t find the settings for this in the CSS. Help? The site in question is not published, but the dev URL is https://69.89.31.145/~aedgnet/.
Thanks.
Hi Gary, I just saw your comment. Sorry I wasn’t more prompt. Did you get your issue with the Genesis Responsive Slider figured out. If not, let me know and I’ll see if I can help.
Thank you so much for sharing this – and also a thanks to David Abraham in the comments. I have been able to implement the slider on one of my sites and so far it is working and looking great!
You’re welcome Erin! So glad we could help and that the comments helped too. Glad your slider worked!
I am using the GRS on a remake of my old FrontPage website. The slider works well but formatting the excerpt text to suit my needs has turned out to be impossible for my meager talents. Instead, I just created an image in Photoshop that includes the photos and text. I suspect that I will lose some SEO as a result but this is a trade off that I will have to live with.
I have another issue that I could use some help with. If you view the site diamond-safety.com/NewVersion, you will see that the back arrow is located inside the image instead of slightly outside the image as it is on the right side. This may be because I reset the image size to something larger than the default.
Is there a way to move the left arrow so it appears where it is supposed to?
BTW, I was unable to submit this form using IE. The check box to confirm that I am not a spammer would not work. Switching to Chrome solved this problem.
Is there a way to make the image in the slider a link to a page so I can have text on the image itself instead of in the text area to the side of the image? That way if that text area doesn’t show up on a mobile, the mobile user can still click on the image and it will take them to the desired page.
Yes James, you can definitely do that. In the slider settings, under “Content Settings” there is an option to “Do not link Slider image to Post/Page.” Just make sure that is not checked and the image will be clickable.
Hi there. I have installed the Genesis Responsive Slider on my wordpress site which uses the Going Green Pro theme but it does not show in the posts. You would think they would make it easy on us!
You would think! I’m not sure what you mean about showing up in the posts. The settings for the slider are at: Genesis and in the dropdown Slider Settings. I’m not sure if that answers your questions though 😉
I wanted to change the color of the nav circles and arrows–just FYI, you have to change the images created by Studiopress. I downloaded the originals and uploaded my changes via FTP. Just wanted to share in case anyone else comes across that problem!
Thanks for everything here, especially the page ID discussion–so helpful!
Thanks Anne-Marie. Good input. You know, that whole page and post ID is just kind of crazy to me. You would think there would be a more obvious way to know the ID.
We are using the Executive theme and the Genesis Responsive Slider works just fine. My question is – how can I add a slideshow to any other page? Will I need to use a separate slideshow plugin to accomplish this? If so, which one will work with this theme and not break the Genesis Responsive Slider? Thanks!
The Genesis Responsive Slider does not have a shortcode (to my knowledge). I don’t know of a way to put it on a page or post. I recently started using the Soliloguy slider and love it! https://soliloquywp.com/ I went for the premium version but tried out the Lite version first and I think that would work for most general purposes. It uses shortcodes and can be placed practically anywhere. I’ve found it very user friendly. Here’s a link to the Lite version plugin https://wordpress.org/plugins/soliloquy-lite/
If you use it, let us know what you think. Good luck.
We’ve used the GRS and the client would like the order of how they appear to be altered.. is there a simple way to achieve this other creating new pages/posts in the new order desired? Currently the settings do not allow a custom order.
This site I’m referencing is goldenhoundpress.com
Thanks
Asked too soon… found my own answer. I did a little more testing and had forgotten I can adjust the ‘published’ date of each post to be included in the slider, and then choose to sort by Date in the settings.
Glad you figured it out Robyn. That’s the easiest way to do it. It would be nice if there where more options for changing the order of the slides. BTW, I like the site and the cause!
Hi Eliz
Thanks for this post. However I’m in the process of setting up my new self-hosted wordpress blog using the Genesis framework and Foodie child theme. I have set up the Responsive slider exactly as instructed by Shay Bocks (designer of Foodie who provides a step-by-step tutorial). However the slider is still not pulling in any images!
I want it to pull the featured image I have set from my latest 5 posts. The title of the post appears in the Homepage Top widgetized area but there is no image.
Can you make any suggestions for what I might be doing wrong?
Thank you!
Bethan
Ps- the posts as they stand have just been migrated from my WordPress.com blog so I guess there may be something different in the settings? However I have added a featured image to the specified dimensions and still nothing is happening.
Hi Bethan,
I just saw this. I hope by now you have resolved your problems with the slider. If not, it would be great to see your site to help me understand a bit more about your issues. Do you have a link or is the site not live?
Hello,
Yesterday I migrated my blog over from blogger to WordPress. I opted for the genesis framework with the backcountry theme through StudioPress. I am having a beast of a time trying to get the Genesis Responsive Slider to actually look “nice.” It’s pulling images fine but they are all over the place in terms of size. Some images fill only about half, others are pushed up too much towards the top etc. I also noticed that the arrows are also now obscured. Any information/help you can provide would be great as I am a total neophyte in all of this!
My site is https://www.theredheadedtraveler.com
Hi Julie, Glad to hear you made the move from blogger to WordPress. Once you become more accustomed to it you will love it! And going with the Genesis framework was smart too.
I can see that your images are all different sizes. Try making them all the same size. Choose the size that you think looks the best in the slider now. Make sure the image size coincides with your Responsive Slider settings.