I wrote the BYOB Orbit Slider Helper box as an exercise in learning the new Thesis 2.0 box system. This box makes it possible to add the WP Orbit Slider to any location within a template. In this part of the seminar we walk step by step through the code discussing the various parts of the box, how it works and what it accomplishes.
The only box that I have right now that really works well is this Orbit box, the Orbit slider helper. You can download that off of my blog page. I’ve also put it on the forum but you can download it from my blog page…on the Launch Party replay videos. And you can use that to play with it.
Anatomy of our BYOB Orbit Slider Helper Box
Here we have that byob Orbit slider helper box. It sits in a folder called byob Orbit helper and then it starts off with this heading, the name, my name and description of what the box can do and the byob Orbit helper class. And of course, as I said before, that byob helper class makes it way into this class, byob Orbit helper extends Thesis box.
Then we come into this section where we have this name and this title, remembering that this name is what you need to have if you are going to have multiple instances of this box in your templates and then we come directly down here to the construction function which Chris describes as a pseudo constructor.
Post Thumbnail Support
Here in this situation I want to make sure that we add theme support for post thumbnails, even though Thesis 2.0 does do that. So this is probably superfluous. But you know, I wanted to define an image height and an image width for the slider and once I’d defined those for the slider, I wanted to create this Orbit custom named image size with those image heights and widths.
Then I had one other filter I added which is a function that I added myself, that has nothing to do with functions inside of the Thesis box class. Every other function here, this protective function translate, construct options HTML, those are all inside of that Thesis box class. But this one, display image size name media uploader, that is not.
This is my own function that I’ve added and just added it separately from the other functions. I’m essentially adding all of the custom image sizes to the media uploader display so if you’ve got custom image sizes, you can see them all in the media uploader rather than…
Chris: Rather than just the small, medium, large…
Rick: Right. So that’s what this is here and in this construct, I add the filter to call this function.
So then you’ve got the construct and then you’ve got these options. Now these options are the ones that show up when you click the little gear for a box. So you click that little gear and then you have the form to fill out, right?
So let’s come over and take a look at this and make sure my Orbit slider helper box is added to this. And it is. There’s the name, there’s the author name, here’s the description and version.
View the Box From The Skin Editor
Now let’s go to the skin editor and inside the skin editor we’ve got this feature box area and I’ve added my feature box slider, the byob Orbit slider helper. I gave it this name and then here these are essentially the options that I can define. I can get image height, the image width and the category from which to display the slides. And this information is essentially dependent upon the Orbit slider. You wouldn’t necessarily do this with some other plugin. It’s just what you need for the Orbit slider.
Chris: So you got essentially 3 pieces of information you’re asking for.
View the Function in box.php
Rick: Right. I’m giving 3 pieces of information. So that’s what’s happening here. You’ve got these options and I’m setting up… well, if you’ve got a bunch of different slider categories then I’m going to go grab all the slider category names and then I’m going to make us select a list so you have that option select box, the drop down for each of the category names.
So that’s what this function is. First, it’s just a WordPress get terms function where the arguments are taxonomy is slider categories and height empty equals 1 which means don’t get any categories if they’re empty. And then I say for each terms is term and then I’m creating this little array that is term slug equals term name. I’m creating this little array that I can then use down here in my select box.
The only reason that’s there is because I want to populate a select box from all of the slider categories that already have slides in them. And otherwise, this wouldn’t exist. But this return array does exist and the return array is the various options. So image height, the type equals text, the width equals short and the label equals the slider image height. There’s a little tool tip and there’s a default. And the same thing is true for width.
Chris: So for those 3 inputs, height, width, and category, where are you assigning those? Because those are just becoming variables that you’re then passing off to the slider plugin, no?
Rick: Well, the name of the variable is image height. So when you come down here and you want to use it, you use this construction “this options slide category”. So there it is, “this options slide category” because this is the option. So here’s your function. This options means this instance of this method called options and this method has 3 parts, image height, image width, slide category. And those are the 3 things that can be referenced here.
Chris: So you’re storing all those inside an array, inside options and then you’re just calling them back later? In that other…
Rick: Yes, yes although because this is Object Oriented Programming, it’s slightly different because options here does not refer to a variable. Options here refers to a method and the method returns these 3 things. So this options “image height” is the value and this options “image width” is the value. It’s similar to an array but it’s not really an array. I can’t express this well because now I’m swimming in a territory that I’m not really comfortable with. I understand how to use it but I don’t really know how to express what it’s doing.
Chris: Yeah, I get what you’re saying.
Rick: It feels like an array but it’s not…you don’t want to confuse it with an array. So you see the same thing here where image height equals this options image height. Image width equals this options image width because that’s what these are. This options image height, image width, slide category.
Chris: So this is kind of similar to when you’re working with a theme options panel and you’re getting different options, it’s kind of the same idea.
Rick: It’s very similar to that but what Thesis does is it takes these things and actually puts them into an options array. So this protected function options, this is just the API that we’re using to connect up to what Thesis is doing. And Thesis is saying, okay for every class that extends Thesis box, take a product of these options and store it in an options array.
And you could, theoretically, completely independently of this, access that options array by saying, options equals get option and then name the options array and then drill down through this options array until you finally get down to these pieces. But what Thesis is doing is…you’re not really interacting with an options array. You’re interacting simply with this part of an options array. And the fact that it’s in the options array is invisible to you. So it’s similar but it’s not the same.