Search

WooSlider

Installation ↑ Back to Top

The first step in setting up WooSlider installing the plugin itself. Before you do so, please check the minimum server requirements:

Server Requirements

An install of WordPress 3.4.1 or greater
PHP 5.2.4 or greater
MySQL 5.0 or greater
Usage Requirements
In terms of working with the plugin itself, a JavaScript-enabled web browser is required, as WooSlider is driven largely by the “Add Media” popup, which requires JavaScript to be enabled in your web browser. For the most part, this is enabled by default in major modern web browsers such as Google Chrome, FireFox and Safari.

Installation

Installation of WooSlider requires a few small clicks. To install the plugin, please use the following steps:

  1. Purchase WooSlider from the WooSlider page on WooThemes.com.
  2. Download the plugin to your computer in an easy-to-find location, such as your Desktop.
  3. Visit your WordPress-powered website’s admin section and navigate to the “Plugins > Add New” section.
  4. Click the “Upload” link below the “Install Plugins” heading.
  5. Browse to and locate the ZIP file you downloaded in step 2, and click the “Install Now” button.

WooSlider should now be installed successfully!

Getting started with WooSlider ↑ Back to Top

SlideShows Menu

SlideShows Menu

When using WooSlider, the plugin has two main user experience aims: to make the setup process quick and easy and to integrate seemlessly into how you use WordPress. WooSlider is chiefly controlled from a central settings screen, located at the “Slideshows > Settings” link on the main navigation menu of your WordPress admin. This screen contains all the default settings for your slideshows created by WooSlider (animation duration, speeds, display of slideshow controls, etc). Anything set here will apply to all WooSlider slideshows, unless overridden by a slideshow. We’ll discuss that in further detail down below.

General Settings

Settings to apply to all slideshows, unless overridden.

  • Animation – The default animation to use for your slideshows (“slide” or “fade”).
  • Slide Direction – Slide the slideshows either vertically or horizontally (works only with the “slide” animation).
  • Slideshow Speed – The delay between each slide animation (in seconds).
  • Animation Speed – The duration of each slide animation (in seconds).

NOTE: When sliding vertically, all slides need to have the same height.

Control Settings

Customise the ways in which slideshows can be controlled.

  • Animate the slideshows automatically – Whether or not to automatically animate between the slides (the alternative is to slide only when using the controls).
  • Adjust the height of the slideshow to the height of the current slide – Alternatively, the slideshow will take the height from its tallest slide.
  • Display the “Previous/Next” navigation – Show/hide the “Previous” and “Next” button controls.
  • Display the slideshow pagination – Show/hide the pagination bar below the slideshow.
  • Enable keyboard navigation – Enable navigation of this slideshow via the “left” and “right” arrow keys on the viewer’s computer keyboard.
  • Enable the mousewheel navigation – Enable navigation of this slideshow via the viewer’s computer mousewheel.
  • Enable the “Play/Pause” event – Show/hide the “Play/Pause” button below the slideshow for pausing and resuming the automated slideshow.
  • Randomize the order of slides in slideshows – Display the slides in the slideshow in a random order.
  • Loop the slideshow animations – When arriving at the end of the slideshow, carry on sliding from the first slide, indefinitely.
  • Pause the slideshow autoplay when using the pagination or “Previous/Next” navigation – Pause the slideshow automation when the viewer decides to navigate using the manual controls.
  • Pause the slideshow autoplay when hovering over a slide – Pause the slideshow automation when the viewer hovers over the slideshow.

Button Settings

Customise the texts of the various slideshow buttons.

  • “Previous” Link Text – The text for the “Previous” button.
  • “Next” Link Text – The text for the “Next” button.
  • “Play” Button Text – The text for the “Play” button.
  • “Pause” Button Text – The text for the “Pause” button.

WooSlider Shortcode ↑ Back to Top

WooSlider’s display within the contents of posts, pages and other custom post types is controlled via a new tab in the “Add Media” popup window. Inside this tab, you can setup your slideshow with settings specific to the type of slideshow selected, as well as override any of the “Advanced Settings” specified on the main “Settings” screen. To add a slideshow, please use the following steps:

  1. Click the “Add Media” button above the WYSIWYG editor when editing your page/post/post type.
  2. Select the “Slideshows” tab.
  3. Choose your desired slideshow type and setup the options pertaining to the selected type (all fields are optional).
  4. If you’d like to override any of the global slideshow settings, click the “Advanced Settings” button and make any adjustments you’d like (only the modified items will be added to the shortcode).
  5. Click the “Insert Slideshow” button.

Insert SlideShow

Default Slideshow Types

By default, WooSlider comes bundled with three slideshow types; Attachments, Posts and Slides. Each of these slideshow types has its own settings, pertaining specifically to that slideshow type, as well as a custom widget.

Attached Images Slideshow

The “attachments” slideshow type displays images attached to the current page/post/post type being viewed.

Attached Images SlideShow

The settings for this slideshow type are:

Number of Images – The number of attached images to display.

Use Thumbnails For Pagination – Use thumbnails for pagination instead of the default pagination bar.
This slideshow type can be useful for showcasing services on a “Services” page, for example, or a gallery of images that relate to the current blog post.

Posts Slideshow ↑ Back to Top

The “posts” slideshow type displays the most recent blog posts, optionally from a specific category, tag or category/tag combination.

The settings for this slideshow type are:

Number of Posts – The number of posts to display.

Use Thumbnails For Pagination – Use thumbnails for pagination instead of the default pagination bar.

