Build Your Own Business Website header image

How to Add ID and Class to Custom Boxes in Thesis 2.0

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

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.

In this session we show how to add ID and class to custom boxes in Thesis 2. Thesis has a system for taking advantage of these built-in options. We demonstrate how to create these options in a custom box.

Video Transcript

Member: Last question I had was I’ve been messing around these boxes and one of the things I couldn’t figure out how to do yet and maybe this is something you’re going over in the class that’s starting tomorrow… but I figured I would ask is how to add these selectors, the id, the class, the hook name, and then the admin check box. I figured out how to do all sorts of you know, boxes and selectors and that stuff but I can’t figure out how to add these guys because I know it has to go back and relate to internal WordPress function.

Rick: Well, no. It doesn’t actually. It relates to an internal Thesis function. And I’ll become the presenter and I’ll show you.

It’s actually quite easy. Thesis has this stuff built into it. It assumes that you want to do this and so it does have this nice, little system for taking advantage of these kind of built in options in Thesis.

Okay and so let’s see, I guess this is Thesis 2. And really, I think probably the copyright date is probably the best example of this. Here’s an example of class wherein your options, if you bring in first global Thesis and then use class and then the label is the Thesis API strings HTML class, tool tip is the Thesis API string’s class tool tip and class note. That makes the class exactly the same, makes the class show up in the same place as class does in the regular built in boxes. And you can do the same thing for id and for hook. So in that case, if we come over and look at…

Member: So just that little snippet that you’ve got there that runs from class with the array with those choices, that.. just calling from the global Thesis and then tapping that API is going to do all of that internal for you? You don’t have to save it or relate it back? It handles it all internal?

Rick: Well, you relate it back down here in your HTML. So notice I said class equals this options class and then I write my HTML, p class equals and then I grab the class and put it in there. So you’re still including that inside of the HTML element and you would do the same thing with id. And actually, you do the same thing with hook so I mean… I just want to go take a look at Thesis custom lib and then I think it’s core API boxes. No, I don’t have this quite… core API box. And let’s see, let’s just go find one of these. Let’s go find that container box. HTML… okay, no that’s not the one. This is an HTML container so here’s the hook. Alright, so it picks up the hook, array type text medium code true and then label Thesis API strings hook label tool tip so on and so forth. And then down here, you’ve got the you know, hook equals this options hook with this little bit of stuff. And then where you want that hook to go, you would say do action Thesis hook bottom and do action Thesis hook after hook and do action Thesis hook before hook and so on and so forth. So you would do these little do actions with this exact syntax you know, in an around the HTML that you wanted it.

Member: Yeah, that makes sense. Okay, that’s great. I appreciate it, thank you.

Rick: Yeah you’re welcome.

0 Comments… add one

Save $200 on Membership Now!

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

Leave a Comment