Full-Width, Content-Left Sidebar, Content-Right Sidebar… are kinds of page templates. For example, the WisdmLabs’ homepage is a Full-Width page. This blog page you are currently on, has a Content-Right Sidebar template. It is Full-Width though. Because the entire content (& sidebar), span the width of the page. An alternative to the full-width layout, is the Box Layout.
In a Box Layout, the content is placed (usually in the center) inside a ‘boxed’ area, and the background is visible.
This background is your page background. So it could be a single color, or a gradient, or an image. But here’s an idea! You could add an image slider in the background too. (Okay so maybe the title gave it away 😀 ).
In WordPress, this slider, would have to made available using a plugin. And how do we build such a plugin? Let’s find out.
[space]
How Does a Background Slider Work?
Before we continue, let’s understand a few basics. What is a Background slider? And how will it work on our WordPress website?
- The slider, is basically a set of images being displayed in a loop.
- Hence, we would need to identify the set of images, add transition time, and transition effect.
- The transition effect and time would be the same across all images
- The image transition would be on, when a page gets loaded.
[space]
How to Add a Background Slider in Your WordPress Site?
The process here, would to change the ‘background’ property for the page, using CSS. You could choose to use CSS animations, to transition slides, but do note, that CSS animations are not supported by IE versions (below 10).
As mentioned, we will have to incorporate the requirements into a custom plugin (or in your theme, if you choose so).
- Add Images to Media Library: The images which have to be displayed as part of the slider, have to be uploaded into your Media Library.
- Add Images to the Slider: We have to then add these images into our slider plugin. This can be done, by providing a settings option, where a user can select images present in the media library as part of the slider. A simpler approach would be to directly add image ids.
- Transition Effect and Transition Time: There have to be settings options where you can specify transition effect (left to right, right to left, fade, top to bottom), and transition time (in seconds).
- Use jQuery to Display Slider: Instead of using the CSS transition properties to transition the slides, you can use jQuery to set CSS properties which would then add a transition effect. For example, say the transition has been set as ‘fade out’. You have to use jQuery to reduce the opacity of the current image, and then set the ‘background’ property to another image.
[space]
Advanced Features of a Background Slider
An advanced background slider for WordPress could have additional features as mentioned below:
- Page Specific Slider: There would be an option to create multiple sliders, and set them on a per page basis (and by page, I mean a webpage, not the WordPress post type page). There would also be an option, to hide the slider for specific pages. This would be useful for pages with a full-width layout.
- Transition Effects Per Slide: Instead of the same transition effect and time for all slides, there would be an option to set the transition effect (and time) on a per slide basis. This feature could be easily included, by simply providing settings options at the time of slider creation, and reading & applying these values, when the slides are displayed.
- Transition on Page Load: Instead of the slides transitioning on a single page, there could be an option to transition the slide on every page load. This would mean that the background would be fixed on a single page, but would change only when a new page is loaded.
- Color instead of Image: This is a simple to understand feature. Instead of images being part of the slider, you could choose to display colors (either solid or gradients) as well. This can be handled, by changing the slider options settings, and including image or color option, on a per slide basis.
[space]
The Background slider plugin can be a great addition to your WordPress site, and can seamlessly work with any theme which offers a box layout. Do let me know your thoughts on this, using the comment section below!
