Codeable info

Add a jQuery Slider to your home page with SlideDeck

Posted on by in Blog

I came across a useful plugin on BlogPerfume yesterday called SlideDeck. The plugin allows you to quickly and easily add a jquery slideshow to your website.

Several months ago I was looking into adding a jquery slideshow to the home page of my old blog in order to display my best articles. All of the tutorials which I looked at involved adding a lot of code to your WordPress templates, so I appreciate how much of a timesaver this plugin is.

Adding a Slideshow to your Home Page

After installing and activating the plugin you can decide whether to create a slideshow manually or use the ‘Smart SlideDeck’ option.

Creating a Slideshow Manually

By creating a slideshow manually you can highlight key articles so that they get a lot more exposure. You could also use it to promote other areas of your site (e.g. forums, directory) or your sponsors.

Creating a slideshow is incredibly easy. Each slide has it’s own editor, which works exactly in the same way as rnormal posts on WordPress, so you can add slides using the visual editor or HTML. You can also embed images and videos.

By default there are 3 slides however you can add more if necessary. You can also rearrange the order of the slides and decide which slide is displayed first in the playback. How fast the slides are displayed and whether they loop can also be set.

Creating a slideshow manually

After creating your slides you then need to copy the theme snippet code. The height and width of the slider can be set in this code in pixels or as a percentage. Once you have the code, you just need to insert it into a suitable area in your design in the template area (header.php, footer.php, index.php etc).

Example of SlideDeck slideshow

Automate your Slideshow with Smart SlideDeck

A much easier option is to use the ‘Smart SlideDeck’ as the slides are created automatically for you from your recent, featured or popular posts. You can adjust how the slideshow is displayed in the ‘Smart SlideDeck’ settings area.

There are 5 main options:

  • Choose Skin: Choose between a dark or a light skin.
  • Total Slides to Display: You can have between 3 and 10 slides.
  • Playback Options: Decide whether slides are incremented automatically and the time between each slide.
  • Type of Content: Choose between recent, featured and popular posts. You can also filter posts by category.
  • Navigation Type:

Just like before, you need to insert the Smart SlideDeck code into your template.

Smart SlideDeck Settings Area

I much prefer the light background to the dark one though it obviously depends on the style of your site.

Smart SlideDeck Example


Having looked at a lot of tutorials on how to create a jquery slideshow a few months ago, I really appreciate how useful this plugin is. If you know HTML, PHP and CSS well then you may prefer to manually hard code your jquery slideshow yourself (the tutorials I looked at were easy to follow).

Though I’m sure most of you, including those who can code, would appreciate the time and energy that this plugin will save. The screenshots I showed were created within seconds of installing the plugin however since the code is hard coded into your template, you could easily style the slideshow using CSS so that it integrates seamlessly into your website.

SlideDeck is free however there is a tiny slideshow image located at the bottom right of the slideshow area. It’s not really that noticeable however if have a commercial website or blog you may want to upgrade to the pro version for $49 so that you can remove it.

If you are thinking of adding a slideshow to your home page in order to promote featured articles I strongly encourage you to check SlideDeck out.

Good luck,


Codeable info

Comments (2)

Comment by Kevin Muldoon says:

You embed it directly onto a page or post. Alternatively, you can place it onto any template using the php command slidedeck(); :)

Comment by joe says:

When copying the theme code snippet to paset into my themes header.php file, I assume i dont just put it anywhere. Is there a specific place in the header file it should go?

Codeable info