Create a slider using Widgetkit in Pure and Simple Pro

The slider on the Pure & Simple demo website is optional, but this tutorial will help you get setup if you decide to use the Widgetkit slideshow. You can freely download Widgetkit from yootheme.com and once you install it, you can enjoy the benefits of the custom theme (style) that we have created for it.

You can also use some other slider if you want to.

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 Pure & Simple theme, you get a custom theme for the slideshow to match what you seen on the live demo website. You can find this style in the the “Puresimple-package” folder, then in that you will find a folder named “widgetkit“. Inside that is a folder named “slideshow“, and within it is a folder named “pureandsimple“. 

Using your FTP program, upload the “pureandsimple” folder into the “styles” folder in the location given below:

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; pureandsimple 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 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 I 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 = pureandsimple
   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 the process for each new slide

Sample Caption

This is a sample caption from the first slide on the demo site that you can use. Depending on what the subject matter is in your slide photo, you may need to adjust the positioning (margins) and colours based on what your slide is. This allows you to get creative and to make each slide different.

For positioning, I used percentages on the margins which is relative to the window size (responsive effect), but you can use pixels if you are more comfortable with that. Change the colours (HEX values) so that you can colour the text based on the colours in the photo’s subject matter. Add any additional inline styles that works best for your needs. 

<div class="caption1" style="margin-left: 14%; color: #de8d89;">Responsive</div>
<div class="caption2" style="margin-left: 12.5%; color: #c38939; font-style: italic"><span>for</span> Mobile Viewing</div>
<div class="caption3" style="margin-left: 16%; color: #000;">in Your Favorite Device!</div>

Screencast Tutorial for Uploading Slideshow Theme ( Same as Circumference ) 

Screencast Tutorial for Creating a Slideshow