How to Set the WordPress Twenty-Eleven Theme Showcase Slider to Auto-Advance

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 header.php template file into a Child Theme, protecting the original, and add the following JavaScript code within 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.

Instead of adding the the JavaScript to the header.php or other template file, paste the JavaScript into a text widget in the Showcase sidebar with no title. The Showcase page template on the Twenty-Eleven Theme can display different content than what is found on the main sidebars, thus restricting the JavaScript from loading on every page, just on the front page where it is needed.

For posterity, the script for auto-advancing the Twenty-Eleven WordPress Theme Slider is:

<script type="text/javascript" charset="utf-8">
    // Auto-advance the Twenty-Eleven Showcase slider 
    // by Kevin Deldycke http://kevin.deldycke.com/2011/12/auto-advance-wordpress-twentyeleven-showcase-slides/
    // Source: http://pastebin.com/s6JEthVi
    jQuery(document).ready(function(){
        var change_every = 5; // The number of seconds that the slider will auto-advance in
        var current = 1;
        function auto_advance(){
            if(current == -1) return false;
            jQuery('.feature-slider a').eq(current % jQuery('.feature-slider a').length).trigger('click', [true]);
            current++;
        };
        setInterval(function(){auto_advance()}, change_every * 1000);
    });
</script>

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.

Kevin Deldycke has further instructions and the code is also stored on Pastebin for reference and usage.

Now, let’s look at some things you need to know about using the Twenty-Eleven Showcase Slider.

Using the Twenty-Eleven Showcase Slider

Posts are added to the Twenty-Eleven Showcase Slider by setting the Post Visibility to Stick this post to the front page.

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.

---

Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen.