WordPress default theme, TwentyEleven , has a built-in showcase mode that is displaying a set a slides (composed of sticky posts) at the top of a page. This mode can be activated by creating a static page and set its Template page attribute to Showcase Template  .

The problem with this mode to me was the lack of an auto-advance feature that will cycle through the slides every X seconds. Luckily I found a way to automate implement this with some lines of JavaScript: 

<script charset="utf-8" type="text/javascript">
 // Auto-advance the showcase slider
  // Source: https://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>

All you have to do is to embed this snippet of code within your home page. It could either be in the static page you use as a showcase template or in a showcase widget. The latter is the exact same method I used earlier that year to customize CSS in WordPress without messing with the original code  .

And of course this code is currently live at the front page of that very blog.

9 archived comments

Comments are closed. These were posted on Disqus, and are archived here.

  1. Peter

    Thanks a lot! Your code-snipped helped. :-)

  2. Sahil

    Thank you so much... it's better to put this on page than in showcase.js file... btw.. is there any way I can show Older Post link on the showcase page(preferably at the bottom) just like normal page layout has??

  3. chrismalinao

    please add code to make the transition between images softer. it is abrupt - and jarring - as it is now. thanks!

  4. Anonymous

    THANK YOU SOOOOO MUCH! Unlike anything else I try to find how to do on the web, this worked RIGHT AWAY and without ANY problems!!

  5. Louise

    Where exactly should i place this code in wordpress?

  6. ThaFootballGuru

    I used your code on my site and I'm getting an empty space between the area where it says "featured post" and my menu bar. how do i eliminate this?
    Here is a link to my site so you can see what I'm talking about http://thafootballguru.com

  7. ThaFootballGuru

    I figured it out, I had to switch to the feature post setting.

  8. fousdefolk

    Thank you very much !!!

  9. veggie

    Awesome! Thanks so much. This is wonderful