Build Your Own Business Website header image

HTML – Using 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.

The next thing we are going to talk about is using the template editor and using boxes in Thesis 2.3.

Three Functions of Core Thesis Boxes

There are three functions of core Thesis boxes. One of the functions is as a container. The container can hold other containers and it can hold content placeholders. The second function is as a WordPress content placeholder. The third function is a Skin content placeholder.

As a Container

On this template here, this container named container is an HTML container.

As a WordPress Placeholder

This nav menu is actually a WordPress placeholder because WordPress is creating the menu and this is sitting there telling WordPress where to put the menu.

If we come down to the headline, this headline is a content placeholder. It is sitting there waiting for the headline from WordPress to be placed in it. You can move it around. It doesn’t contain anything. It just represents the placeholder for the headline.

As a Skin Placeholder

And the third type we see down here in the footer and that is the Attribution. The Attribution is a box that contains skin content. The Attribution and the text box are in Thesis Classic Responsive the only two types of boxes that are skin content placeholders.

They are the only type of essentially non WordPress content or content that is not generated inside the WordPress admin system.

How Content is Added from WordPress

Chris: When it’s a WordPress website, WordPress has content and widgets. Those are two ways you can really input content into the WordPress database. At least the type of content we are concerned with right now.

Then you’ve got anything else that could come from us via custom coding or with the Theme or Skin as a conduit for that. So that’s really the deal. Anything that appears in Skin Content on the Skin Content page with an editable content link is the only available content in your entire skin that you can edit that isn’t coming from WordPress like your posts and pages or from widgets. That’s another way to think about it.

What the Color of the Box Means

Rick: These box colors have meaning.

White Boxes

Containers are almost always white. In Thesis Classic they are always white.

Green Boxes

Chris: Your skin is the only one I’ve seen that has the dependent containers, the ones that come up green?

Rick: Yes, dependent content boxes are green.

Chris: I was watching another one of your webinars and saw that in a template and I was like “I’ll be damned I think I remember making that” but I hadn’t seen it in so long.

Blue Boxes

Rick: So, container boxes are white. Non dependent content boxes or WordPress content boxes are blue. You can have more than one of them in a template.

The difference between blue and purple is that you can have multiple blue boxes. For example, you can have as many text boxes as you want. You can have as many widgets as you want. You can only have one Attribution and one wp admin link in a template.

Purple Boxes

Chris: The purples are single instance boxes and the blues are multi instance boxes. There’s also a correlation between those distinctions. Let’s look in the library, it’s in the upper right. For the multi instance boxes to get a new instance you go down to the bottom and they are preceded by an asterisk.

Salmon Boxes

Rick: These down here. Then you have the salmon boxes which are dependent child boxes. In other words they don’t exists in and of themselves. They are part of their parent.

Displaying and Hiding Boxes

Let’s look at a simpler version of a post box for a moment. Let’s open up the Archive post box. All of these boxes are child boxes of this box here. You have this tray where these boxes are actually being displayed when you drag them over. And these boxes are not being displayed.

Anything you want in the tray to be displayed you just click on, it goes up there and you can move it around. Anything you don’t want in the area that is going to be displayed, just drag out. As soon as you start dragging you see this “drop orange boxes here to hide them in the tray”. You go over the tray until it turns yellow and then drop it. Now it is in the tray.

You don’t create a headline and select a box to add. You can’t create a headline. The headlines are part of the post box. The same thing is true of authors or category links or the content or any of these other things. They are all dependent children of the main box.

How to Add a New Box

The way you add a box is by simply going over to the “Select a Box to Add” or the library. We’re going to add a new menu. Come down to this with the asterisk beside it. Select it and then click “Add Box”. Once it comes up here, you’ve added a new box that can be added to your template.

Important: Rename All New Boxes

The very first you need to do when you do this rename this box. If you don’t rename the box, you don’t know which version of it it is when you are looking through the library.

I’m going to call this “footer menu”. That way I know that when I go to Skin Content and decide what menu I want displayed I can tell which menu it is. And when I’m looking for it in the library I can tell which box is for this menu.

You always have to name your boxes. The worst thing you can do is create boxes and not name them. You won’t be able to tell later what they are for or how you used them elsewhere. And you can’t even tell if it’s a box that should be deleted. I’ve seen many beginners dashboards full of boxes without names. So, always name your boxes.

Box Options

When you’ve done this you can see that you have a couple of different sets of options. You’ve got HTML ID and HTML Class. That is essentially the id or class name that you are assigning to this element. And then in this case you can output responsive menu and change the menu control text if you wish. Those are HTML options.

This has a set of box options that we don’t see yet but we will see. First let’s Shift+Drag it into the container. I just dropped the footer menu in the footer and I can’t see its box options. I can only see the HTML options and the Admin options.

The Admin options are display ID, or in other versions of it hook ID. It is a tool for more advanced users so we aren’t going to cover it here. The primary use for display ID is for skin developers who are using PHP as they develop their skin and understand how to create their own display options. This is for those folks.

Thesis Dev Tools Box – Show Box Options in Template

The HTML options are ones that you are likely to want to have some input on. Now if we save this template and we go over to Skin Content, you can see it says “Footer Menu”. This is the box option I was referring to.

We can select a menu. We’ll choose test menu. Save the options. Come back over to the template now and down here in the footer we have a menu.

There’s a tool though that will make this a lot easier for you as you are doing this kind of work. That is the Thesis Dev Tools Box. We talked quite a bit about it in the Professional seminar so you might want to take a look at that.

One of its cool features is to “Show Box Options in the Skin Editor”. Check that box and save those options. Go back to the Skin Editor and to the Front Page template. Open up the option and now you can see you’ve got the options tab here. You can change the options for the box options inside the Skin Editor. That’s the benefit of having that tool.

How to Remove a Box

We’ve already talked about how to position boxes. So let’s talk about how to remove a box without deleting it. All you have to do is move it over to the library and save your template. That keeps in place.

How to Delete a Box from All Templates

However, if you want to move a box and delete it from ALL templates, then you would Shift+Drag and drop it into the trash and save the template. Now that box has been deleted from every template that it was added to. It no longer exists in the skin.

What is WP Loop?

Someone has asked, “What is the wp loop?”. The answer to that question is that WordPress generates the page by a series of queries and the first query is “what page do you want to display”. That’s the first query it wants to process. And that is the main query. There are lots of other queries.

For example, every nav menu is a query. Many widgets are queries. There are other things that add queries to a page but the main query is “what page do you want to display”. Well, wp loop is a box that stands for the main query. And, in particular, the content of the main query.

I don’t really know why it’s a separate box but when you want to display the main content of a page it has to be inside the wp loop. And you can only have one main query in a page therefore there is only one wp loop. You can’t have multiple main queries.

We are going to talk here soon about how to add other queries to a page. Wp loop exists on every page and that is going to display the main page content whatever that happens to be.

0 Comments… add one
0 comments… add one

Leave a Comment