How to Add a Slideshow to Your WordPress Website

In order to add or update a slideshow on a WordPress website, you must have Administrator privileges.

You can use these instructions to create both a wide single image that remains static or a multiple image slideshow.

To set a slideshow on your front page, three steps need to be taken:

Before starting, make sure the widget named 'TheThe Fly' is enabled. If it appears in your left navigation, it is enabled; if it does not:

1. Click on 'Plugins' (in the left-navigation)
2. Scroll down to 'TheThe Image Slider'
3. Click 'activate'

Step 1: Set up your slideshow

1. Click on the ‘TheThe Fly’ (left navigation) > Image Slider
2. Select the ‘Sliders and Slides’ tab
3. Click on ‘Add New Slider’ (at bottom of page)
   A 'Main Settings' page will appear. Adjust the following:
   • Slider Name: the name you choose should be indicative of your project (eg. ‘Main Page Slideshow’)
   • Slider Width: 700 pixels
   • Slider Height: (the height you’d like the slider to maintain – all images will be cropped or stretched to match this dimension)
   • Transition Time: this is in milliseconds and controls how long it takes to change between one slide and the next (whatever length of time you would like in seconds, add 3 zeros to the end and you’ll have the number of milliseconds to insert, ie. 5 seconds becomes 5000 milliseconds.) This time needs to be at least 2 seconds shorter than your slide's 'Delay' setting (see below)
   • Show Pagination: (optional)
   • Pagination Type: Dots
   • Pagination Position: Bottom Right
   • Show Controls: (optional)
   • Auto Play: (optional)
   • Loop Slides: (optional)
   • Resize Slides: (optional)
   • Linkback to Developer: keep unchecked
   • Slider Style: None
4. Click ‘Save & Add New Slide
   This is when you add new slides to your set up.
   A ‘Slide Settings’ will appear. Adjust the following (these must be repeated / customized for each slide):
   • Image: click on the image of the tree; the media up-loader page will appear as a pop-up page -- upload the image as you normally would using the media uploader. Information about the file will then appear – edit as you normally would when you upload an image OR select the Media Library tab and select an image already in your library. Ensure that you select that your image should display at Full Size.
   • Name: as a default, number the slides
   • Link URL: if you would like your slide to link to a page, insert the url here; if you do not want the slide to link to a page, leave this blank
   • Delay: [1]: this is in milliseconds – whatever length of time you would like in seconds, add 3 zeros to the end and you’ll have the number of milliseconds to insert (ie. 5 seconds becomes 5000 milliseconds)
   • Transition: Fade

   Caption Settings: If you would like a caption area over the images where you can say something about the image (such as what is on the York University homepage), fill in this section – if not, unclick ‘Show Caption’.

   1. Show Caption: (optional) If left blank, no caption will show
   2. Caption Position: where the caption displays on the image
   3. Caption Size: how tall the caption area displays as (a minimum of 40px is recommended)
   4. Caption Style: a darker background is recommended if images are lighter and  vice versa, however, the background should stay consistent throughout your slideshow to be less jarring to your visitors
   5. Caption Background Color: use a hex code or click in the box and a colour wheel will display to select a colour from. *Use of this option will overrule ‘Caption Style’ (above)
   6. Caption Text Color: use a hex code or click in the box and a colour wheel will display to select a colour from. *Use of this option will overrule ‘Caption Style’ (above)
   7. Caption Background Opacity: the higher the percentage, the more see-through it will be
   8. Caption Text: type in the text you wish to display with your image
5. To reorder slides, click on the Sliders and Slides tab and click and drag the slides into the order which you wish them to appear.

Step 2: Set your homepage’s template to ‘Slideshow Template’

1. Log into WordPress
2. Open up your homepage (Pages > All Pages)
3. Under ‘Page Attributes’ (by default, on the right side of the page) use the dropdown menu under Template to select ‘Slideshow Template’
4. Click ‘Update’ (under ‘Publish’, by default above ‘Page Attributes) to save

Step 3: Insert the slideshow shortcode into the Slideshow widget area

1. Click on TheThe Fly > Image Slider > Sliders and Slides
2. Copy the shortcode of the slider you’d like to use
3. Click on Appearance > Widgets
4. Drag a ‘Text’ widget to ‘Slideshow Area’ (on the right)
5. Open up the ‘Text widget and paste in the shortcode
6. Save and check your homepage to make sure everything is displaying as you’d planned.

---