Build Your Own Business Website header image

BYOB BX Content Slider box for Thesis 2

For those in the know the Thesis Query Box is one of the most powerful features of Thesis 2. Now, with the new BYOB BX Content Slider box that tool just got infinitely cooler! Just wrap a Thesis Query Box in one of these babies and you have yourself a fully configurable content slider. It’ll rotate through any number of posts or custom post types and display any part of a post.

Use it to slide through images in your portfolio. Use it as a featured product slider. Use it as a testimonial rotator. Any time you want a slick way to scroll through images or excerpts this is the tool for you. Plus it is swipe enabled for folks on touch devices and it is fully mobile responsive. Seriously folks, ANYTHING a Thesis 2 Query Box can display can be shown and rotated through with this little beauty.

BYOB BX Content Slider box for Thesis 2 from Rick Anderson on Vimeo.

With this box you can:

  • Cycle through an unlimited number of slides comprised of any aspect of a post or custom post type
  • Select the HTML wrapper that will surround the output
  • Control the speed of the slider
  • Control the duration of the transitions
  • Control the type of transition
  • Control backgrounds, padding and borders
  • Have unlimited sliders in any template
  • Control the navigation between slides – or remove the navigation entirely
  • Drag and drop the slider anywhere in your template

Premium members of the site can download the Thesis 2 box from the link below.

Download BYOB BX Content Slider box for Thesis 2

To download this box you must be a Premium Member.

Why not join today? Click on the "Join Us!" button in the upper right corner and have full access to this and all the rest of our premium content.

The current version of the BYOB BX Content Slider is 2.1.0.6.

Installation Instructions:

Remember that this is a box, not a plugin, skin or package so it is installed and activated from the Thesis 2 Select Boxes menu.

  • Download the box from the link above. – Do not unzip the file.
  • Go to the Thesis >> Boxes >> Select Boxes menu
  • Use the upload box button to select and upload the box from your computer.
  • Once installed, place a check beside the box description and hit “Save Boxes”
  • Go to the Thesis 2 Skin Editor, you will find a BYOB BX Content Slider item in the Add Boxes menu.
  • Place the box in a template
  • Place a Query Box in the BYOB BX Content Slider box
  • Set the HTML Tag in the Query Box to “ul” and configure the query box options
  • Configure the slider box options
  • You are finished!  Now the query box output will be in the form of slides!.

Video Transcript

This is an introduction to the BYOB BX Content Slider Box for Thesis 2. This box will take any kind of post content that can be displayed and turn it into a sliding box or a set of slides using the query box.

Examples of Ways to Use the Box

Below are some examples of what you can do with this box.

  • Take post content and slide through it for recent posts or featured posts
  • Use it as an image slider for portfolio
  • Use it to display featured products, testimonials or sponsors or
  • Use it for anything that you want to have slides of or that you would like to have a sliding content

Install the Box

The first thing we’re going to do is install the BYOB BX Content Slider Box. Click on this link to download it and then we’re going to install it over here on this site. I’m going to come over to Boxes, Manage Boxes and upload the box. Choose the file from the downloads and I’m choosing the byob-bx-slider box.

Notice how this box has a 1 beside it? If I use this box the box is going to break, okay? What has happened is my operating system notices that I’ve already got one of these downloaded in the folder so it adds the number 1 to this which ends up making it not work.

So what you want to do is make sure that if you’ve got more than one copy you use the copy without the numeral in it and if you don’t you want to make sure it has the same name.

Upload that box then check the box here. Save the box at which point when we go into our skin editor we will now have one that can be added to our template.

Example Use: Add Slider of Posts to Sidebar Column

What we’re going to do is to add some posts to the sidebar column here on our homepage. We’ll scroll down here under the Select the Box to Add dialog and look for the BYOB BX Content Slider box. We’ll add that box.

Add Query Box

Then we’re going to shift+drag that box into the sidebar column. We’re going to use the query box that has the tool for grabbing the content and for deciding what content to display. So we’re going to add a query box here and we’re going to call this query box Featured Posts.

