WordPress sliderMonial

wordpress-iconWhen we began building the ELSEAPPS website we auditioned a large number of WordPress slider plugins – you can read about that experience here. Ultimately we decided the only way to get the features we wanted was to write our own, and that’s how sliderMonial was born.

sliderMonial?     A slider for testimonials.

The features we wanted were all available, but not all in the same plugin:

  1. Structured content using WordPress posts and categories.
  2. Use single or multiple categories in any slideshow.
  3. Easy formatting of testimonial quotes and attributions.
  4. Position each slide’s text content on any edge.
  5. Set each slide’s semi-transparent mask colour to match the image.
  6. Easy implementation with shortcodes.
  7. Ajax cycling of slides for quick page loading.

sliderMonial also has features we’re not planning to use at this stage, such as supporting multiple instances per page. Here’s an example of it action.

How to use it

Set up a post category and populate it with two or more slides. Each slide must have a Featured Image, and the text content must use the sliderMone shortcode:
[sliderMone position="bottom" colour="ca5399" author="Leigh Harrison" link="http://www.elseapps.com/"]I found this very useful.[/sliderMone]

  1. position can be top, right, bottom or left: wherever you want the text to be aligned.
  2. colour is the hex value of the semi-transparent mask that will be created under the text. Note that the leading hash must be omitted.
  3. author is the name of the person the testimonial is attributed to.
  4. link is the URL of the page to open when the slide is clicked.
  5. The quote itself is the shortcode’s content.

Having created some slides, you can insert a slideshow into a post using the sliderMonial shortcode. Here’s the actual shortcode used on this page:
[sliderMonial category="14,15,16,17,18,19" interval="2000"]

You can have one or more categories; the interval is in milliseconds; if you want to use more than one slider on a page, add a unique id parameter as well.

I’ve not packaged sliderMonial as a plugin, but it does come with two short codes and instructions on implementation. And – you guessed it – these are the instructions.

Download the code

The zip file contains

  1. sliderMonial.php to put in your WordPress theme folder.
  2. ADD-TO-functions.php to append to the functions.php file in your WordPress theme folder.
  3. ADD-TO-style.css to append to the style.css file in your WordPress theme folder.
  4. sliderMonial.js to copy to the /js subdirectory of your WordPress theme folder.

How it works

The first slide is inserted directly into the HTML of your page so it’s visible as soon as the page loads. When the reload interval comes round, the Javascript routine retrieves the category from the sliderMonial element and the index value that’s stored on the currently-visible slide. It sends these to the server, receiving a fresh slide in return. Before it cross-fades the old and the new, it does some fiddling to ensure left and right -aligned text content doesn’t overflow the slide. It’s all pretty simple. Or, as we prefer to think of it, simply pretty.

However much you revise it, we’d appreciate it if you’d leave the credits in the files. Enjoy.