Create a slider like the demo website using Widgetkit

February 23, 2014| Sushil Adhikari

The slider on the Circumference 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 I 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 Circumference 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 “circumference-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 “circumference“. 

Using your FTP program, upload the “circumference” 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; circumference will be installed there as well next to it.

FTP Program:

An FTP program is something everyone should have. It lets you log into where your website files are located and where WordPress is installed. If you do not have an FTP program, you can use a popular free one called FileZilla.

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, I 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
    create-slideshow
  3. Enter a name for your slideshow, for example: My Slideshow
  4. Click Save Changes
  5. Set your options:
    1. Style = Circumference
    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

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


Screencast Tutorial for Creating a Slideshow


Categories: Setup Tutorials for Circumference

Leave a Reply

Black Friday Offer - 50% Off Discount on ALL PRO THEMES AND MEMBERSHIPS Use discount code BFCM2019