The critical thing about this is that this HTML Tag must be switched to UL. If you look at slider box and say, “Oh, it’s not working right”, then you should double check that the HTML Tag has been switched to be UL. So with it setup as a ul we can say okay to that and then shift+drag and drop it into the BX Content Slider.

Content Slider Settings

Let’s open up the content slider settings. Note that there are two bright orange notes here for you. One of them is that “You must save the CSS after saving these options in order for them to take effect”. So once we save this template we’re going to have to go over to CSS and save the CSS. And the second one is that “The Query Box HTML Tag has to be set to “ul”.

Slide Transitions

You have a number of things that you can set here. For example, you can set slide transitions. You have 3 different choices for slide transitions: horizontal, vertical and fade. We’ll stick with horizontal.

Duration of Slide

The duration of the slide is in millisecond, so 4000 milliseconds means the slide lasts 4 seconds. The transition speed is 500 milliseconds which means that the transition from slide to slide is a half a second. These things are all modifiable.

Styling

Then we come over to styling and you can choose to show border around this. You can set up a background color. You can set up your padding. By default the background color is white and by default the interior padding is 15 pixels and then you can also set up some navigation controls.

What we’re going to do is just show navigation buttons. We won’t show start and stop buttons and we won’t show pagination. This can be used to adjust the height of the buttons which we’ll look at here in just a moment.

Review the Change on the Site

Let’s say okay to this and come over here and save our template. Then save our CSS and go over to the blog page, now you can see we’ve got this slider here set up. It’s got a little border around it, it’s got the title, the name, the date, the edit, the navigation buttons, the excerpt and the Read More.

This is just as the query box happens to be set up and you can move back and forth through these things with those boxes and if you leave it unchecked it’s just going to transition through them one by one. So there are a lot of different things you can do with this, right?

Example Use: Display Slider of Post Images

We could, for example, come back over here and display some post images instead. Let’s take out our WP Featured Image and the Excerpt out, the Edit Link out, the Date out, the Author out but just leave our Featured Image in. Then pick the medium size featured image and let’s say centered with no wrap and set our headline to a p.

Then we can save this template, come back over and refresh it and now you can see what this looks like. It’s behaving simply like a featured image slider, like an image slider. In fact, you could remove the title if you wish and just show images there.

Change the Appearance of the Slider

We have a lot of control over the appearance of this. Let’s come back over to the settings and let’s not show those navigation buttons but let’s show start and stop buttons and pagination buttons at the bottom. Say okay to that, save the template, come over to CSS and save that.

Refresh the page and now we’ve got these little pagination buttons down here and we’ve got a start and a stop button and you can move through that if you wish. If you want more space around the border you can just add additional margin in the settings here under styling. Say 25px instead. Remember to save the CSS, refresh it and now you’ve got more room around that.

Right now this is set up using posts. It’s just taking the most recent post but we can easily do this with anything that the query box can display. For example, we could come over here to the query box and go to Skin Content. Come over to our Featured Posts query box.

Example Use: Display Slider with Post Category

Right now it’s set to display recent post but we could easily just select post categories and show only the oranges categories and only 4 of those. Hit save and then when we refresh this, the only posts that are going to show up here are posts in the category of oranges. So obviously it works as a category slider.

Example Use: Display Slider for Custom Post Types

This can also be used as a slider for custom post types. For example, I’ve created these testimonials. I have a testimonial post type that I’ve created and I’ve got 4 different testimonials here. So instead of using post I’m going to choose testimonials.

Come back over to Skin Content and open up that Featured Posts query box and now I’ll choose Testimonials. We’ll just leave it like that, save those options.

Show Image and Excerpt

Then we’ll come back over to the Skin Editor and now, rather than just showing an image in this what I really want to do is show an excerpt as well. I’m going to use the tiny thumbnail image size for this and it’s going to be left with text wrap. Link the image to the post and hit save.

Now we have a testimonial slider with the picture of the person giving the testimonial and then their little bit of introductory text. So it can serve that function as well. Then you can click off to the actual testimonial if that’s what you want to do.

It’s a very versatile tool. Anything that you can display in a query box, can be displayed in a rotating fashion in this slider. I hope you find it useful.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options

Related Addons