Skip navigation

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

WordPress ThemesUsing 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.

Example of Twenty Eleven WordPress Theme slider on John Doan Harp Guitar site

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

Example of setting the sticky post setting on the post panelPosts 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.

Example of template file code for the Twenty-Eleven WordPress Theme showcase functionsThe 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.

2011 example of lorelle teaches featured image in header homework assignmentsIf 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.


Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email

Copyright Lorelle VanFossen.

11 Comments

  1. Numina
    Posted October 10, 2012 at 2:03 pm | Permalink

    Thank you so much for this post. We’ve been looking into this problem for a while. I really appreciate your help.

  2. Posted December 6, 2012 at 5:00 pm | Permalink

    Nice article , i tried to change the interval of a site but changes does not have any effect, any ideas?

    CHeers,

    John

    • Posted December 7, 2012 at 12:50 pm | Permalink

      The interval of the showcase slider? The instructions are in the article. If it isn’t working, the script isn’t coded right.

  3. Posted December 17, 2012 at 8:20 am | Permalink

    Great tips, Lorelle. I love the 2012 theme so much better than the 2011… Much easier to customize, more visually-appealing right out of the box, and much cleaner top navigation. Looking forward to seeing what’s to come in 2013.

  4. Paul L.
    Posted December 20, 2012 at 7:49 am | Permalink

    I finally moved off the 2011 theme primarily because of issues with the slider. I would definitely recommend premium themes to anyone looking for an attractive look and feel for their site. My painting website now has a very professional look because of the premium theme that I’ve been working with.

    • Posted December 28, 2012 at 12:18 pm | Permalink

      Slides are now old fashioned and out of date. You do not have to use the slider feature on the 2011 WordPress Theme. There are many, thousands in fact, of free Themes that are more attractive and appropriate for websites around the world. Premium does not always mean better. Thanks.

  5. Posted January 20, 2013 at 10:49 pm | Permalink

    Great, thank you. I have try.

  6. Cher
    Posted March 25, 2013 at 8:03 am | Permalink

    Thanks so much for the help – simple and straightforward!

  7. Posted April 7, 2013 at 7:26 am | Permalink

    Thanks Lorelle. Worked like a charm.

  8. Posted September 21, 2013 at 1:06 pm | Permalink

    Worked beautifully – thank you SO much.


4 Trackbacks/Pingbacks

  1. [...] article by the famous Lorelle that referred to a light but elegant solution writen by Kevin Deldycke.  This short piece of code [...]

  2. [...] article by the famous Lorelle that referred to a light but elegant solution writen by Kevin Deldycke.  This short piece of code [...]

  3. [...] How to Set the WordPress Twenty-Eleven Theme Showcase Slider to Auto-Advance (lorelle.wordpress.com) [...]

  4. [...] Here is a great link to something on the Web….http://lorelle.wordpress.com/2012/04/23/how-to-set-the-wordpress-twenty-eleven-theme-showcase-slider… [...]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,970 other followers

%d bloggers like this: