Auto-advance WordPress’ TwentyEleven showcase slides

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

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.

Cool Cavemen WebDesign Retrospective

Here is a collection of all themes I created for the Cool Cavemen website over the years.

Before settling on its current name, the Cool Cavemen project was referred to by its members as The Ultimate Band (talk about rock-star egos…). Here is a screenshot of the theme I did for e107:

In fact the original HTML mockup this theme is based on still exists. It is dated back to November 1st, 2004, which is now the official Cool Cavemen anniversary. The theme above was created two weeks later.

When I created the Cool Cavemen’s site, I choose e107. Back then I perceived it to be the only Open Source PHP-based CMS having the best balance between a clean and a powerful theme engine. That was my opinion before decided to switch to WordPress.

At the end of November ’04, our theme was updated to this:

The header above is based on a photo of a green laser, that was taken by Cool Cavemen’s guitarist.

2005 started with an updated version of the theme, featuring a photo of Cool Cavemen’s first gig. They were only three on stage, our bass player was still drumming at the time:

In February we finally had our official photo featuring all members of the band ! But it was cold outside so we added some fur to keep our website warm:

I spent the next months trying to build my own version of the Holy Grail: a perfect CSS-based 3-columns fluid layout (with a middle column placed in the top of the HTML). This explain Eric Mayer‘s quote in these mockups and the references to the Skidoo Too template:

I never found the Holy Grail, and the tests above remained unseen by the public. Tired by this journey, I never touched the theme again.

Until September 2005 when I updated it to this:

Notice the box in the top of the right column, which was designed to publish a new track every week. The code behind this box is available in another article.

So that was the last major version of the theme. Basically our e107 site looked that way for most of its life.

In November 2005 I attempted to reboot the theme. I made these 3 propositions to the band:

The last one had an interactive header, with tiny sketches showing up on mouse over:

Unfortunately we didn’t found any of these themes matching the Cool Cavemen spirit (whatever that is). If these alternatives were publicly discussed, we decided that no one was going to replace our previous theme.

The final update we made was when our Raw EP was released. We basically applied filters on the header to match Raw’s cover. We also updated our logo to use the one designed for us by QPX:

Sapphire 0.3 for K2 WordPress Theme

I’ve updated my Sapphire adaptation for the new K2 v0.9.6 release.

Sapphire 0.3 is now compatible with K2 sidebars, which mean that the header and footer of the theme will be expanded or reduced according to the number of sidebars. To achieve this flexibility, I had to redo all images included in the original Sapphire theme. All Inkscape and Gimp source files can be found in the “sources” folder of the Sapphire v0.3 zip file. This total rework also mean that I no longer use any file or code from the legacy sapphire theme.

Sapphire style for K2 WordPress theme

Sapphire custom style for K2 WordPress Theme

Yesterday I’ve build a new K2 style based on the legacy Sapphire 1.0 WordPress theme by Michael Martine. This is the result of my love to the blue bend of Sapphire and the versatility of K2.

As you can see in the footer of that blog, I’m using my Sapphire 0.1 style right now. So if you like the look and feel of that blog, don’t ask yourself and download Sapphire 0.1 for for K2 !

To install it, unzip the archive to your /wp-content/themes/k2/styles/ folder.