Create a slider like the demo website using Widgetkit

The slider on the flat responsive demo website is optional, but this tutorial will help you get setup if you decide to use the Widgetkit slideshow. This plugin is free to download from yootheme.com and once installed, you can take advantage of the custom theme (style) that we created for it.

As a side note, you do not have to use this slider if you have a different one in mind.

Download Widgetkit Lite (free) here:

1. Go to Plugins >> Add New >> Upload
2. Browse for the widgetkit zip file you downloaded and install then activate it
3. Note that it gets added to the bottom of your admin menu group

Upload the Slideshow Theme

With the flat responsive theme, you get a custom theme for the slideshow to match what you have seen on the live demo website. You can find this style in the the “flat-responsive-package” folder, then in that you will find a folder named “widgetkit“. In that is another folder “slideshow“, and then inside that is a folder named “flat-responsive“. 

Using your FTP program, upload the “flat-responsive” folder into the “styles” folder here:

wp-content >> plugins >> widgetkit >> widgets >> slideshow >> styles

You should see a folder inside “styles” named “default” which is the default theme (style) for the Widgetkit Slideshow; flat responsive will be installed there as well next to it.

Create Your Slideshow Images

The first thing you will want to do is prepare your slides (images) and have them ready to upload. You can have them in any size you want, but as a reference, we recommend using the best quality and largest images you can use. 

• For high resolution and big screens, 2560 pixels wide would accommodate 27″ monitors.
• For 22 – 24″ monitors, 1920 pixels wide would work well.
• For slides that are to be the width of the page content itself (not full width), this would be 1140 pixels in width.

Height can be almost anything you want, but remember that this theme and the widgetkit slider are responsive, so the height will be relative to the width as the window resizes. To give you another reference, the slides we have on the demo website are 2560 x 600 pixels at their fullest size.

Create Your First Slideshow

1. In your dashboard menu group, click on Widgetkit
2. Go to the Slideshow tab, then click on the “Create your first slideshow” button
   
3. Enter a name for your slideshow, for example: My Slideshow
4. Click Save Changes
5. Set your options:
   1. Style = flat responsive
   2. Autoplay = Yes
   3. Autoplay Interval = 5000
   4. Width = 100%
   5. Height = auto
   6. Effect Duration = 800
   7. Start Index = 0
   8. Order = Default
   9. Navigation = Show
   10. Buttons = Show
   11. Slices = 20
   12. Effect = Ken Burns
   13. Caption Animation = 500
6. Click Save Changes

Add Slides

Adding slides is almost like creating a post, but instead of adding content into the editor, you are adding a slide image by inserting one from the editor’s Add Media button on the first slide.

1. Type a name for your first slide
2. Click on Add Media
   
3. Browse for your first slide image
4. For your Caption box, you will add some HTML and text. You can use the caption sample further below to get you started.
5. Replace the text with your own caption content and adjust the positioning and styling as needed to accommodate the subject matter in your first slide photo.
6. Click Save Changes
7. Repeat for each new slide

Sample Caption

Captioning can be found on the snippets.