Using the fantastic and flexible Twenty-Eleven WordPress Theme and its showcase template front page and slider? Wish the showcase slider would slide automatically? I’ve found the answer.
The Twenty-Eleven WordPress Theme features a pseudo-static front page template called “showcase.” When set as the “home” page template with the blog as “blog,” you have the option to add a slider with sticky posts. Add another and it automatically converts to a slider. Add a featured post image and your slider becomes highly visual.
By default, the slider must be changed manually by the visitor by clicking the “dots” over the right top section of the slider. In theory, this is preferred in order to meet some government laws for accessible websites where nothing should move, jump, shake, rattle, or roll without the action being initiated by the user. Regardless of the access laws, most people want the slider to advance automatically.
There have been quite a few attempts to pin down how to advance it safely across various browser issues with little success. Kevin Deldycke put together a solution for the slider auto-advance, and showcased a unique way of applying that solution.
Changing the Twenty-Eleven Showcase Slider to Auto-Advance
In a perfect world, you would copy the
head HTML section of the template file. For long time protection of the script and the Theme, this is the “right” way to add the auto-advance option.
Kevin came up with a simpler and faster way which works great if you trust yourself or your client not to mess with things. NOTE: This will not work on WordPress.com sites.
For posterity, the script for auto-advancing the Twenty-Eleven WordPress Theme Slider is:
To change the interval, edit the number on the line indicating the number of seconds the slider will auto-advance. I typically choose 8 as it gives people time to look, read, and decide, and it isn’t too annoying.
Now, let’s look at some things you need to know about using the Twenty-Eleven Showcase Slider.
Using the Twenty-Eleven Showcase Slider
The Showcase template file has a conditional tag post query that tests to see if the post is sticky. If it is, it displays it at the top of the front page. If there is more than one, it switches the display to the slider showcasing the sticky posts.
The Twenty-Eleven Showcase page template file also tests for a featured image, then applies a test for size.
If the image is the same size or larger than the header art, 1000 x 288 pixels for the Twenty-Eleven WordPress Theme, it displays the image the width of the slider area making it a background image with the post title over it. No post text is displayed, only the post title, so make it a good one.
If the featured image is smaller than the header art, it is displayed on the right side of the post with the post title and excerpt on the left side. This is exciting as it gives you options to create wide or smaller images in the slider. However, there is one small issue you might want to consider, and consider changing.
If the featured post image is the same size or larger than the header art, the Twenty-Eleven Showcase page template will the featured post image as the header art on the single post pageview. This means your header art, the one you worked so hard on for branding and site identity, will be replaced on that post with the featured post image.
If you don’t mind having your header art switched on a per post basis, stay with this feature. If you do, see the instructions on replacing or removing the default header image on the Twenty-Eleven Theme by Piet Bos.