This slideshow plugin from StudioPress allows you to create a simple responsive slider that displays the featured image from a WordPress page or post (along with the title and an excerpt of the content if you choose to include text).
NOTE: The Genesis Responsive Slider only allows for one slideshow to be applied to your site! If you’re looking to put more than one slider on your site (different sliders on different pages), this is not the plugin for you.
What it Does
Genesis Responsive Slider allows you to choose to display posts or pages, what category to pull from, and even the specific post IDs of the posts or pages you want to display.
The slideshow is responsive and will automatically adjust for the screen it is being displayed on.
What You’ll Need In Order For the Slider To Work
- A WordPress theme that uses the Genesis framework
- The dimensions of your website so that you know what width and height to give your slideshow
- The Genesis Responsive Slider plugin — available free from WP plugin repository — installed and activated
Your Guide, in Three Sections
- Basic Slider Setup – Get Started Quickly!
- Making Sense of the Slider Settings – In-depth on what settings to use and why.
- Tips, Tricks and FAQ’s
How To Set Up The Slider – The Basics:
1. Install & activate the Genesis Responsive Slider plugin
2. Go to Genesis > Slider Settings > Set your desired settings for your slideshow (see below “Making Sense of the Slider Settings” for more details)
3. Go to Media > Add New > Add your appropriately-sized slideshow images to the media library
4. Go to Posts or Pages to create the posts or pages that will contain your slideshow content
- set the featured image for each post or page by choosing your uploaded images from the media library
- make note of the ID assigned to each post or page that you intend to use in your slideshow
5. Go back to Genesis > Slider Settings > “List which post/page IDs to include/exclude”
- insert in that field the IDs of all the posts or pages you want to use in the slideshow (use commas to separate, but no spaces in between: 1,2,3,4)
6. Go to Appearance > Widgets > drag the Genesis Responsive Slider widget into the appropriate widget area where you want your slideshow to appear and hit Save. *The name for this widget area will depend on the theme –> examples: drag the Genesis Responsive slider widget into “Home – Slider” or “Welcome Message.
7. Go to the page where you placed the slideshow, refresh your screen and make sure the slideshow looks the way you want it to look, runs properly and shows each image and/or text content in the order you want it.
Making Sense of The Slider Settings
This depends on if you want to control the material being presented in the slideshow or if you just want the slideshow to auto-update with the latest materials from your blog.
- If you choose Posts: any time you update your blog with a new post, the slideshow will be updated with the content from that post (may include a featured image, an excerpt, and/or a title, it all depends on your settings). So your slideshow can change regularly, displaying the most recent blog posts you’ve written.
- If you choose Pages: this option is a little more controlled. You can create specific Pages of content & decide which Pages you want to include or exclude in the slideshow. In contrast to Posts, you’re less likely to create hundreds of Pages so this is a good option to choose if you don’t want the slideshow to auto-update with new material.
Choose “All Taxonomies and Terms” or choose a specific category or tag from the drop-down menu
This allows you to display individual posts or pages that have been assigned specific categories or tags you’ve created and excludes all the rest. (For example, if you want to have the slider show the most recent 5 blog posts from the category “My Photographs” or “Health Food Recipes.”)
If you want all posts or pages to be considered (and not just those assigned specific categories or tags), be sure to select “All Taxonomies and Terms.”
Choose Include from the drop-down menu.
List which post/page IDs to include/exclude (1,2,3,4 for example). NOTE: Fill in this field later, after you’ve created your slideshow posts or pages and know what ID has been assigned to each slide post/page.
The number set here depends on how many slides you plan to include in your slideshow.
Keep at zero unless you plan to skip the most current posts/pages created (if you don’t want to display the newest post, set at 1).
You can choose what order the material will be displayed, by either Date, Title, ID or Random. WARNING! This option has system issues! See Tips & Tricks below for more information.
Set your slideshow transition speed and effect (slide or fade).
Time Between Slides = the amount of time spent on each slide before the slideshow transitions to the next slide. Figured in milliseconds: 4 seconds per slide = 4000 milliseconds.
Choose your slideshow width and height (this is where you need to know what the dimensions of your overall theme are, in order to set your slideshow dimensions to fit the space).
You can also set whether you want to have previous-and-next arrows on display and whether you want the pagination on display (dots at the bottom of the slider that show which slide is currently displayed and how many slides are in the slideshow).
- “Do not link Slider image to Post/Page”
If you don’t want the slider image to be clickable within the slideshow (bringing the visitor to the specific Page or Post), checkmark the box for “Do not link Slider image to Post/Page.” This is especially helpful if you’re using the Page setting — if you’re using Pages to create slider images, you don’t necessarily need the visitor to see the Page because all the content is right there in the slideshow.
But leave this box unchecked if you’re using the Post setting, because you want your visitors to be able to click on any of the slides in the slideshow and be taken directly to your individual blog post to read more.
- “Display Post/Page Title in Slider?”
If you just want a featured image (with no text) to appear in the slideshow, leave this box unchecked.
If you want the title of your Page or Post to show up as text in your individual slides, checkmark this box.
KEEP IN MIND: Depending on the length of the title you chose for your post, it may obscure your featured image. You may have to make adjustments in order to get your slide looking the way you want, if you checkmark this box.
- “Display Content in Slider?”
If you want a text excerpt included within your slide space, checkmark this box.
NOTE: Be sure to select “Display post excerpts” (instead of “Display post content”) and fill in the “limit content to x number of characters” field so that your post content doesn’t end up spilling out beyond the frame of the slideshow.
- Excerpt Width & Location
You can also control how much space your excerpt takes up in the slide by choosing a percentage in the Slider Excerpt Width field (example: want it to take up half the slide? choose 50%) and what corner (top left, top right, bottom left or bottom right) you’d like your excerpt/content to appear on the slide.
Tips and TricksBefore uploading images for the slideshow to the media library, make sure they match the size of the slideshow setting or the slideshow will automatically resize your pictures to fit the setting, whether that resizing looks right or not. If your previously-created posts don’t already have featured images assigned from when you first created the post, it’s faster to “attach” the images for your slideshow via the media library than it is to have to add them manually, post by post (by clicking Posts, edit the post, set featured image, load the image, create your settings and hit save). Instead, simply go to the media library, find the picture, click “Attach” (found under “Uploaded to”) and choose the blog post you want to attach it to. If you decide to change the slider size in Genesis Slider Settings, you will have to re-upload all your images. Example: I uploaded larger images, then changed the slider settings, and refreshed my page but the images were still in the smaller size within the new, larger slideshow space. I looked in the Media Library and the plugin had taken my larger images and made copies that were cropped to the smaller size. So make sure you remove your old images, set your new slideshow size in the Settings, and then upload your new images to fit the space.
How to find your Post or Page ID: From your WordPress Dashboard, go to Posts (or Pages) > click on the individual post or page you want to use for your slideshow. At the top of the Post or Page, look at the URL address. The number shown in the string “post.php?post=____&action=edit” is your individual post or page ID.
For example, the post ID for the screenshot above is 2067. If I want to use that post, that’s the ID I need to include in my Genesis Slider Settings.
Another option is to use a plugin called “Reveal IDs.” This will list the post IDs on the View Posts page so you can see them without having to go directly into each individual post to capture each ID to be used for the slider settings.
This setting can cause some issues.
The default is easy because there’s nothing for the system to sort. It will automatically show the featured image and/or content of your latest blog posts. So if your slideshow is pulling content via Posts, there’s no problem.
But if you’re making a Page slideshow (where you only want to display specifically created and chosen slide content that isn’t affected by your blog posts), the Order By setting has glitches. Sometimes it seems that it doesn’t matter what Order By setting you choose (by date or ID) — the slideshow will still display your slides backward or out of order.
The issue: Say you create a Page slideshow with 5 slides. You choose “Order by: ID” and tell it which IDs you want the slideshow to display (listing the ID numbers in the order you want to see them displayed). Two months later, you want to add 3 more slides to the slideshow. The system automatically shows them out of order, with the most recent Pages created displayed first — “6, 7, 8, 1, 2, 3, 4, 5” instead of “1, 2, 3, 4, 5, 6, 7, 8.”
It could be the system is insisting the slides be shown in numerical ID order or by the most recent date (so any new Pages created are automatically going to have a newer date than the older Pages in the slideshow). There doesn’t seem to be a setting in Genesis Slider Settings to allow for out-of-numeric order Page IDs or to choose to show the Pages by “oldest date created” first rather than by “newest date created.”
We’ve tested a number of ways to get this to work, including order by Page ID, order by Date, changing the order of the IDs in the “list which page IDs to include” field, assigning each page an order number in the Page Attributes “Order” field box… unfortunately, none of these options seem to work. It seems the “list which post IDs to include” field does not allow you to control the order of the IDs displayed; instead, it’s just meant as a place to list which IDs you want to include. And the Page Attributes Order field box — which works when using it for what order to display your Pages in the navigation menu — doesn’t seem to work when you want to use it to assign an order for your slideshow pages.
Options to get it to work:
1) In order to get the slideshow to display your pages in the preferred order, you could rename or reset all the slides in order to force the newest 3 slides to the end of the list. One way to resolve this is to add the aforementioned plugin called “Reveal IDs,” which lists the post ID on the View Posts page. You can sort that page by ID and use the quick edit to rename the pages so that Page slide #1 has the largest ID and Page slide #8 has the smallest.
2) RECOMMENDED! Another way (which is relatively quicker and easier) is to manually change the publish date of each slide. Most recent date is shown first, oldest date is last. Rather than manually going into each and every page, go to Dashboard > Pages and use the Quick Edit feature found under each page. Simply click “quick edit,” change the date and hit the Update button. Of course, that still means you’ll have to change the date on each slide, which is a pain, and you’ll have to make sure none of your changed publish dates overlap or the pages won’t show in the order you want. But it is faster than having to install another plugin and sort everything and go page by page, renaming each one.
This is where you can get creative.
To show a featured image in the slideshow space, follow these steps:
- Upload your image to the Media Library
- Create a Post or Page
- Attach the image as the Featured Image
- Click Save.
You can add text to the top of your slides, using a SINGLE WORD (“INSPIRATION”), a TAGLINE / SLOGAN (“Just do it.”) or a BRIEF PHRASE (“TODAY ONLY!” or “CHECK OUT OUR WORK” etc.).
- Create a Post or Page
- Use the “title” field for the word or phrase you want to display in your slide.
- In Genesis Slider Settings, make sure you checkmark the box for “Display Post/Page Title in Slider.”
The text excerpts or paragraphs would be in place of an image or layered on top of an image.
- Create a Post or Page
- Enter your brief paragraph or sentence into the main content box of the Post or Page.
- In Genesis Slider Settings, make sure you checkmark the box for “Display Content in Slider.”
- WARNING: if you use too much text, it will spill out past the border of the slideshow. Best bet is to keep the content brief, or use the “Display post excerpts” setting.
- Use the “Limit content to ___ characters” setting, found two fields below the “Display post excerpts” setting
- Use the More Text setting (default will say “Continue Reading” but you can change it to say “Read more” or “Click here to read on…” or whatever wording you see fit)
- Use the Slider Excerpt Width setting (in percentages). If you want text to cover half the space, use 50% in this field. If you want the text to cover the entire space, use 100%. Save the Settings, refresh your slideshow page, see how the text displays and go back to Settings to adjust as necessary.
- Use the Excerpt Location (vertical and horizontal positions) to tell the slideshow exactly where you want your text to be positioned in the frame. You can choose Top or Bottom, and Left or Right. Default position seems to be Top Left, so if you don’t want text in that corner because that portion of the image underneath needs to be seen, make sure to set the Excerpt Location settings and/or adjust the canvas of your image in a program like Photoshop so that the image only appears in the portion of slideshow space you want it to be.
This is to remove all text, displaying only a featured image.
Make sure these 2 boxes are not checkmarked: “Display Post/Page Title in Slider” and “Display Content in Slider”
- Go to Genesis Slider Settings
- Go to Number of Slides to Show
- Enter new number of slides in the field
This setting is to skip a chosen number of published posts, so the slideshow starts with the next most recent.
- Go to Genesis Slider Settings
- Go to Number of Posts to Offset
- Enter a number in the field (for example, 1 = skips the most recent blog post you published, 2 = skips the first two current blog posts, etc.)
- Go to Genesis Slider Settings
- Go to Display Settings
- Checkmark the box “Display Next / Previous Arrows in Slider?”
- Go to Genesis Slider Settings
- Go to Transition Settings
- Adjust the Slide Transition Speed and Slider Effect settings
- Go to Dashboard > Posts > Categories
- From the Add New Category screen, find Name field (insert a category name here, such as “home page slideshow” or “slideshow”)
- Click Add New Category button to save category
- Then go to Genesis Slider Settings
- Find “By Taxonomy and Terms”
- Choose your newly created category (“home page slideshow”) from the drop-down menu
And of course, no matter what changes you make or tips and tricks you decide to try, always remember to hit Save Settings!