How to create a slider with our Serious Slider plugin

Our classic WordPress themes feature a complex and highly configurable slider which can feature either custom defined slides or ones generated out of site posts. With the enforcement of customizer-based theme options, we had no way of keeping most of this functionality (since repository themes are also not allowed to create custom content). All we could have included with our new line of customizer-based themes was the slider-out-of-posts functionality. However we felt this wasn’t enough.

So we decided to do the next best thing: write our own slider plugin and recommend it with the theme. This is how our Serious Slider was born (and even made it to the WordPress.org plugins repository). Serious Slider is a fast and slick slider plugin which relies on WordPress’ custom post types functionality to provide a simple and efficient slide management system. We’ve also chosen Bootstrap (albeit somewhat tweaked) as a basis for its design and visual functionality to give it maximum efficiency and minimum JavaScript overhead in all browsers.

And while still young and with plenty of room for new features, we feel our slider plugin has already surpassed the capabilities and robustness of our previous integrated slider. To convince yourself of this, you can give it a try right now.

Installation

Upon activation, our customizer-based WordPress themes will recommend their companion plugins through a dashboard notification. Click on Begin installing plugin and follow the steps to install and activate Serious Slider (you can chose to install the other companion plugins as well – read about the usefulness of the Force Regenerate plugin here).

If you’ve previously dismissed this notification, do not fret. The library we use to recommend plugins provides a convenient plugins installation page, under Appearance » [Theme] Addons

The plugin can also be used totally separate from any of our themes. In that case you can install it like you’d install any other WordPress plugin, through the Plugins > Add New interface (simply search for Serious Slider).

Once installed and activated, the plugin will create its own content section in the dashboard sidebar titled Serious Slider (right below Pages).

Under here there are several subsections with the plugin’s functionality: the slides list page, the add new slide page, the slider management page and an about the plugin page.

Some terminology clarifications:

  • slide – is the content bit (made up of an image, a title, some text and perhaps a custom link) that’s actually visible on the site (for a longer or shorter time, depending on configured durations);
  • slider – is a collection of slides (consider it a category of sorts); the slider is the entity that you are selecting/insert to display in your site’s content; it is not visible as such, but its associated slides are displayed;

The slides are listed under All Slides, while the sliders are found under Manage Sliders.
You can have multiple slides and multiple sliders, with one slide only being associated (part of) a single slider at a time.

 

Sample Content

When there is no content available the plugin will suggest adding some or loading the sample content. Click the underlined link on the All Slides page and then the Create Sample Slider on the plugin’s info page to load sample content. The suggestion link is hidden when you do have slides, but the sample content button is always available on the About page if you ever need to use it.

Using the sample content is a very good way of getting started as it provides a basis for your own sliders and slides.

Sliders

With or without sample content, start by creating a new slider (or customizing an existing one) from the Define Sliders page.

Here a slider’s configuration parameters can be defined. The Title (1) field is used for administration purposes (to identify the slider) and is not publicly displayed anywhere.

Click Select Images (2) button to quickly create a slider from a selection of images without adding individual slides manually. The plugin will automatically use certain information from the images during slides generation: image filename as slide title and image caption (or image description if caption is not set) as slide text. These can be adjusted later by editing the individual slides.

The rest of the configuration parameters control the slider’s appearance and behaviour:

General (3)

  • A). Sort and display slides within the slider by publish date (newest to oldest) or order (low to high)
  • B). Slider size can be set in two ways: adapt to images (keep width, resize slider dimensions according to image heights) or force constraints (hard resize images to the configure slider size values, even if aspect ration distortion will occur) – we strongly recommend the dimensions set match those of the slides images used.
  • C). Slider width (in pixels) – the slider is responsive and will shrink to fit the screen width when needed
  • D). Slider height (in pixels) – only matters when the size option is set to force constraints

Appearance (4)

  • E). Slider appearance style – chose from 7 appearance presets: Light, Light 2, Dark, Square, Tall, Caption Left and Caption Bottom; the last, Cryout Theme is a special style that can be used for best integration of the slider with our themes’ appearance.
  • F). Adjust the visibility of the navigation arrows and bullets (between always visible, always hidden or appearing on hover).
  • G). Adjust to increase or decrease the overall slider caption font sizes.
  • H). Adjust the caption text alignment inside captions – left, right, center or justified.
  • I). Limit the caption maximum width (in pixels)
  • J). Caption appearance style – choose from 3 presets: none, text shadow or text background color to increase the visibility of the caption text.
  • K). Choose the accent color (used differently depending on appearance style on slider elements like bullets or arrows)

Animation (5)

  • L). Set the transition animation effect between different slides. Select from 7 presets: Fade, Slide, Overslide, Underslide, Parallax, Horizontal Flip or Vertical Flip.
  • M). Pause transitions between slides on hover
  • N). Transition delay: the amount of time (in milliseconds) a slide is displayed on the site
  • O). Transition duration: the amount of time (in milliseconds) the transition effect between slides takes
  • P). Set the caption animation effect on appearance. Choose from 6 presets: no animation, Fade, Slide, Blur, Zoom In or Zoom Out.

Existing sliders are displayed on the right side of the page (together with the shortcode call – indicted by the arrow).

Slides

To create a new slide, click the Add New Slide button in the sidebar.

  • 1). The title value will be displayed as the slide’s title.
  • 2). The content will be displayed as the slide’s caption. The content can use HTML markup *** If you’re updating from an older slider version and relied on links inside captions to display slide buttons, this has now been replaced with dedicated slide buttons  – see section 6 below.
  • 3). Associate the slide with a specific slider. The slider should already exist to be selectable from the list. A slide can only be associated with one slider at a time.
  • 4). Specify an (optional) order value if you’re sorting the slides by the order attribute; otherwise control the slides order by adjusting their publication date and time.
  • 5) The featured image is the slide itself. We highly recommend the image to have the same dimensions as the values set in the slider options
  • 6) The slider can display up to two slide buttons (with individual links) on each slide – leaving the label fields empty disables the buttons:
    • a) slide button label and c) link URL
    • b) second slide button label and d) it’s link URL
    • e) make the buttons open in a new tab/window
    • f) assign a separate URL link on the slide image itself and g) make it open in a new tab/window

The All Slides page lists all the slides (from all sliders) with some of their attributes: the title, the associated slider, the featured image, publish date and order value.
While hovering over a specific slide row WordPress will reveal the Edit and Quick Edit buttons with which the slide (links under the title) or slider (link under slider name) can be edited.
The slide image can be quickly set, changed or removed using the available functionality in the Featured Image column.

The interface can also list only slides associated with a particular slider by either clicking on the slider name or selecting it from the (underlined) Select Slider filter at the top.

Displaying a slider

Our customizer-based themes include built-in support for our slider plugin. This is integrated in the customize interface panel, under the theme’s Landing Page » Slider options. Simply select the Serious Slider value for the Slider option and choose the desired slider from the second option.

You can also use the slider shortcode call [serious-slider id='X'] provided on the Define Sliders page to integrate a specific slider in site content (inside posts, pages or even input fields).

The plugin additionally provides a widget for displaying sliders in widget areas.

The information and features presented in this tutorial apply to Serious Slider version 1.0. We will update this tutorial as we add new options or features to the plugin, but this might not happen immediately.

For questions or additional information, you can find us in the forums.

 

More Tutorials This article is part of our WordPress general and theme specific tutorials series. For more useful information check out our tutorials section.

7 Comments

Leave a Comment