Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 9 – Description of the Thesis Core Boxes

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

So now that we’ve discussed how to use the HTML Editor in Thesis 2.1 and how boxes work, the next thing that we’re going to talk about are specific Thesis core boxes and what they do.

Core Boxes are ones that Automatically come with Thesis

We’ll begin by looking at core containers. By core, I mean boxes that come automatically with Thesis 2.1. That’s what I mean by core containers or core boxes. Let’s look at the list starting here at the top noting, of course, that AWeber and all of these BYOB boxes none of those are core boxes.

Comment Form

Those are all core boxes that have been added to the site in the box management system. But the first two are the comment form and comment list. Those really only show up in the Single under post comments and the comment form is a parent box that has dependents.

These are the Comment Form’s dependents that is the Cancel Reply Link, Comment Form Title, Name, Email Input, URL Input, Comment Input, Submit Button. Those are the various elements of the comment form and if you want to get rid of something or add something into this form you would do that here.

Comment List

In addition to that you have your comment list. This is the comment list and it has settings obviously but the comment is also a parent and it has dependent boxes. So comment numbers is a dependent box. Comment text is a dependent box and if you open up comment avatar, author and date are dependent boxes.

Comment reply, comment permalink, edit comment link are dependent boxes. Those are the boxes that control comments and you are very unlikely to actually edit those. Especially as a beginner, it’s just very very unlikely that you’re going to need to wrestle with that.

The comment system is probably the most complex aspect of WordPress, especially WordPress templates, so my recommendation is you just ignore those and don’t bother trying to mess with them. But if you feel like you have to mess with them then what you’re talking about messing with are a comment form and a comment list.

Comment Navigation

Comment navigation is this, essentially, previous comments, next comments this kind of thing. It’s not a container. It’s about comments. It’s a content placeholder. So that was comments list, comment form.

The HTML Container

The container that is used the most often is the HTML container and this container is one. This white header box is a container, you can tell that just by opening up box options that says HTML container. This is the name of the box type HTML container. Again HTML container and that’s what this is here HTML container.

You don’t want to leave the word container in here so give it a real name and I’m going to say Rick’s container. This container can contain anything. All the rest of the web page is contained inside of this container. You can choose an HTML tag. The container has the largest version of HTML tags so you can give it a div or a paragraph tag or section, article, header, footer, aside, span, nav. You can even have no HTML wrap around the container.

I’m not actually going to talk to you about what each of these things does, that is a different subject I think. But the default for the HTML container is a div which is a structural element. You can give this div an id which we’ll talk about in a little while and you can give it a class.

This class is a very important class in the Thesis Classic Responsive skin. The container class and the container is the class that is used to essentially, give the page its size, its width. This one is empty. We haven’t set up an id or a class for it there.

Post Boxes

Next up are Post Boxes. This here is the Post Box, Post/Page Post Box. The Post Box gives you the opportunity again to choose an HTML tag. You can add a class to the wrapping of the Post Box. You can choose to use automatically generated WordPress post classes. And you can choose a schema whether it’s Article, CreativeWork, Recipe, Review or no schema at all. These are the options of the Post Box.

Beside the Post Box options are the contents of the Post Box. The Post Box is a parent type box and so it has an extensive tray, everything associated with a post is in the Post Box tray.

For example, Twitter Profile Link, Thesis Thumbnail, Number of Comments, Excerpt, Author Description, Tags, the Content which is the full content of the post. Thesis Post Image, WP Featured Image, any Categories that it may have, a link to edit the post, the date the post is published, the author’s name, the Headline of the post and the Avatar of the Author of the post.

All of these things are dependent boxes that are part of or dependent on this Post Box. Any time you are going to display the content of a page or the post you are doing so using a Post Box.

In this case, on the Home page, the Post Box is displaying the title, the name, the date, the edit link, the featured image and an excerpt and a number of comments. That’s what is displayed on the Home page. On the Front page, the only thing that’s being displayed is the title, again the name, the date, and the edit link and then the page content. So, it’s different from template to template but all of those things are placed by using one of these.

