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 5 – Add Class and ID to Thesis Boxes

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

Applies to -

Allow User To Add ID and Class to Your Boxes

The next thing we’re going to do to this box for our Thesis 2 responsive skin is to demonstrate how to allow the user to also add ID and class to these boxes. As you may well imagine, it’s very much like doing this, that is, we’re just going to create another option.

In this option, instead of message, it’ll be class and type = ‘text’ width there usually equals medium. We’ll get rid of the description here, we don’t really need the description for this. The label and the tooltip are going to come directly from Thesis so we’re going to borrow this example directly from Thesis itself then.

Under Thesis, library, core, skin and box.php, we’re going to go down to container, come down to the container function and actually, we’re just going to copy this directly then I’ll just explain them.

Change the Sample Box

Here we have our ID, type => ‘text’, width is medium, code is true. This is the instance where the code is being used because the person is writing an ID in. So what’s going to happen is, it’s going to get sanitized and properly formatted if they mess up the formatting.

For the label here, we’re just going to borrow Thesis’ label. In order for us to borrow Thesis’ label, we actually have to access the global Thesis variable so global $thesis. The global Thesis variable gives us access to the Thesis API string HTML ID, the tooltip and the class description.

It just makes the label and the tooltip identical to the standard Thesis ones so that’s what we’re doing here. We’re grabbing that label, $thesis api settings, html_id and id tooltip and HTML class. Actually, was there not a tooltip in there? There was a tooltip, I just didn’t copy it.

Now we’re going to borrow some of the default Thesis stuff and otherwise, our message stays the same here.

Standard Thesis Way to Include an ID and Class

While we’re borrowing this from Thesis, we may as well take what it does with its HTML. So we’re going to copy this, come down to our HTML and replace our opening p tag with this echo. Now, this HTML was actually a variable there, we’re not going to use that so we say, div.

I’m going to talk about depth and tab here in just a minute but well, let’s just take out tab for the moment. In that way, we won’t confuse each other.

So it’s div then if the ID is not empty, then put the ID in else, put nothing in. If the class is not empty, then put class plus the class name in and if that’s not, then put nothing in then close out the div tag. Then we’ve got our comment, nothing was entered and we’ll close out that div that we opened out up here.

What we’ve now done is use sort of the standard Thesis way of including an ID and including a class inside of the wrapping HTML that’s wrapping the rest of our content here.

If we save this, we upload it and refresh it, our Feature Box Area, Feature Box has our Sample Text. We can give it an ID of rick, we can give it a class of stuff and we’ll say, I like fishsticks, save our template, come back over and look at it.

Isn’t that funny, we have a failure which suggests I failed to close something out. Okay, I like fishsticks worked so there’s obviously a little glitch some place in the code that I wasn’t able to identify but that was causing a problem.

I don’t know what it is but it was something in there. I bet it was the absence of global $thesis because of these here, $thesis=>api=>esc. These things need that global $thesis and I failed to put global $thesis in that last one. Let’s just look and see. I bet you if we just do that here, global $thesis, I think that was the problem. Yep, that was it, it worked that way.

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