Creating Custom WordPress Sliders with Toolset

Many themes come with their own sliders. There are also great plugins that create slides out of anything. Still, in many cases, creating your own slider is the best solution. I’ll show how you can create your own sliders out of any WordPress content and display them anywhere in your site, using Toolset plugins.
Share on facebook
Share on twitter
Share on email
Share on facebook
Share on twitter
Share on email

Many themes come with their own sliders. There are also great plugins that create slides out of anything. Still, in many cases, creating your own slider is the best solution. I’ll show how you can create your own sliders out of any WordPress content and display them anywhere in your site, using Toolset plugins (WP Mayor readers can get an exclusive 20% discount when they purchase Toolset).

But first, “why”. Why would we ever need to build custom sliders?

Let’s look at a live example of the ‘video features and interviews slider’ from the BBC website.

image04

Source: BBC

A simple and minimalistic design, with simple horizontal transition. But hey, there’s a gotcha! The slider displays three interviews at a time. When you scroll, you get the next three. Ouch, that’s going to be difficult to build with a stock slider.

Another one. a gallery of sports cars:

image03

Source: Editorial Autos MSN

The interesting thing about this slider is that it shows ‘cars’. In our WordPress admin, we want to arrange these cars as a custom post type. Then, the slider should query the featured cars and display them with their custom fields. We could, of course, duplicate this information and save also in generic ‘slides’, but this would be a real hassle to maintain. It would be much more fun if the slider would take the content directly from the correct content type and fields.

To help you build custom sliders easily, Toolset team has created a tutorial on sliders CSS and HTML. The techniques in that tutorial will help you design slides with floated elements, absolute positioning and other advanced design techniques. It’s a useful resource for anyone building custom sliders, using any web development framework.

And, to get started easily, you are also welcome to download complete Toolset slider modules. The Toolset sliders library contains all sorts of sliders for all sorts of themes. The best thing is that these sliders are just your starting point. Once you’ve downloaded a slider module, you can fully customize and change it to your needs.

Building Custom Sliders with Toolset

When the prepackaged solutions are not enough, you can always build it yourself with Toolset plugins.

Here is the idea behind building custom sliders with Toolset:

  1. Define the content using Types plugin. If the content types already come from your theme or from another plugin, that’s fine too.

  2. Build the sliders using Views plugin. Views will query whatever you select from the database and can display it in any way. Sliders included.

When you create a slider with Views, the first thing you want to do is choose what the slides display. Views can query any content type from your database. This even includes categories. So, you can create sliders from any post type or taxonomy.

Then, you can filter the data. For instance, let’s say that we want to show only ‘featured’ stories in our slider. We can use a custom field or taxonomy to indicate that ‘stories’ are featured. Then, we tell the View to filter the results and keep only those ‘featured’ items. Simple.

Next, we tell the View to act as a slider. A slider means that we display each item (or items) at a time. When visitors click on ‘next’ or ‘previous’, we display the next set. When we enable ‘slider mode’ for the View, we select how many items appear in each page and how pages transition. In the settings section, we select how it works. The visual design is all up to our creativity. We will design slides and transition links with full HTML control.

Now the real fun starts. We’ll craft the HTML and CSS for slides. Don’t worry. Views takes care of the heavy lifting, letting us focus on the good stuff. Views takes care of switching slides. All we need to do is enter our CSS and HTML for the slides themselves.

image00

We use Views HTML editor to place fields using shortcodes. There’s no need to memorize these shortcodes.

image02

Just click on the V icon to find fields that belong to the content and insert them.

When we are all done, we insert the View (our custom slider) anywhere in the content. We can display slides inline with content, as widgets and even in templates.

image01

Views Sliders Make Sites Load Faster

Besides the flexibility that we get with Views sliders, there are other things that make our effort worthwhile.

Views creates plugins using an innovative approach, which delivers exceptionally fast load times and smooth transitions.

Conventional sliders load all the slides together and then scroll through. This means that the browser needs to query a lot of heavy content from the server before it can display the page. Have you ever seen a page that tells you for 30 seconds “Loading…”? This is what happens when pages load a ton of content from the server. It makes visitors wait, sometimes give up and also loads web servers.

Views sliders display content on-demand. They will load just the content that needs to display right now. This means that when a slider contains dozens of images, only the first set is loaded when the page loads. The other images will load when they are needed. If visitors click and navigate away from the homepage, the other images, that are never displayed are also never loaded.

Download Toolset

We’ve teamed up with the team behind Toolset, the page builder which lets you build WordPress sites without coding, to offer you an exclusive 20% discount.

20% Discount

Table of Contents
Our Sponsor

