Setup a slideshow like the demo website

June 20, 2014| Sushil Adhikari

The live demo site for Preferential uses a free plugin called Widgetkit Lite and is available here:

Widgetkit

Although optional, you can install this and take advantage of a bonus style (mini-template) for the slideshow that is included in your download package of this theme. You can find it in the “widgetkit” folder.

Download Widgetkit

  1. Go to HERE and download the Lite version of Widgetkit
  2. Go to your dashboard >> Plugins >> Add New >> and install Widgetkit, then activate it
  3. You will see this get added to the bottom of your admin menu group in the left sidebar column

Install the Bonus Style “preferential”

  1. Open your FTP program (a program that lets you upload or download files where your website is). If you don’t have one, you should have one if you are running a website. Download a free one called Filezilla…which seems to be popular with many. If you want a more robust FTP, the one I use is a commercial one called WS_FTP Professional.
  2. On the remote location (your website), go to your plugins folder and find the Widgetkit plugin. Go into that to this location:
    /widgetkit/widgets/slideshow/styles/
  3. On your local side (your computer), go into the downloaded package of your theme and into the “widgetkit” folder and then in the “slideshow” folder. Upload the folder named “preferential” to where your Widgetkit plugin is installed and put it into the “styles” folder. You will see another folder there named “default”.
  4. Close out your FTP program

Setup Your Slideshow Settings

  1. Go to Widgetkit on your admin menu group >> Slideshow 
  2. Click on “Create your first slideshow” button
  3. Name your slideshow
  4. Open up the download package for your theme and go into the “widgetkit” folder. Open the slideshow-settings.txt file and start updating the settings that are there.

Adding Slides

  1. Make sure your slide images are prepared ahead of time and upload them to your Media Library before starting, or you can upload them as you create each slide. I recommend you crop and size your slide photos so that they are all the same size. The width of the slide will be 1400 pixels, but you can choose the height your slideshow will be.
  2. In the first slide, name it, then using the Add Media button on the editor, get your slide image and insert it into your editor. I would also recommend switching to the “text” tab view and remove the class=”size-full wp-image-13″ (your classes might be different) from the image.
  3. Click on Save Changes
  4. Click on Add New Item (more slides) and repeat the process of adding a photo.

Adding Captions like the Demo

  1. Go to your download package for the theme you got and look in the “widgetkit” folder, and then open the file “slideshow-caption.txt” 
  2. Copy this code snippet
  3. Go to your dashboard >> Widgetkit >> Click on the “Edit” link next to your slideshow you created
  4. With each slide, you have a “Caption” field. Paste the copied snippet into that and make any edits to the inline styling such as margins, paddings, colours, etc, so that it works with the type of image you have in your slide. This allows you to position and customize your caption so that it compliments the subject matter in your photo and also its colours.
  5. Click Save Changes each time you add a new caption.

Display Your Slideshow

  1. Go to Appearance >> Widgets >> and drag a Widgetkit widget into the “Banner” position.
  2. Select the slideshow you made
  3. Click Save

NOTE: I usually prefer a text widget to display the slideshow by pasting in the shortcode for the slideshow created. This is because the “Remove Widget Title” plugin does not work on the Widgetkit widget, but it does for the text widgets. Normally you don’t want a title showing when displaying a slideshow in the header or banner area of a website.

Screencast – Slideshow

 

Categories: Setup Tutorials for Preferential

Leave a Reply