Link the Post Title to its Post – Add a link to the post’s detail screen on the post title.

Layout – The layout to use when displaying the post content (text left, text right, text top or text bottom).

Overlay – Should the post text overlay the post image? (either no overlay, a full width overlay or a natural overlay determined by the text width)

Categories – Optionally display posts from only specific categories.

Tags – Optionally display posts with only specific tags.
NOTE: If both categories and tags are specified, the post will need to be assigned to at least one of the categories and one of the tags.

Slides Slideshow ↑ Back to Top

The “slides” slideshow type displays items from the “slide” custom post type. Any content added to the WYSIWYG editor for a slide will be output for that slide.

The settings for this slideshow type are:

Number of Slides – The number of slides to display.

Slide Pages – Optionally display slides from only specific slide pages.

Use Thumbnails For Pagination – Use thumbnails for pagination instead of the default pagination bar.
NOTE: Your theme, or another plugin, may have the “slide” custom post type already in existence and use. WooSlider doesn’t rely on any custom fields for the “slide” post type and can work harmoniously with your existing “slide” custom post type. The “Slide Pages” taxonomy can be used to split slides for use with your theme or with WooSlider.

Widgets ↑ Back to Top

By default, WooSlider comes bundled with widgets for the three default slideshow types. Each widget contains the same settings as the shortcode generation section of the “Add Media” popup. To customise the “Advanced Settings” within a widget, check the “Customise Advanced Settings” checkbox and click the “Save” button to save the widget’s settings. The “Advanced Settings” section will now display, where you can customise/override any of the advanced settings, specified on the main “Settings” screen.

Inserting WooSlider into a template file ↑ Back to Top

WooSlider comes with a template tag (function) which can be used within your theme’s template files (if you don’t want to use the shortcode). The template tag looks like this:

wooslider();

There are 3 parameters in this template tag, all of which are optional. The first is an array of arguments. Using this array, you can override any of the settings on the main “Settings” screen, specifically for that slideshow, as well as specify the “slider_type” to be used (the default is “attachments”). An example of this parameter in use would be:

wooslider( array( 'slider_type' => 'posts', 'smoothheight' => 'true' ) );

The above example changes the slider type to “posts” and ensures that the smoothHeight functionality in FlexSlider is turned on.

What about customising the slider_type-specific settings?

This is where the second parameter comes in. To expand on our above example, we may want to get posts with only a specific post_tag, such as “featured”. To do this, we’d have to create a post_tag in the WordPress admin with the slug of “featured” (no quotes) and assign it to a few posts. From there, WooSlider’s template tag would look as follows:

wooslider( array( 'slider_type' => 'posts', 'smoothheight' => 'true' ), array( 'tag' => 'featured' ) );

This expands on our example above to include the “posts”-specific setting of filtering by a specified post_tag.

I don’t want to echo this… how do I assign it to a variable?

This is where our third, and final, parameter comes into play. To assign the rendered HTML to a variable, the template tag would need a third parameter of false (no quotes required). An example of this would be:

$my_slides = wooslider( array( 'slider_type' => 'posts', 'smoothheight' => 'true' ), array( 'tag' => 'featured' ), false );

Inserting A Slideshow ↑ Back to Top

WooSlider comes bundled with several methods for adding slideshows to your website: a shortcode, various slideshow widgets and a template tag. This tutorial is a step-by-step guide to inserting your first slideshow into your content, using the WooSlider shortcode creator.

How do I find the WooSlider shortcode creator?
WooSlider’s menu is situated in the most natural location possible within WordPress: the “Upload/Insert Media” popup window. To access this popup window, click the “Upload/Insert Media” button above the content editor when adding or editing a page or blog post.

Add Media

Once the popup window is open, navigate to the “Slideshows” tab.

SlideShows Tab

Once viewing the “Slideshows” tab, a “Slideshow Type” select box is displayed, with the default of “Attached Images” selected. This is the quickest and simplest form of slideshow available within WooSlider (it slides through the images that were uploaded to the current page or blog post).

Selecting a slideshow type from this select box changes the settings you see in the popup window, according to which settings apply for the selected slideshow type. In the above example of the “Attached Images” slideshow type, we have the “Number of Images” and “Use thumbnails for Pagination” settings. These settings control the maximum number of images to be displayed, and whether to use dots or thumbnails for pagination, respectively.

Can I override the default slideshow settings?
If you wish to do so, at this stage, clicking the “Advanced Settings” button allows for any of the settings from the “Slideshows > Settings” screen to be overridden for this specific slideshow. While we’re just getting started, lets leave that section for now.

Final step
When done adjusting the settings for the selected slideshow type, click the “Insert Slideshow” button. This closes the popup and adds your newly-created shortcode into the content of your page or blog post.

By default, the shortcode should look something like this (assuming each of the two settings was customised):

[wooslider slider_type="attachments" limit="10" thumbnails="true"]

Saving and/or publishing the page or blog post is the last step. From there, you’ve inserted your first WooSlider slideshow!
Note: When using the “Attached Images” slideshow type, the page or blog post in question requires that images be uploaded (and thus, attached) to it. This is done using the “Upload/Insert Media” button and by uploading images directly through the popup window.

Adding Video ↑ Back to Top

You can add Videos with the WooSlider ‘Slides’ custom post type. To do this:

  1. Create a new Slide.
  2. Use the embed shortcode and add the video URL.
  3. Save all changes.
  4. Follow instructions on how to add the ‘Slides’ slideshow above.

Here is an example of how to use the video embed shortcode.

Back to the top