9 Responses

  1. can you please show example for the Slider with auto feed News aricles with images, like your last image in this article

      1. I have the Toolset, but honestly have yet to get the help to my specific question. I posted in the forums, asking if there would be any support coming for those who have the Toolset but uses Headway Themes?? Any ideas when the videos will come? It’s a pain not being able to effectively use the product with headway because the headway-views plugin is outdated, and there are absolutely no videos, or articles on using both together. Please help Amir

        1. Sasha-Shae – I have no connection with Toolset but I am familiar with their support forum and, so, was very surprised that they had not answered your question. I took a look.

          You asked your question on April 17th and Adriano replied in under 7 hours, despite living in a different time-zone.

          He acknowledged that a couple of Headway users had problems in the past. As you probably know, Headway does it’s own thing and does not adhere to WordPress standards in the way that, say, the Genesis framework does, but, even so, the Toolset guys tried to bridge the gap with a plugin. This sort of bridging effort is more usually the responsibility of the product that is breaking standards – this plugin should be the responsibility of Headway – but the Toolset guys put in the effort anyway.

          Unfortunately, Headway apparently underwent yet more changes, rendering their plugin ineffective and this is what caused your problems. Adriano let you know that he would check it out, he checked it out and reported back to you, letting you know that the plugin was discontinued.

          My interpretation of that is that the company felt, at that moment, that they could not commit to chasing after every change Headway makes, especially when the download stats show that it is used by a very small number of users. They may have felt that their energy would be better directed towards continuing to improve Toolset.

          You did not post to that thread again, not even to show a little class and thank Adriano for the efforts he made on your behalf and the THREE posts he made in response to your question. To now hijack a completely unrelated comment thread, on a different website, in order to publicly claim that you did NOT receive help is a disgraceful, infantile distortion of the facts.

          Instead, you could have simply checked back to the plugin page – as it happens, the Toolset guys DID release an update to the Headway plugin by the end of that month, April, and I see that it has been reported as working.

          My advice, and I honestly mean this to be helpful, is that your workflow should not depend upon a plugin designed to cater to a very small group of people – Headway is a box of tricks, designed to impress beginners, Toolset is actual magic. Upgrade your skills to a proper framework which does not require bridging plugins, such as Genesis and, I promise, you won’t look back.

          1. Hi, wow! Assumption surely does create for a bad discussion. I was in NO way trying to say that they weren’t helpful in a sense of no replies. I saw that response and it didn’t answer my question I initially asked (another person even commented to that fact), and I wasn’t able to reply after simply because I couldn’t log in once again (which is my own fault for forgetting my password).

            I’m sorry if my comment came of as bashing, that was not my intent at all, and I did not intend for any misleading posts (if that’s how you’re taking it), I am simply frustrated that there was no support for the Headway Views (no videos or actual tutorial posts on the subject), that is all. I still completely support the Toolset as I utilize the other features of it, so I am not sure how my comment was taken to be insulting.

            Another thing, I believe it’s very assumptive of you to now call me classless on the premise of something you don’t know or understand. But it seems such is the way of people these days. All in all, I do hope they will have support for it’s use with Headway. Before purchase I was told it was compatible and support would be given for those types of questions, but there is hardly anything covering it in the forums really, which was basically my main frustration. Overall, I had moved forward, but seeing that Amir posted, I went ahead and tried to see if he can answer my SPECIFIC question (how do we effectively use the two together?).

            Thanks, and have a nice day!

          2. @Donnacha, thanks a lot for helping out!

            @Sasha-Shae, We acknowledge the fact that Toolset has a high learning curve today. Once people get over that curve, they are nothing but happy, but too many have a hard time getting into it.

            For this reason, we’re completely rebuilding the interface on all Toolset plugins, starting with Views.

            At the moment the Views development team consists of 5 expert PHP developers, a graphics designer and a front-end designer. Believe it or not, that’s more than the current WordPress core development team.

            The new Views interface will not just look nicer (which it will) but also be a lot easier to use. Many operations that require multiple steps to accomplish will happen in one click. The GUI will consolidate all related operations to the same place, focusing on achieving goals.

            To make a long story short, we’ve heard you and we’re doing our best to improve on where improvements are due.

            Views 1.3 should be out in about a month from now. Much of the new GUI is already coded, but there is still a lot of work before it can go out.

            BTW, we also understand that you need a nice visual environment to design your sites. We do too. We were hoping that we can get this from Headway, but it’s not working out as we planned. Headway development is not in our hands.

            We’re coming out with our own solution for visual layout editing. It’s going to be ready sooner than you expect.

            Does this help?

        2. Amir – Sorry for stirring up controversy! Keep up the good work 🙂

          Sasha-Shae – I did not say that you were classless, just that the act of not thanking Adriano lacked class; he didn’t find a solution to your problem, but he did do a good job of answering your question. Of course, I didn’t know that you had lost your password and had no way to retrieve it in order to post again. I don’t presume anything bad about you as a person, most people in our industry are lovely folks, I’m sure you are too 🙂

          Again, my suggestions were genuinely meant to be helpful – I have been following everything closely and the imminent combination of WordPress 3.6, Genesis 2.0 and Views 1.3 (and CRED!!) is going to be incredibly powerful.

          I totally get why people are drawn to Headway but, in my opinion, the gloss only goes so far, it all leads to a dead-end unless Grant and Clay suddenly change direction and start acting as if other plugins exist. It might be worth at least experimenting outside their sandbox.

          Oh, and you’ll also find 1Password useful 🙂

  2. Thank you very much Amir! That does help indeed. That’s very true, the steep learning curve aided in my frustration, but I do look forward to seeing what version 1.3 offers and the ease of interface for it as well. I also hope Headway itself will work nicely with the Toolset in the future, I’ve seen one site so far that used the two together and it was beautiful (which is what inspired me to get the Toolset in the first place).

    Thanks again!

Leave a Reply

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

Stay up-to-date with the Mayor
Sign up to receive one weekly email about our latest reviews, tutorials, giveaways and more.