Build Your Own Business Website header image

Example #1 – Modify the Archive Post Box

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.

Up until this point we have been looking at everything you need to know in order to effectively customize your templates in Thesis 2.3. Now you have a good overview of how to use the Skin Editor, how templates relate to web pages and how boxes work in templates.

My first example of really making significant modification to the template using these boxes is going to be to modify the Archive post box. We’re going to come over to the Archive template and look at the post box. And we’re also going to look at what it looks like on the website before we make any changes.

Links in Skin Display and Skin Content

First it looks like we need to go back to the editor and turn on our category display in Skin Content.

Chris: Quick note about this Skin Content display thing. It is kind of frustrating because display options are a thing and then I kind of had to name it Skin Content as well because it gives an indication about what you can do there.

But the two are presented on the same page because if you deselect something in the Skin Display options that also has a corresponding Skin Content option, then we no longer want that option to appear. Because that element is no longer displaying on your site.

So there is a relationship between the two and I feel like if they are broken apart into different pages in the interface then that linkage is maybe lost but it may not be understood anyway. I don’t know what the right answer there is. It still feels a little bit confusing.

Review Typical Archive Page

Rick: Yes, but once you understand it, you’re set. Let’s go back to the website and over to pastries. So this is what a typical Archive template looks like. You’ve got the title, the data about the blog post, you’ve got the number of comments and then it goes on down to the next one.

Customizing the Post Box Options

What we’re going to do with this is instead of that is we’re going to add an excerpt and a featured image to it. The first thing to do is come down to our Archive post box and open the tray.

Add Featured Image and Excerpt

We’re going to come down here to the wp featured image and click on it to add it. The same thing is true for the excerpt, click on it to add it. Then we’re going to drag the number of comments down to below the excerpt. Let’s hide the tray.

For the featured image options we have the choice of size and, in this case, we are going to choose the thumbnail size. We have a choice of alignment and for that we’ll choose left with text wrap. And then we want to link that to the post.

Remove the Avatar and Edit Link

We don’t really care about the avatar so I’m just going to get rid of it by dropping it there. I don’t like the edit link so I’m going to take it out and drop it up here.

I’m going to Shift+Drag author avatar into “Drop orange boxes here to hide them.”. The same thing for edit link to hide it.

I want categories back in so I’m going add that to it. Then I’m going to Shift+Drag categories up into byline and then move it down.

Edit Options in the Boxes

Let’s start with the headline. It’s an H2 tag and it’s linked to the article page which is what I want. Then go to the author. I actually want to link to an author archive page but I will add a no follow link to that. And I’m going to change the intro text to “written by”.

Then on the date, I’m going to leave it alone. If you didn’t want the date to show up but you still want the schema to show up which is almost always the case. You want the schema to show the date. In that case you would put the date in and check this button.

Then under categories we’ll just add “Posted In: “. And we’ve got a comma for a separator between them. I’ll leave that there and I’ll add no follow links to the category links.

Let’s look at the excerpt options next. I’ll use the Thesis enhanced excerpt. It strips out the non text stuff. So it leaves only a paragraph of text in it rather than say having an improperly formatted list show up. It strips that out and just goes down to a paragraph text.

We’ll show ellipses. We’ll add a Read More link and we’ll leave Read More alone for the moment. We can look and see if there is some rationale for changing it later.

All of the changes we have just made have been inside the post box. Now when we save the template and come back over and reload our pastries page, we’ve got the title of the post, we’ve got this little bit of meta stuff down here, and we’ve got the excerpt sitting next to our image. And we’ve got a read more link that takes us off to the post. And then we have the comments button below.

Close the Skin Editor if Editing in Skin Content

Just a reminder that you can’t leave your Skin Editor open if you are going to edit this stuff in Skin Content.

Chris: I created this mode to do that because it seems convenient to have your options on the Skin Editor. And I really wanted that for me when I was doing development work in building the software. It turns out I really have kind of started to abhor working that way. I actually use the Skin Content options the way that I intended them to be used for the average user because of that situation you just described right there.

Rick: Let’s come back over here to categories and we are going to choose span instead of div so that it stacks up beside it. Let’s try that. Go back to the site and flush the cache. Nope, didn’t work. Let’s take a look. There’s another div post cats.

Chris: That’s for the whole byline item. It’s for the actual separation for each category. That’s what that HTML option controlled. What kind of display were you looking to have?

Rick: I wanted to get it up there beside the other one. I just put it in first then because all the rest of them are spans. So I do that and save the template. Although I might have to float that left.

Chris: I was going to say you’re going to have to float it left.

Rick: Actually it works. I wanted it all on one line and it’s there now. I need to get rid of uncategorized but you can see it restructured that way.

0 Comments… add one
0 comments… add one

Leave a Comment