Only 1 Post Box per Template

Let’s create our own for fun. You are only going to use one Post Box per template but if we were to create our own Post Box you would see that by default headline, author, edit link and content are all shown in the Post Box. The date, author, avatar, description, excerpt, number of comments, categories, tags, post image, thumbnail, wp featured image and twitter profile link are all inside the tray or not being used by the box by default.

Post List

Next to the Post Box we have something that only shows up in our Home Template and in the Archives template and that’s a post list. This did not exist in 2.0. The post list is a much more limited version of the Post Box. All you can put in there is the headline, number of comments, the edit, the date, author, author avatar and featured image.

It has a much more limited range of functionality but it does very quickly make it possible for you to just generate a list of post titles with a date and the author and that kind of thing and then image.

Essentially, anything without content or excerpt or any of the other dependents. And it’s only available on Archive templates, a custom template and on the Home Template so you wouldn’t use it anywhere else anyway. I’m not actually sure what it’s intended to do since, essentially, it does a limited subset of the regular Post Box. Nevertheless, it is a container and can contain other boxes and has those dependents.

Query Box – The Most Powerful Box

Next up is what I believe to be the singly most powerful box in Thesis 2.1 and that is the Query Box. The Query Box is like a Post Box, except the Post Box always has to be inside this WP Loop box. And the Post Box always displays the main content of that page.

Can Display Secondary Content

The Query Box is a box that can display secondary content. So you can use a Query Box to display say related posts, or recent posts, or post in a given category, or posts in a given custom post type.

Can be Used Outside WP Loop

You use it with my BX Custom Slider Box in order to provide a content slideshow. It has all the same things that you can add in a Post Box, except that it can be used outside of the loop. And because it can be used outside of the loop, it’s got an extensive number of settings that are set inside of the skin content.

Query Box Example – Related Posts

So, let’s just take this box right now and we’re going to call it related posts. For the time being, we are going to leave everything alone here. We’re just going to say Related Posts. I’m going to take the WP Featured Image and put it in there. I’m going to drag that to the top. I’m going to take the author out, so I drop it there.

I’ll take the edit link out and drop it there. I’m going to save this but I’m not going to use this one in this template. I’m going to instead, come over to my Front Page Template. We’ll turn that one on again and I’m going to drop it not inside of the WP Loop, but I’m going to drop it inside of the content columns.

Notice how the headline and all that went back to normal. I’m leaving the excerpt in and I’m dropping out edit link. I’m dropping out the author, opening up the tray and adding back in the Featured Image. We are going to take the featured image to the top and the featured image I am going to pick is going to be the thumbnail. I want it left with text wrap and I want it linked to the image of the post. So, those are those options for the featured image.

Then the headline here I’m going to change the tag to an H3 and I want the headline linked to the article. Then the excerpt here, I’m going to use the Thesis 2.1 enhanced excerpt but I don’t want the bracket around the ellipses so I’m just going to say without the bracket. I’m going to add a read more link and the read more text is going to say learn more.

Changing the Settings

Now, if I refresh it, this is showing me some posts inside of this content area and what I want to do now is set some settings for this. And I’m going to set those here under the skin content, because now my related posts Query Box shows up here. I have the choice of posts, pages or testimonials.

I can do either recent posts, or I can do categories, or tags; I’ll take categories. I’m going to say Cherries as the category. I only want to show 2 posts and it has some advanced options as well but we’re going to just let it sit at this. Save that option, refresh this and we’ll come back over and refresh this.

Now I have 2 teasers sitting here on top of the other. Obviously this wants some styling added to it but nevertheless we have very easily created a set of teasers. I’m going to show you how to use this to create the feature box here in a few minutes.

You can also use it to display anything that you want, any kind of post content. So, it doesn’t have to be the featured image, you could drop the featured image down here in the tray and it must be the headline and the excerpt. Now you’ve got those two things there.

