Well good morning everybody and welcome to this Lesson 6 of our How To Create A Responsive Skin for Thesis 2.0 class. We’ve had a 3 week break and in the intervening time, there have been a number of changes to Thesis.
Changes from Thesis 2.0.1 to 2.0.3
The last time we had this class, Thesis 2.0.1 was in play. And now we’re up to Thesis 184.108.40.206. Most of the changes in those two updated versions are back end changes that happen inside of the application itself that affect us. That is, they affect people who are writing code and programming. And so one of the things we’re going to do today is revisit some elements of Lesson 5 and update that information for the most recent version of Thesis.
Now nothing that we did in Lesson 5 fails in Thesis 220.127.116.11 so if you use the code that we demonstrated in Lesson 5 then it’ll still all work just fine. But Thesis does have a new system for a couple of elements that we talked about last week. And so we’re going to go ahead and take a look at those as we proceed to this.
Updating Boxes for Thesis 18.104.22.168 Code Standards
And today, really, all we’re going to accomplish is updating our boxes for the new code standards and then finish off creating our front page. So the chances are, we’re going to be adding another lesson on to the series at the end because the scheduled lesson today was to do the blog post page. We won’t have time to approach that today so that’ll be next week.
So, let’s take a look at the box method as it is changed. And if we look at the code that we wrote last week…Lesson 6 Responsive Blue Masters… oh, I need to rename this. Okay, I’m going to open up our box php file.
We created a couple of boxes in that lesson. We created the sample box which was essentially just a little box that presented a message. And then we created the Orbit Slider Helper box which is the way in which we’re including our Orbit Slider. This is really the critical one. The first box is sort of a complicated Hello World type of exercise.
Change to the Box Method Options
And in the intervening time, what has happened is that Thesis has changed a couple of things here. The first thing it’s changed is the box method options and that’s what we’re looking at right here, function options.
This method has undergone some changes. Chris observed that every time somebody wrote a box and they wanted to include an id or a class in that box, they had to actually write out all of this code. Every time a box is created. Well, that’s an awful lot of repetitive code, right? That’s maybe 10 lines of code in every single box you may create.
Of course, he’s got a whole bunch of boxes inside of Thesis and so this format has a way of multiplying the amount of code. And he decided that it would be easier to simplify this and essentially to make this automatic inside of options. And so he created this option called HTML options.
And so HTML options is going to change the way this works for us here. We can see the HTML options under the api.php file here. Inside of the api.php file, we scroll down here to find HTML options here. Set options, get options, HTML options, okay.
So HTML options automatically now includes the id field along with its label and its tool tip, the class field along with its label and tool tip and then an HTML field for an HTML element. And the HTML options takes an argument as an array of potential HTML elements. And you can see this in action in the latest version of this container box that we’ve been using as an example. Thesis HTML container, this is that main container box.
HTML 5 Elements Now Possible
And this case, he’s bringing in those HTML options and when he brings in those he adds to that option an array of these potential HTML elements. Notice that these HTML elements have actually changed quite a bit because now they accept HTML 5 arguments.
So for example, a section, article, h group, header, footer, aside. These are all HTML 5 elements. And in fact, while he doesn’t have it here, when you’re creating one yourself, you could easily create one such as a video or audio.
In any case, it’s any kind of these HTML elements that are possible and including the HTML 5 versions which you may not actually be familiar with because I’ve never taught anything about HTML 5. But now that it’s so easy to add HTML 5 elements into Thesis, I’ll be working on that myself as well.
But in any case, this is an example of how this HTML options thing works where in a previous version of this… let’s see if I can go find an old copy of this. Well, maybe not so… let’s look at Thesis 2 skin. This might actually have an older version of Thesis in it. So core skin and box and then let’s just scroll down here to container and yeah, this does have the old.
Make Changes To Our Existing Box
So in the old version, when you are declaring your options, if you wanted an HTML element, you would declare HTML as an option and you would declare id as an option and class as an option. And now all of these things are wrapped up inside of the new options. And the new options automatically include these two things but provide an opportunity for you to add your own versions of these. That’s what we’re going to take a look at here next.
Array Merge Function
And so if we take a look at our box, this is the box that we created last time. And what we’re going to do is change this. Now this HTML options, this is an array. So when you want to blend your HTML options array with your array that might have the hook or might have… well, in our case, has the message, you have to use the function called array merge.
That’s what’s happening here. We have this return and then you declare the array merge which is a php function. And then the array merge gets wrapped in parentheses. So you have array merge and then you’re going to include the first array. And the way we refer to this HTML options array is Thesis and then API and then html_options.
So that is the first element of the array merge is… actually, that’s a mistake here. First element of the array merge is really Thesis API HTML options. That’s the first part of the array. And then the second part of the array is the stuff we want to add to it.
And the stuff we want to add to it, we don’t want to add id and class since we’re already there. The only thing we really need to add to this is message, right? We could add other options here as well but in this case, the only option we have is message. And so what we’re doing is merging the Thesis API HTML options array with our next array which is this option and its settings.
And that’s really all there is to it. It will automatically now add the id and the class to this. So if we come over here and save it and then Lesson 6 box and upload it… and then come over to Lesson 6 skin editor. This is our text box we created last time with our sample box. And here it is, it has the HTML id, the same one that we had before… the class and then that text input.
So what we’ve done is maybe increased the complexity of understanding how this works, but reduced the amount of code that you have to write.
How Thesis API HTML Options Works
So the trick here is to recognize that Thesis API HTML options is an array that has 3 aspects to it. It has id, it has class and it has HTML element. And the HTML element is empty unless you add something to that. And you can add that here which is what we’re going to do in just a moment.
You take that array and you merge it with the rest of your options array. And now you’ve got a whole new set of options and includes both HTML options and your custom option. Okay, that’s how this works.
Add HTML Elements
The next thing we’re going to do is add some HTML elements to this. And so we are going to say array and then the first HTML element, we’re going to create, let’s just call it a div. And so that’s its key and its value will be div.
That’s the first element in our array and then I think the only other one we’ll do is we’ll just do a p tag. Obviously, you can do as much as you want here just as you saw in the other example. So we have now two elements in this array, a div and a p tag. And if we want, we can specify the default value.
Review Changes to the Box
So this HTML options takes an array of values that can be used as HTML and beside that array, it will also take a default, whichever that default happens to be. Let’s save this now and upload it. Refresh it and you’ll see we have HTML elements to choose from in this little sample text. Because now we have two HTML tags, a div tag and a p tag.
Add an Option
We’re not actually doing anything with those tags yet with our box so the other thing we have to do here is use this option. And so we’re going to start using this option this way. So we’re going to say $html equals and then we’re going to take this ternary operator or ternary function here. We’re just going to copy it actually, for the time being. Copy that ternary function.
So this options… it’s going to be HTML. If this options HTML is not empty then we’ll use this options HTML. And if it is empty then we’ll use a div. So this is a ternary function and earlier in my career, I found these ternary functions to be relatively difficult to interpret. So in fact today, we’re going to pull the ternary functions out of this and try to make it a little bit more transparent.
It reduces the code but it also means you have to really think your way through what each of these things is doing. So in this case, what we’re doing is we are in a variable called html. We are taking the option HTML. And if that option isn’t empty then we’re going to use the option. And if it is empty then we’re going to use div.
And so we’re going to take this HTML variable and instead of the word ‘div’ here that we had before, we’re going to replace that word with the variable.
Review Box Options Changes
We have our HTML like that so let’s save this and upload it and… let’s just refresh it. Let’s see, and in another feature box area, I’m just going to drag this sample text box into there. I like fish sticks. We’re going to pick the p tag here. Save that template and then we’ll just refresh it here.
And if we inspect the element, you can see it’s stuck inside of a p tag. So p id equals rick class equals stuff I like fish sticks. Okay so that’s exactly how we set this thing up and it’s working properly. If we switch that from p to div and save the template and refresh it, now I like fish sticks is stuck inside of a div.
Okay so that’s how that little aspect of it works. And if you want to just develop this as an ordinary thing, you can also simply omit the array and just put in the div. So if we come along like this and delete that, it’s no longer an array now. It’s just… this is the HTML option that’s available.
If we save that, upload it, refresh it, we’re not going to be giving it a choice of HTML element but it is going to insert the div for us where those HTML elements were. So see, the HTML element now is missing. But if we save this template, we come back over and refresh it, you can see this is still contained inside a div. And the reason it’s contained inside a div is because we gave it this value, the value of div.
When You Want to Exclude Class or ID
Okay now I’m going to undo this because there’s one more aspect of this I want to show you. And that is times in which you don’t want to use either a class or an id. There have been several times, for example I just created this box system of for responsive columns. And I wanted to control the class. So I didn’t want people to enter a class but I wanted them to enter an id.
And so I didn’t include a class option in those and that’s the same thing you can do here. You could exclude something and there’s all kinds of things you can decide to do here. But what we’re going to do is exclude the id. And when you exclude the id, things are going to change a little bit because the first thing you want to do is get that stuff out of the way into a variable.
We’re going to create a variable called options and it’s going to be equal. And what’s it’s going to do is it’s going to be equal to this right here. Options is going to be equal to Thesis API HTML options and its array of div p and with a final of div. Now we’ve taken all of the standard HTML options plus our customized list of HTML elements and placed them in these options. And now what we need to do is remove the id from this list.
And so the way you do that is to unset and then we’re going to pick our options. And then the options that we’re unsetting is id. What we’re doing is we are removing the id from this list of options and it’s no longer going to be available to be displayed here. And now when we do array merge, we’re just going to take this variable options and we’re going to place it right there.
So array merge is now not Thesis API HTML options but it’s Thesis API HTML options as modified by this list and this unset. So it’s going to be different than the standard API HTML options and we’re going to merge that with our little system here or with our additional one.
And if you’re finding this to be over your head, don’t worry about it. You know, you don’t really need to do some of these kinds of things in order to create a responsive skin. This is just an aspect of creating a responsive skin that I think professionals are going to want to use so that’s why I’m teaching it.
I forgot what we just did here. So we save that. Let’s upload it to our system and you’re going to see that the id is no longer available to us to modify. We’re not going to have a choice of id in this. So we come back over here and look at this. Now we have a class.
So we still have our HTML tags. We have a class but we no longer have that id. And if we save our template, the id is actually not going to be referenced. There’s no id associated with this any longer because we took that id out. Okay so that’s how options have changed in the box method in 2.0.3.