Auto slide for Twenty Eleven Featured Posts Slider

I’m a great fan of the amazingly versatile but still solid default WordPress theme that has been served with all WordPress packages since version 3.2 released on July 4, 2011: Twenty Eleven. Many of the sites I developed since then, use a child theme based on Twenty Eleven and some of them use as front page a page that has been dressed up with the Showcase Template. But… there was just one thing missing!

Showcase

The Showcase template allows the site owner to combine a static page text with a presentation of the recent posts. These latest posts are listed with their title below the page content. The latest one on top – as usual – shows not only its title but also its content, or at least the part of it above the more-tag. And then, there is a special place reserved for the so-called Sticky or Featured Posts.

This space between the top static content and the list of recent posts allows all posts marked “sticky” to be presented full width with title, an excerpt and – if the post has a featured image defined – an image on the right side. But this space only allows one post at a time. Round dots on the top right side can be clicked to switch to the next sticky post.

Blind spot

This all looks fine but the downside is that it only shows ONE sticky post. Visitors will have to click these dots to open the next ones. I can assure you, most visitors will skim through the menu and across some titles on the front page until they see what they are looking for. If they do not see anything of interest right away, the are unlikely to stay on that page much longer to start clicking obscure dots that do not reveal any hint about what to expect. So effectively, except for the latest one, your featured posts are hidden from view!

The featured posts area looks like one of those sliders that you can find on many of the slick news sites but it does not behave as such. It just sits there, waiting to be clicked. A bit disappointing really.

Move it!

Obviously, I’m not the first one to come to this conclusion and searching the internet I came across several ways to get that still slider to move on its own.

1. A lengthy piece of code proposed by Devon Zara that does a fade transition as discussed on the WordPress.org support forums. This code needs to replace the current code used in the themes  showcase.js file which is not a real problem when creating a child theme. But when simply using the Twenty Eleven theme this is not recommended as each update will overwrite the customisation.
2. An article by the famous Lorelle that referred to a light but elegant solution writen by Kevin Deldycke.  This short piece of code uses (and extends) the code that is already used by the theme and can  simply be pasted in a text widget in the Showcase sidebar.
3. I did not look further but I’m sure there is more… If you know about any other solutions, please share them in the comments 🙂

So, which one to use?

Simple but not so smooth

Since I like simple things, and since I needed a solution that would work on the main Twenty Ten as well as child themes, my preference immediately went to the second solution as proposed by Kevin. But…

There is always a ‘but’, isn’t there? In this case: since the simple script uses the code provided by the theme, it did not allow for any smooth transition effects like the fade-out/in that the first solution by Devon uses. So, seeking both simplicity and stylishness, I set out to write code that can be pasted in a text widget and still uses a transition effect.

Best of both worlds?

And this is what I have so far:

1. Version 1 (http://pastebin.com/raw.php?i=SLy8ND2k) is the basic slider.
2. Version 2 (http://pastebin.com/raw.php?i=GeC4AwUy) features a pause on mouse hover over the slider.
3. Version 3.1 (http://pastebin.com/raw.php?i=UVvfz58e) features both the hover pause and blinking of the upcoming slider dot to indicate activity.

Instructions

If you are happy with the default speed and effect settings, simply place a text widget (without title) in the Showcase sidebar and paste the code
<script type="text/javascript" src="http://pastebin.com/raw.php?i=UVvfz58e"></script>
as its content. In this example, the code from version 3 is used. If you want version 1 or 2, use the raw URL indicated in the versions list above.

You can change some values to control the behaviour. For this, you’ll have to copy/paste the full code in of the version you want into the text widget instead. Then put
<script type="text/javascript">
before it and
</script>
after. Then change the available options depending on which version you chose.

These options are from version 1:

• slide_delay_first controls the first time-outs in milliseconds which can be set higher than subsequent time-outs to allow for page load time but lower is also possible;
• slide_delay controls subsequent time-outs in milliseconds;
• slide_speed controls transition speed in milliseconds;
• slide_effect controls the transition effect; available options are ‘slide’, ‘fade’ or ” (default);
• slide_easing controls the transition behaviour; available options are ‘linear’ or ‘swing’ unless you have the jQuery Easing or jQuery UI extension running on your site.

And in version 3 these extra options are available:

• slide_precursor_delay controls the ‘start after’  in milliseconds of blinking of the upcoming slide dot/button to indicate activity. It should not be higher than the slide_delay. Set it to 0 (zero) to switch blinking off.
• slide_precursor_speed controls the blinking speed in milliseconds. and ideally about one second or lower.

The transition effect ‘slide’ is a slideUp and slideDown effect. I chose this one as standard since it as readily available in jQuery and does not need any extensions or much more code to get it to look good. Other effects like fade or the default jQuery show/hide effect are also possible. Note that the fade effect somehow allows a small flicker just before the fade effect when clicking the dots. I have no idea why this is…

A live example of version 3 can be seen on http://aufildudoux.fr/.

Enjoy and feel free to adapt and improve it to your own liking. And please do not hesitate to share your improvements in the comments! 😉