Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 5 – Part 6 – Create the Slider Box

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now we want to create a slider box for our Thesis 2 responsive skin. What we’re going to do is, we’re going to take this box class and expand it to work for the Orbit Slider.

Make the Box Class Work for the Orbit Slider

I’m going to copy the whole thing and directly below that, paste a new copy there. Now you can’t have more than one class of the same name so we need to change this name and that’s going to be, orbit slider so trbm_orbit_slider, translate, ‘Orbit Slider’ and ‘Orbit Slider’ so we’ve got our translation function done.

We’re going to go ahead and use our ID and our class here in our options but we don’t want to use message here. What we want to use is category because if there is a slide category, then we want them to be able to select the slide category that they want to show up there.

What we’re going to do here is call this slide category instead of message and the type will equal select in this case. It’s not going to have a long width and it’s not going to have a description.

Its label is going to be ‘Select a Slide Category’. The tooltip will be, ‘Select the desired slide category from the drop down list’ then we won’t have a default but we’re going to say options and this is where you would put an array of the options that somebody can choose from.

Define a Variable for Slide Categories

Now, since we don’t know what the potential slide categories are, we can’t actually input that information here so what we need to do is put a variable in instead. We’ll say, $select_terms. Put a variable instead and then what we need to do is define this variable. We’ll come up and copy that up here and we are going to use the Get Terms feature in WordPress.

Come over here and look at WordPress, let’s see get terms, Function Reference/get terms. Get terms takes taxonomies and arguments. Now the taxonomy in this case, since we only want one taxonomy, is going to be the slide category and I think actually.

The way Orbit Slider creates it is, it calls it slider categories so that’s going to be our taxonomy. Our arguments will be, we’re not going to use number, we’re not going to use offset, we’re not going to use orderby, we are going to use hide_empty and we’re going to say true.

We don’t want to choose an empty category that is a category that doesn’t have any slides. We’re going to return everything so we don’t need that, we don’t need slug. So really, the only thing we’re going to do here, the only argument that we’re going to have is hide_empty. We’re going to start by saying $args = array then hide_empty. Just to make sure we get that syntax right, ‘hide_empty’ and we’re going to say 1, ‘hide_empty’ => 1.

Create a Variable for get_terms

There’s our argument array, then we’re going to use the get_terms and actually, we want to create a variable for that get_terms so we’re going to start off by saying $terms = get_terms then the taxonomy name was slider-categories then $args. Our terms is going to be the full collection of categories and we want all the categories that aren’t empty. Once we have all those categories, it’s actually not in a format we can really use for this select.

Capture the Option of Category

What we have to do is parse it down a little bit. What I’m going to say here is, foreach and we’re going to say terms so foreach($terms, as $term). We’re going to create a variable which is an array called, $select terms.

We’re going to make it an array then we’re going to take the term slug and make it the value so that is, $term->slug. We’ll take the term slug and make it the value and the term name, make it just the name of the option.

For a moment, $select_terms, let’s just say the name were “birds” = “Birds”. What this $select_terms is going to become is an array of these things where this is the slug, all lowercase, no spaces, hyphens in it and this is the name which is sort of the niche name of each of our terms. It’s going to ignore ids and everything else that gets returned when you get_terms because get_terms returns a lot of information.

All we’re going to take is the terms slug and the term name and we’re going to add those as the key, the value and the name in this array. That’s actually key value but when we use it as a select boxes, it’s really going to be value name, it’s going to become that anyway so that’s how it works.

This here, $select_terms is an array of this key value pair but $select_terms, the options sees that array as a value and a name just like any other select input box would.

Now, what we’ve done is we’ve captured the option of category then down here, what we have to do is decide what we’re going to do when and if a category is selected so we’re just going to delete all this and we need a little bit of logic here.

Make Sure the Plugin Exists

The first piece of logic is to make sure that the plugin exists because if it doesn’t then we don’t want this thing to happen. That is, we don’t want to have any kind of output and we want to warn the person that the plugin doesn’t exist and they’re not going to have the output that they expect.

The very first thing we want to do here is ask if the plugin exist and if the plugin does exist, ask if slider categories exist. Because if there are no slider categories, then it doesn’t make any sense to show slider categories to choose from.

The way we’re going to ask if the plugin exists is really, just to ask if the class which uses the orbit slider class exists. So that looks something like this, if then exclamation point, if (!class_exists and this actually, if the class doesn’t exists (‘orbit_slider’)) that’s the name of the class.

If the class exists, what we’re going to do is display this message in order for this to work, you must install the Orbit Slider plugin. That’s what it’s going to show in the place of any slider if the plugin does not actually exist but if it does exist, then it’s going to say, if the slide_category is empty. Now, we have to actually define $slide_ category here first and we’re going to do that up here.

Slide category is going to equal then it’s going to be this options of $slide_category, this options ‘slide-category’. This variable $slide_category = $this->options[‘slide-category’] then it’s going to say, if $slide_category is not empty, then do the shortcode with the $slide_category in it and if the $slide_category is empty, then just do the shortcode.

Then I’ve got that tab, I’ve got an extra set of tabs in here I believe. I do, this one here is extra. The way we’ve innovated on this is, first we’ve used get_terms to get all of the slider categories then we’ve displayed those slide categories in a way in which somebody can select them and if the plugin exists, then we’ll keep on going, if it doesn’t exist then we’re going to give them this message.

If it does exist, if there’s a category that’s been selected, then we’re going to show just that category and if there’s not a category that’s been selected, then we’re going to just show the whole Orbit Slider. That’s our whole shooting match here so I’m going to upload that and refresh it.

Add the Orbit Slider

Now, we should have a choice of Orbit Slider. We don’t, you know why? Because we haven’t added this class to our list of boxes in skin.php. We’ve got this class list array, now we need to add a new one to this array. We add that box to our array and now, it’s going to become available. So now we have to put our skin.php file in and if we refresh our page, now we have Orbit Slider as a choice.

We come over here and say, Orbit Slider, add the box, we drop the Orbit Slider there, we’re going to take our Sample Text out. Notice they don’t have a slide category in fact right now, I don’t believe I have the Orbit Slider here so we should be getting an error message. Yes, we do right there, “In order for this to work you must install the orbit slider plugin” so we are getting a little error message.

Install and Activate the Orbit Slider

We’re just going to run over here and install the Orbit Slider, activate the plugin and come over here to Slider Options. We’re going to turn the arrows off, slide captions off, we’re going to use our custom size and hit save settings then we’re going to create slides and we’re going to select a featured image.

We already have some images uploaded here specifically for the purpose so 950 x 320, use this featured image, post that one, add a new slide, forbidden, publish and I’m going to create one more slide here, Lilys. I want to set the featured image, publish that one.

If we refresh this, now we have our slider in there. Maybe I have something setup not quite right. I have two conflicting plugins here, I have Meteor Slides and Orbit Slider. Let’s see, I think that’s going to work now. Evidently, I picked the same image twice. I see what you’re saying, you’re right I did do that, didn’t I?

Now what we’re going to do is come over and take a look at this in the responsinator so you can see why I like to use the slider because it automatically scales down. It automatically adjust its size to fit the device, the images are big so it’ll take a second here. So little tiny one and which is really, pretty much the point of that. The point of the slider is for it to be able to scale in size based on the viewing screen.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment