Image sliders remain a popular home page feature for many site designs even though they have fallen from popularity for many reasons. As a result, many new Genesis theme releases do not include a home page slider – but most can be easily adapted if a slider is an absolute necessity. This tutorial shows how to include a home page slider using the Genesis Responsive Slider plugin with the Enterprise Pro Genesis theme from StudioPress in a few simple steps.
This plugin uses the featured image from selected posts, optionally overlaying them with the post title and post text or excerpt, pagination (one dot per post) and navigation. The same slider is available for use anywhere, on any page or post – one slider per site. If you’re in need of multiple sliders per site, text animation, image manipulation, video or widget embeds, etc., you should be looking for something more suitable.
Install the slider plugin
Install and activate the plugin Genesis Responsive Slider from the WordPress plugin repository. Follow these instructions from the WordPress Codex if necessary. Use the Theme Customizer to add the plugin in the “Home – Top” widget area. (navigate: WordPress Dashboard > Appearance > Customize > Widgets > Home – Top)
Create your slider content
Create your slider image posts, with title and text content as required. In this example we are creating four posts and identifying them with the category “Slider Post”. Optionally, add excerpt text if you want that text to appear on the slider overlay in place of your post content (limited by character count).
Add a featured image to each post. The inner wrap width of Enterprise Pro is 1140px so our images should be 1140px wide. For this example I’ve selected 400px for the height. Specify a unique category, tag or taxonomy term. In this example I’ve selected the “Slider Post” category. Save and repeat for each of your slider posts.
Setup the Genesis Responsive Slider plugin
Navigate to the slider settings page: WordPress Dashboard > Genesis > Slider Settings.
The plugin settings allow you to do two things: (1) specify how the posts are to be selected and (2) how to display the image and text content. This example uses slider plugin settings shown in this plugin screenshot. The highlighted areas show the basics required to make your images appear in the slider and match the setup detail from the slider posts:
1. Select the slider posts
- Type of Content: select “post”
- Taxonomy and Terms: select “Slider Post” category.
- Number of Slides to Show: 4
2. Specify the slider display and content settings
Slider Display Settings:
- Maximum Slider Width (in pixels): 1140px
- Maximum Slider Height (in pixels): 400px
- Display Next / Previous Arrows in Slider? (optional)
- Display Pagination in Slider? (optional)
Slider Content Settings:
- Display Post/Page Title in Slider?: selected
- Display Content in Slider?: selected
- Hide Title & Content on Mobile Devices: optional/recommended
- Select one of the following: “Display post content”
- More Text (if applicable): “[Continue Reading]”
- Limit content to: “85” characters
- Slider Excerpt Width (in percentage): 33%
- Excerpt Location (vertical): Bottom
- Excerpt Location (horizontal): Left
Click “Save Settings”.
Test the home page result
Open your site home page to see your slider images play in Home – Top. The slider displays well without changes to the Enterprise Pro stylesheet, as shown. You can make changes to suit your own Enterprise Pro customizations.