Build Your Own Business Website header image

A Beginner’s Guide to the Thesis 2.0 Skin Editor – Part 7 – HTML, The Template Editor

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

Video Transcript

Let’s talk about the HTML editor. So here we are in our HTML editor and we’re going to come over to our page. The HTML editor is a place where you create boxes and move them around. So the HTML editor comes with 3 types of core boxes. Now skins that you add may have additional boxes that they add and you may yourself have downloaded some boxes and added them yourself. So there are other kinds of boxes that may show up in this list.

But in terms of the sort of the out of the box core boxes that you have, there are 3 types. There are containers, placeholders, and there is content. And as I say all of that, there’s really only one box that is straight, plain, old, ordinary container and that is the container. The container is a straight container and has absolutely no content placeholder element to it. Everything else has some kind of a placeholder element.

So if we look at our container box in Thesis classic, it’s a container. They named it container for whatever reason and really, the only thing you can do here is to give it an id, give it a class, maybe add a hook name, give it a name but that’s it. Because all it is is a box that contains other stuff.

The majority of the boxes are placeholders. And so for example, wp nav menu is a placeholder for a navigation menu. Post box is a placeholder for the content of a post or a page. Comments is a placeholder for all of the comments that somebody has made on a post or page. Comment form is a placeholder for a form that people can place comments. You know, query box is a placeholder for where you can add secondary loops onto a page. We’re not really going to talk about query box here but it’s a little bit more of an advanced use. But nevertheless, it’s just a placeholder for content. The widgets box is a placeholder for what WordPress traditionally called sidebars, what we think of as widget area and it’s just a placeholder for that. And so each of these things, nav menu to widgets, are content placeholders, one way or the other.

And then you have the content itself which is a text box. A text box is not actually a placeholder. Well, it is a placeholder but it’s a placeholder for content that can only be edited inside the template. So I’m making a distinction between placeholder and content here. I figure, if you add the content in a text box then when you add the content in the text box, that’s actually content itself.

So those are your 3 types of core boxes: containers, placeholders, and content.

If you want to add a box, the way you add a box is to simply select the type of box you want to add, give it a name, and you’ve created the box. So for example, let’s just say we’re going to create a box here. We’ll let’s call it footer columns and hit add. Now the name that you give it is not significant except to you. That is the name you give it should be meaningful. It should be meaningful to you so that when you see it, you know what the box is. However, the name of the box, you can have 100 boxes of the same name. The name of the box does not need to be unique and the name of the box has no relationship to anyplace else. You don’t have to name the box the same thing as you name a package or something like that. This box name is there for you to understand what the purpose of that box is when you put it into place. And so I say it ought to be descriptive but it really doesn’t matter. You can name it anything you want.

Now when you click on the gear, you have an opportunity to choose an HTML tag. Now, this is a beginner class so forget all about that. Just let it be its default. If you’re not a beginner and you’re a coder and you want to choose something else, you certainly can. But for the time being, you don’t really need to worry about all these other possibilities for this stuff because almost everything you want to do can be done without having to adjust HTML tags. Same thing is true with hooks. You don’t need to worry about hooks. You’re not going to be using hooks. This is something that a programmer may want to use and it makes it… it’s a nice tool for a programmer but it’s an unnecessary tool for beginners.

However, HTML id and HTML class are very important. We’re going to talk about that at length here in a few minutes when we talk about what ids and classes are. Strictly speaking, it’s not necessary for the container to have either a class or an id. But if you want to assign any kind of a style to it, it does have to have something, either an id or a class.

Now somebody says they’re struggling to understand the difference between a place name from a container. A container is a box. You know, it might have made more sense rather than to name this thing container. It could have been main container. Now that it’s the main container, it doesn’t really matter what you call this as long as you understand what it is. I can call it fishsticks, one of my favorite things to say… I can call it fishsticks and it’s not going to affect the skin at all. If I save this template, it hasn’t changed anything. It still looks exactly the same. It still functions exactly the same. Nothing critical or important was changed because I named it fishsticks. The only thing that happened when I named it fishsticks is I named it fishsticks. So there is no importance to this name besides what you choose to call it. In fact, for the rest of this class, I’m going to call it fish sticks because that’s the point of me making this explanation is that the name is only relevant in that it helps you understand what the purpose of that box is when you look at it. Otherwise, it’s irrelevant.

So we created a box called footer columns. We gave it the name footer columns because that’s what we’re going to ultimately do with it. We haven’t given it an id or a class yet and we don’t really have to do that because we’re not going to apply any styles to it yet so it doesn’t really matter. So once I’ve done this, I can just drag it into place. So I shift drag, drag it into the footer, and now I’ve moved footer columns as a container inside of the footer container. And that’s it.

Dawn asks, “Are there any illegal characters in the name?” I don’t believe there are any illegal characters in a name. Let’s see though, that’s a good question. Let’s say div class equals fishsticks which makes this look very much like something. And if it… okay, the answer to that question is yeah, you probably shouldn’t make stuff that is named using code. I didn’t know that until somebody asked. You probably shouldn’t use code like content in your container, a name.

So we’ll go back to fishsticks. We created a box. Obviously, you can position a box just by moving it around, right? So if I wanted to move it inside of the footer, say below the attribution but above the admin link, all I have to do is shift and drag it. I mean, just drag it. If I want to move it out of the footer and into say the header then I have to shift drag it. But those are your two choices, either drag it around or shift drag it.

Somebody said, “Help! The shift drag doesn’t work.” Well, you have to press shift first before you click on it. As long as you do that first, it’ll work just fine.

One other thing to know is that changes you make to a box persist. That is they exist in all templates. So for example, we just made this fishsticks here, right? If we come over to our front page now, you’ll notice it’s still called fishsticks because this is a unique element, this box is. And to the extent that I’ve changed it anywhere, I’ve changed it everywhere. So if I change its container id or class, I change that for every instance of this box. And so this name will persist even if I made the change in one template. And I didn’t think I was making that change everywhere. If you’re changing a box that exists in multiple templates, those changes you make to that box will exist in every instance of that template.

It may be the case then that you are going to have boxes that you want to be different in different templates. And in that case, you’re going to have to create additional boxes for that.

So Greg asked, “Changes to a box persist but unique content can be different in different instances of the box. Is this a correct statement?” Well, yes it is a correct statement in that to the extent that the box is a placeholder for content. That content, by definition, is going to be different for each page that it displays. So for example, we could change nav menu to navigation menu. We can change nav menu and navigation menu. Well, every instance of this box has been changed now. That hasn’t changed its content.

4 Comments… add one
4 comments… add one
  • Lynn Woodward February 14, 2013, 8:26 pm

    Actually, when I create a box and then try to shift-drag it to the sidebar (and, yes, I tried other areas as well), it does not work. Yes, holding shift then dragging, very familiar with the concept. Not working… Using Firefox on the Mac…

    • Rick Anderson February 17, 2013, 7:01 am

      Lynn, the chances are you are having a java script error in Firefox. Firefox on the Mac seems to be particularly sensitive to them. Try doing this with a different browser (Safari or Chrome). You could also try restarting your computer, which often resets the issue the browser is having.

  • Lynn Woodward February 14, 2013, 8:27 pm

    Would also like to know how to get at the content that is in that default text box and how to edit the widget area. When I click on the link in the fake widget, I get a 404 error.

    • Rick Anderson February 17, 2013, 7:02 am

      Lynn, the way to edit the default text in the text box is to open it up in the HTML editor. Under the box options you’ll find a text area. You can enter any type of HTML in that area.

Leave a Comment