WooSlider

WooSlider is a plugin which adds a slider to your site. It comes with various settings to control every aspect of your slideshow, including transitions, directions, sliding speeds and pagination controls.

Requirements ↑ Back to top

Server Requirements ↑ Back to top

  • An install of WordPress 3.4.1 or greater
  • PHP 5.2.4 or greater
  • MySQL 5.0 or greater

Usage Requirements ↑ Back to top

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 ↑ Back to top

  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.

More information at: Install and Activate Plugins/Extensions.

WooSlider global settings ↑ Back to top

WooSlider is 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.

WooSlider in WordPress admin

General Settings ↑ Back to top

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 ↑ Back to top

Customize 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 ↑ Back to top

Customize 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.

Default Slideshow Types ↑ Back to top

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.

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.

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.

Via shortcode ↑ Back to top

  1. Open the page/post/product or custom post type that you’d like to add a slideshow to
  2. Click the Add Media button:
    Add media
  3. Select Slideshows from the list on the left:
    Select Slideshows
  4. 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).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. 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 customized:

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

  6. Save and/or publish the page/product to save all changes.

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.

For more information on shortcodes, check out the WooSlider Shortcode Parameters Reference documentation.

Via a widget ↑ 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 customize the “Advanced Settings” within a widget, check the “Customize Advanced Settings” checkbox and click the “Save” button to save the widget’s settings. The “Advanced Settings” section will now display, where you can customize/override any of the advanced settings, specified on the main “Settings” screen.

Via a template file ↑ Back to top

WooSlider comes with a PHP 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:

<?php 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 customizing 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 );

FAQ ↑ Back to top

How do I add video to a slide? ↑ 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.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top