Search

How to Create a Background Slider Plugin for WooThemes’ Canvas Theme

Listen to this article

I think a very important requirement, for a majority of plugin users, is to have few and simple settings. Most of you could probably set a number for ‘few’. Maybe, less than 5 settings? Less than 10? How about ‘simple’? Since ‘few’ and ‘simple’ are quite vague, let me explain. A requirement came about our way to build a Background Slider Plugin for Canvas theme. A Background Slider, would be something like this:

Full Width Background Slider

What we have here is the background of every page, as a slider. The post or page content is centrally placed. The requirement was to build a plugin compatible with the WooFramework, and mainly the Canvas theme. The requirement for the plugin was simple. We needed to restrict ourselves from providing rarely-used-but-good-to-boast-about features, to providing few-simple-easy-to-use features.

So how does one go about listing ‘few’ features and making them ‘simple’?

[space]

The Features of the Background Slider Plugin

If you have used Canvas theme, you would know that there is already an option to create slides. Thus, the simplest would be, if we could modify the feature to allow the creation of a background slider. But based on the requirements and initial investigation, a better option was to create a custom plugin.

So, let’s take a look at the features this plugin would have.

  • There should be an option to club slides into a Slider or a slide Group.
  • Multiple sliders can be created, which would imply, that there has to be an option to decide the background based on post types, or post ids.

[space]

Option to Add a Slide

The plugin would have a simple option to create Slides. Considering that the requirement is only for a background image slider, you would have to think if there really is a need to add options for captions and overlays. A background slider would be placed behind content, which means there isn’t much scope for such overlay items, and we can certainly do without these options.

  • We only have to provide a simple option, to either upload an image for the slide, or select a background color.
  • A thumbnail for the slide, (based on the background image or color) would be shown for each slide.

[space]

Option to Create Sliders or Slide Groups

For those of you familiar with the WooFramework, the term Slide Group refers to a collection of slides which together form a slider or slideshow. This slider could then be used as the page/post background, instead of a static image or color.

  • We would have to provide an option to create a new Slider or Slider Group.
  • There would be an option to add created Slides to the Slider
  • A simple drop-down list could be provided to select the transition effect.
  • A settings option will have to be provided to allow selection of transition duration.
  • There would be a check-box to turn on ‘Random Slide’ or ‘Shuffle Mode’, which could be used to display slides in a random fashion.

You could question the use of an altogether separate option to create slides. It would have been simpler to just provide it into a single setting, when creating the slider itself. But this option is important to improve re-usability of slides, and improve user experience. We’ve tried to maintain it to a minimum few, without compromising on user customization options.

Can you tell me how many settings options would finally be provided in the plugin? A total of 7 options. Which is quite few, right? You have the option to add a new slide, set the background, create a slider, add slides, chose transition effect and time, and an option to shuffle slides. The second is to provide simple options.

[space]

Creating a Custom Background Slider Plugin

I would say, simple settings are the ones which are easy to infer. For example, to add and create new slides, it would be better, to simply go along with the default WordPress interface. Since a Slide is a Custom Post Type, we could do with the default listing and ‘Add New’ option. Along with this, it’s better to remove any unwanted fields. Such as title, author and image fields could be used. The description and comments fields can be removed.

To create the Slider and reorder slides, a drag and drop interface can be provided. The slides present will be available in a gallery, and can be dragged from there, and placed to order the sequence.

Interface for Background Slider Plugin

As mentioned, a simple drop-down list can be provided to select the transition effect, and a check-box to turn on the shuffle mode. Needless to say, the slider created has to be responsive, and full width.

[space]

Compatibility with Canvas Theme

When the requirement is specifically for a theme, you need to check if the plugin functionality does not break any page templates, and the slider is displayed seamlessly. More often than not, you would need to tweak the CSS to get things running smoothly. Of course it is best to test out with several themes, before the end product is ready.

Aparna Gawade

Aparna Gawade

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »