We’re going to continue working on Thesis Boxes for our responsive skin and now we’re going to refine this and make it into something that is theoretically useful. The first thing we’re going to do to make it useful is to add some options to it. Remember in our sample section there was this options here, I’m going to copy that and paste it so we’ve got public function options.
Options can take a bunch of different parameters. They can take a type parameter, they can take a width parameter which is essentially the width of the input area, they can take code which is a special parameter to indicate to Thesis that the content that’s being placed in there is actually code, it can take a label, a description, a tool tip.
If it’s a select or check box, it can take options, if it’s a text box, it can take rows, it can take a default value and it can also take a placeholder value.
Refine the Sample Box
We’re going to start off with this. The type in this case, is going to be text, the width instead of medium, we’re going to make it long. We’re going to give it a description, we’ll make it so that it can be translated and a description will be, “Here is a description”. The label will be ‘Text Input’, the tooltip is some kind of description of what to do and I’m going to add a default, ‘Hello World’ will be the default.
It’s easier to describe this to you after you see it in action here but once we add an option, then what we need to do is make use of that option in the HTML. So now, let’s come over to our HTML example and we’re going to say, if it’s not empty, $this options. We’ve got option name up here which I’m going to change to ‘message’. And we’ll add that to the name of this option.
So if this options ‘message’ is not empty, then sanitize the value which is escape attributes, the message else, if it’s not empty then it’s going to print the message and it’ll escape the attributes of the message or it’ll print out the default.
I think I’m going to say, ‘Hellow Wordl’ here although I’m going to misspell it so we can tell the difference between this ‘Hello World’ and that ‘Hellow World’ and we probably should wrap that in a tag and close that tag.
It’s going to give us an option so we say save. Let’s upload our box and refresh this. Now when we open our sample box, the description goes right over there, “Here is a description”, here’s your tooltip, here is the label text input and there’s the default.
Review the Changes
If we leave it at this and hit save template, notice what happened here. The default didn’t kick in here, I mean the default showed up but doesn’t actually fill the space out in a text area. What it did was, it didn’t display the default ‘Hello World’, it displayed our failed message which was ‘Hellow Wordl’.
What Default Value Does
I want you to see the difference here because what you might be inclined to believe is that, default actually returns the default value. What this default does is it just places this value in the box but it doesn’t actually provide a value.
If you’re using radio buttons or if you’re using check boxes, this default actually does affect the outcome but if you’re using a text area or a select box, the default doesn’t actually result in a stored result as default, it ends up essentially being empty and thus we get this message. Actually, I’m going to say, ‘Nothing Was Entered’.
Make the Box Repeatable
Now, there’s something else we can do to this and that is we can make it repeatable. By repeatable I mean that you can take it out of this and you can create another instance of it.
There are 3 kinds of boxes and in terms of a skin, you really only going to reference a couple different kinds.
One is a terminal box which is like this and it can only exist one time in the template, period or you have a repeatable box and that’s what we’re going to have here. So we’re going to change the code here. The only thing you have to do with this is copy this, paste it and change title to name.
Create Additional Boxes
Once you do that, now you can create additional boxes and they will get different names and IDs and they’ll show up in that box list where you can create a new box so let’s see what that looks like now. That box went away, the box that used to be up here is gone now because you got entirely redefined but now, you can see there’s a Sample Box down here and Sample Text.
If we create that, now it’s blue not black, the blue means it’s not a terminal and ‘Howdy Everyone’. If we take that into our feature box area, save our template, we can come along and create another one of those, Sample Box and we could create as many of those as we want. And the difference there was because we made it, we gave it a name, so now there’s our Howdy Everyone.
Review the Types Options Available
I want to just kind of walk back over this now that you’ve seen it in action. The options can take a bunch of different parameters, we’ve seen some, type, width, description, label, tooltip and default but there are other parameters that can take as well. There are 5 different type of options.
This one was type = text but there could be type is checkbox, type radio, type text area and type select. Each of those types represents an HTML input type which should seem fairly obvious but the purpose for these is to give the user the ability to input something. So they’re all input fields and they all have some kind of an input type so that is text, checkbox, radio, text area and select.
There are also a variety of widths so there is the full width which takes up the whole thing, there is the long width which is what we just used, there’s the medium width which gets use an awful lot, there’s a short width and there is the tiny width. Those are your choices of predefined widths, full, long, medium, short and tiny.