You could choose, instead of putting it on the top, you can take this Query Box and drag it down to the bottom, save the template and move it out of your way. So, you can do all kinds of stuff with this Query Box and if you look around it all you’ll see that I do lots of stuff with Query Boxes.

Core Placeholders – Dependent Boxes

You also have a bunch of core placeholders in Thesis 2.1 and we’ve seen them lots, like the nav menu was a core placeholder and the site title and site tagline are core placeholders. These dependent boxes are placeholders and there’s a large number of core placeholders. Each of the placeholders may have options to set and so, some of these placeholders have end up with stuff that shows up in skin content and some of them don’t.

Widget (Widget Area)

A notable one that does, is the widget. I really wish he hadn’t had called it widgets. I wish he’d called it widget area because that’s really what it is. If you are an old time WordPress user then you are familiar with the term sidebars.

The sidebar was the thing that you put widgets in and so 3 ½ years ago or so we started talking about widgetized sidebars because it used to just put HTML codes in the sidebars. Somebody said well, we could put this custom functionality in there and so then they came up with the idea and started putting widgets in sidebars. Then this concept of sidebar became synonymous with what is really now just a widget area.

So for beginners, calling it widgets is a little confusing because they often think this means a single widget. What this really is, is a widget area that you can put widgets in.

Naming the Widget Area

Now, this is one of those cases where the name is really important because whatever name you give this, that’s the name that’s going to show up in your widgets panel. Let’s just drag it into the header for a moment and save that template. If you leave that unnamed and come on over to your widgets panel, you’ll see there’s something here called widgets. If you drag another one over and call it widgets, you’ll have a bunch of them called widgets.

So you want to give this a name, a meaningful name, so that you know which one of these widget areas you’re working in. Because it’s going to go with the name widget area otherwise. Let’s save that now, come back over and refresh this. Now it’s called header widgets.

If you drag a search widget in there and we put the widget in the widget area in the header, the widgets box ends up having a result in the widgets panel. The widgets box can carry as many widgets as you drag into it and you drag those widgets into the widgets box inside the widgets panel.

Core Content Boxes

Then we come to this question of core content in Thesis 2.1. We’ve talked about containers and we’ve talked about placeholders now we’re going to talk about content. Core content boxes primarily are text box and the attribution box.

Text Box

So, if I create a new text box here, add it and let’s call it main sidebar bottom text box. We have a choice of tag or of id and class. We’re just going to leave it as it is and hit save. Then we’ll drag it down into the sidebar and then drag the main sidebar bottom text box down below the widgets so you got your sidebar text box and then you’ve got your main sidebar bottom text box.

You could just choose to rename this then. You could call this one, main sidebar top text box. This is one of those places where content comes directly from Thesis. If we come back over here to skin content it’s not coming from something that you’ve entered in your WordPress site. It’s something that’s coming directly from inside of Thesis.

Displays Any HTML or JavaScript

This text box can be used for any kind of HTML or javascript that you may want to use. All you have to do is paste that in here. You can use it to display YouTube videos. You can use it to display a form from AWeber or MailChimp. You can use it to display anything really that requires some kind of straight HTML or straight CSS.

You will have seen me use it for things like header images and many of the videos I’ve demonstrated. It’s essentially an HTML container that allows you to enter HTML which in this case, HTML and javascript.

We’re going to save that one and then we’ll come back over to skin content. Then go to the main sidebar bottom text box and say I’d like french fries with that. Save that, refresh it. I like fish sticks, I’d like French fries with that.

And that’s what the text box does, you add the text box like you would add any other box and it behaves like any other box. That is, it’s not in our blog page because we didn’t add it there. We only added that bottom text box to the front template. It’s not in the category template because we didn’t add it to the category template, it only exists on the Front Page Template.

The Attribution Box

I’ve already shown you the attribution box and it behaves very much the same way except that the attribution box generally speaking, happens down here in the footer. You can actually drag the attribution box anywhere you want it to be. And in that regard the attribution box is very much like a standard text box, except that it’s default content is essentially an advertisement for Thesis 2.1.

0 Comments… add one
0 comments… add one