Build Your Own Business Website header image

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.

Lesson 8 – Part 2 – Create the Archive Template

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

The reason why we did the Post Navigation first on the Home Template is because our Archive Template is going to be a copy of our home template. Let’s go look at what our archive looks like right now; it’s blank. We haven’t done anything at all, we haven’t included anything in our archive template yet. When we begin editing here we want to make sure that we’re working in the archive template and not the category template.

Copy the Home Template into the Archive Template

It’s going to be really easy for us to slip in and edit the wrong template so we’re going to try to concentrate on editing only the archive template. Let’s come back over here to HTML and go to archive and you can see the archive template is blank. What we’re going to do is copy the home template into the archive template.

We’ll go ahead and save that template and now if we come over to one of the archives like this tag archive, we’ve got it laid out correctly. Well, pardon me, we’re still missing some Previous Post, Next Post links here but besides that, we are in pretty good shape.

Add Archive Title to the Top of Each Archive Page

The reason why we’re missing those is because we don’t have any additional posts to view so anyway, we go back to working with the Architect category here. We want to make sure that we don’t have this say “Blog” on the top of each of our archive pages. What we want is the name of the archive page to show up here rather than “Blog” so that’s the first thing we’re going to do, is add our archive title to this.

Now, if we come back over to Archive and take a look at the Content Area, in Main Content we’ve got this thing called Faux Headline with a class of faux_headline so we’re going to replicate that with our archive title here.

Add Archive Title Wrapper

The first thing to do is shift this off and then we’re going to actually have to create a wrapper, container and it’s going to be Archive Title Wrapper. We’ll drag it up into the Main Content and then the Archive Title Wrapper is going to have that faux_headline class and then what we’re going to do is drag our Archive Title into that wrapper.

Now, there’s no way for us to assign a class to Archive Title, that’s why we have to wrap it up in a tag here because we want the styling of that Faux Title to be passed on to this. Let’s just take a look at it now, let’s save our template and come over here. Let’s refresh this then.

Style the Faux Headline

Now, we have this big style that we have to deal with because in our Faux Title, this was a p tag but now, I think it’s an h1 tag. It is, it’s an h1 class=”archive_title” so we have to change this up, we have to add some Custom CSS to that so we’re going to come over to our Faux Headline and we’re going to put a comma there and then h1.archive_title. We also want the .faux_headline in front of it. When I began teaching this class, this was something that didn’t work but now it does.

Now, you can stack CSS Selectors like this. We’ve got faux_headline so this style is going to apply to the Faux Headline and it’s also going to apply to the faux_headline, h1.archive_title. So we save that.

What happened here is it’s seeing faux_headline there twice so instead of that, what we want to do is say, .faux_headline p because that’s what the tag is in the regular one, .faux_headline p. And then we’ve got .faux_headline, h1.archive_title and that should do the job. Let’s just see, there we go, perfect, Design Ideas. If we look at the tag, perfect.

Add Archive Content to the Template

That aspect of our archive page is done but something that we’re missing here is our archive content. Let’s go back to our Articles and go to Working With an Architect. We’ve got the Archive Title but this category actually happens to have that thing that Thesis creates called “Archive Content”.

So if we come over here and just edit the category for a moment, we’ve got all this additional archive content that we want to show up there as well so we need to add that archive content to our template.

We do that under HTML, come back over to Archive and then open up Content Area, we’ve got our Archive Title Wrapper and what we’re going to do now is take our Archive Content. I think I can give it a class so we’re going to take our Archive Content, drop it into Main Content, drag it below Archive Title but I’m going to give it a class where it will borrow text styles.

I’m going to give it the class of post_box so it borrows the text style from the post box definition below it. That way, we don’t have to add any active styling to this, it’ll just use the same style as the post box.

Add Introductory Content to the Archive Page

If we do that and hit save and come back over, let’s reload this. Now, we have our introductory text, “This is some introductory content for the ” Working With an Architect” category”, we’ve got that going on and then it stops.

What I really want to do though is to add this dashed line to this so that it’s got the title up here then it’s got the content and it’s got that dotted line and then it has the post under that. So let’s come over to our CSS and come to our post, I’m going to actually go to our Typical Page Post Format. The reason I’m doing this here is because we used this CSS Selector .post_box and as it turns out we’ve got something very close to what I want to do here for the h1.headline.

I’m just going to copy this and it’s not going to be h1.headline though, it’s going to be archive_content.post_box and padding top is fine, border is fine, margin bottom is fine, dotted is fine, I think that’s it. Let’s go ahead and hit save to that and let’s take a look at it, let’s reload.

Something didn’t happen quite right, we’ve got that Typical Post Format, okay, it’s missing the dot (.), .archive_content.post_box, there we go. Now, we’ve got a nice dotted line, we’ve got the space and we’ve got our archive template all set up.

If we move on to a different archive like a tag archive, if there isn’t any extra content it’s not going to show up here. That stuff only shows up if there’s some introductory content, otherwise, it doesn’t exist at all.

Save $200 on Membership Now!

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

Leave a Comment