By Neil on September 20, 2015
This tutorial shows you how to use Views plugin (part of the Toolset plugins by OnTheGoSystems) to create and then embed an image (post) slider into the homepage of a WordPress website. This is done from scratch and this same slider can be placed on any page on the website or even in the sidebar if you choose.
I originally created this video tutorial for Toolset to be part of their own training tutorials that new customers can use to help them use their plugins better. But because this tutorial will be useful for a whole range of people I am also publishing it here on my website. Also if you have any specific questions or comments you can leave them below.
This was a nice WordPress tutorial for myself personally because I had not used the Views plugin to create a slider before, so it was a learning process for me. Previously I only used the Views plugin to style custom post types and to display lists and galleries of posts on my websites (I have used the Toolset plugins for a few years now across many of my websites).
In this tutorial a slider is created to display posts that are in the category Featured (i.e. a category called Featured was created and checked for specific posts). These posts were already created for me because I am using an official training website of Toolset for this tutorial, which you can have a play with yourself over at http://discover-wp.com/
Brief procedure to creating a slider with the Views plugin.
– The first step is to create a new View and choose the option ‘Display the results as a slider’.
– Next we setup how what we want the slider to show (i.e. posts in the category Featured), whether we want the slider to transition automatically or manually, and what manual slider controls we want. After this we choose what fields we want to show in our slider. Here we choose a Featured Image and Post Title (clickable).
In this tutorial I apply some custom CSS styling to the Loop Output and the Filter CSS editor areas to make the slider look nice. All of the CSS styling code is shown below:
CSS for the Loop Output (styling the post title over the image)
.slider-container {
/* add some space for transition controls */
padding: 0 25px;
margin-bottom: 20px;
/* make the slider container a reference point for positing elements it cotains (here: transition controls and slides */
position: relative;
}
/* make the slides div a reference for positioning the elements it contains (here: the slide title) */
.slides {
position: relative;
}
.slides h3 {
width: 100%;
padding: 10px;
background: rgba(0,0,0,.45);
/* position the slide title at the bottom of its container */
position: absolute;
bottom: 0;
left: 0;
}
.slides h3 a {
color: #fff;
border: none;
}
.slides h3:hover {
background: rgba(0,0,0,.65);
}
CSS for the Filter (styling the Next/Previous links and selector radio buttons)
/* place the prev/next controls on the sides */
.transition-controls .wpv-filter-next-link,
.transition-controls .wpv-filter-previous-link {
border: none;
font-size: 150%;
position: absolute;
top: 40%;
}
.transition-controls .wpv-filter-previous-link {
left: 0;
}
.transition-controls .wpv-filter-next-link {
right: 0;
}
/* center the page selector horizonatlly */
.transition-controls ul.wpv_pagination_dots {
text-align: center;
margin-top: 10px;
}
/* center the page selector horizonatlly */
.transition-controls ul.wpv_pagination_dots li.wpv_pagination_dots_item,
.transition-controls .wpv_pagination_dots li a {
display: inline-block;
float: none;
}
/* remove the defaulf styles for link offered by the theme */
.transition-controls .wpv_pagination_dots li a {
text-decoration: none;
border-bottom: none;
}
Summary
The Views plugin is the star of all Toolset plugins in my opinion, it does so much, or at least so much that I want to do on my websites. Not only does it create sliders as shown here it also styles custom post types, archive pages, and formats and displays posts (filterable if you like) wherever you want on your website.
If you want to learn more about the Views or all of the Toolset plugins head over to the Official Toolset website here!
Leave a Reply