Setup a Slider like the demo website for Preference

Preference uses the WidgetKit package from for the slider, lightbox, and a spotlight effect when you hover over a thumbnail when you add a tag to the thumbnail link. This is the WidgetKit Lite version, although they do offer a Pro version, but we wil be setting up and focusing on the slider for this tutorial.

Step 1 – Download and Install WidgetKit

  1. We need to DOWNLOAD the WidgetKit Lite package for WordPress
  2. Log into your WordPress dashboard and go to Plugins >> Add New >> and click the Upload option
  3. Browse for the downloaded zip file for WidgetKit and then install it, activate it…

When done, you should now have a WidgetKit menu tab in the lower left side of your admin dashboard like this:


Step 2 – Upload the Custom Preference Slider Template

With Preference, you will find that the download package has a folder called “Extras” which contains a custom styled template to give you the exact look and style of the live demo site has for the slider. You will need your FTP program for this…

  1. Open your FTP program and go to the location of your WordPress install
  2. Find this folder: /wp-content/plugins/widgetkit/widgets/slideshow/styles/
  3. In your original download package for Preference, go into the “Extras” folder and then into “widgetkit” and then “slideshow“. Upload the “preference” folder to the “styles” folder where your plugins are (see the path above)
  4. Once uploaded, you can close the FTP

Step 3 – Time to Setup a Slideshow and do our Settings

  1. Go to your site admin dashboard and click on that Widgetkit button in the left side
  2. Click on the “Slideshow” link at the top and then click “Create your first slideshow
  3. In the first field that says “Enter name here…”, title your new slideshow anything you want but for this example, we will name it as “Showcase” and then just press the “Enter” key on your keyboard.
  4. In the right side column, there are some settings, but four (4) we will focus on are:
    1. Style – This is where we will now select our uploaded custom template “preference
    2. Width – Enter in 1170 (this is our slideshow width but just enter the value only which represents pixels)
    3. Height – Enter in 340 (this is our slideshow height, and again, just the value only)
    4. Show Navigation – This is usually the row of dots under sliders used for navigation, but for this, disable it.
  5. Now we can begin adding slides…see next Step below

Step 4 – Begin Adding Slides

Before we begin here, I recommend you prepare your images first before uploading by cropping and sizing them yourself so that you get the exact look, quality, cropped, and size that you want. Remember that our slides will be 1170 pixels wide and we’ve set the height at 340 pixels, although you can make them any height you want, but the key is to keep them at 1170 pixels in width. Once you’ve prepped your photos (slides) we are ready to proceed.

  1. Title your first slide anything you want…this title is just for your reference in the admin side
  2. Click on the “Add Media” button at the top of the editor, which will open the WordPress Insert Media window and then browse for your first slide image and upload it.
  3. Once the image has finished uploading, make sure you click on that thumbnail because now we have to make a few adjustments with the settings on the far right side like this:
  4. Then click on the Insert into Post button in the lower right which will now put the image into the content editor.
  5. We have one thing to edit in the “Text” editor mode for this image because WordPress does not make this easy for us…we need to remove this class: 
  6. Now that the image is done, we have to add our “Caption” which is what goes on top of our photo on the front-end of our site and slideshow. In the Caption field, let’s use the demo site as an example for the first slide…this is what you will be copy & pasting into the caption field:
    <h1>Preference for WordPress</h1><h2 style="background-color:#a2997d; color:#fff;">Flexible & Powerful</h2>
  7. Change the caption text to your own and to customize the colours of your caption, edit the values that you see in the above code to your own.
  8. Click “Save Changes” and then repeat this process for our next slide by clicking on “Add New Item

For our first slide caption, it should look like this now:


What if you want a Link for Each Slide?

Looking at slides roll by is one thing but most will want to link each slide to something…easily done because the way to do this is simply done by adding a link to the image when it’s inserted into the content editor…just like you would in a typical blog post.

  1. Click on the image that you inserted into the editor
  2. We will then click on the editor’s button for the “Insert/Edit” link (don’t click on the edit button icon for the image when it shows)
  3. Add your link
  4. Save it by clicking on “Add Link
  5. Repeat for each image slide you create, which I recommend doing it as you create each slide.

Widgetkit Documentation

IF you would like to read more about Widgetkit, I recommend you check out the Yootheme’s website for Widgetkit.