Good afternoon everybody and welcome to Part 2 of our seminar series on How to Create a Magazine Style Blog Site Using Thesis 2. Today, what we’re going to do is set up our archive templates.
Setting Up and Customizing Archive Templates
As you probably recall from last week, the archive template is a template that will display groups of posts based on some kind of a shared characteristic. The most common archive template that you’re probably familiar with is the category template where all of the posts of the same category are displayed on that page.
We’re going to work on those templates here and one of the things that we’re going to be doing on those templates is customizing them so that each category has its own style. Then next week, we’ll do the same thing with single post templates and we’ll introduce a couple more concepts like that.
Customizing the Front Page Template Based On Existing Design
But today, we’re going to be doing our archive templates. Actually, in the category of archive templates and we’ll begin with our front page.
If you take a look at the home page, you can see he’s got some unique graphics that are related to the home page that are say, different then if we come over here to Babies. You can see that the color of this is different and this has babies on it.
If we come over to the Pregnancy page, the color is different, this is pregnancy. So, we’ve got this condition where we have these colors or these images that want to change and then he’s got a content slider. What it will do is display most recent posts or posts on some kind of a basis and the post image will switch through.
Then he’s got a front page specific menu down here below and he’s got a list of featured posts, those are what we’re going to be creating in our template. You may ask yourself why on earth are you creating in the templates since we’ve already got it here? Well, because we don’t really already have it here.
Consolidate Posts, Show Post Excerpts, Text and Post Image Automatically
If we come take a look at the page, it’s rotator is inserted with a shortcode directly inside of the content, the same thing is true with this set of links that looks like a menu and then, also the same thing is true for each of these posts.
Now really, what you want is this page to automatically populate this information, you don’t want to have to type this or in some way, have to customize this every time you create a new post. You want these posts to show up here automatically because this is really what WordPress does exceptionally well.
It will consolidate posts, show post excerpts and text and post image and that’s what we’re going to be doing automatically rather than manually having to create this page every time we wanted to update it or every time we edit a post.
We are however going to continue to use this page as a our guide so we’ll go back over to the page here because this is what we’re going to try to create. But now, what we’re going to do is create it not inside of the page content itself but we’re going to do it so that it happens automatically.
Review Existing Front Page Template
We’re going to start off with this template and in the Thesis Skin Editor, we come over here to the front page template. The way he has this organized is, he’s got a wrapper that produces the page shadow. Open up this, see we’ve got this nice light page shadow that goes down to the side and it’s got a wrapper that creates that.
Then he’s got a wrapper that creates the page and that’s this page background and then inside the page background, he’s got a header, the main container and the footer.
If you look at the header, he’s got 3 rows in the header. Row 1 has this, the Spanish, Login and Register pieces. Row 2 has this graphic, so it’s got the ad and it’s got their call to action. Row 3 has this menu with the search in it and that’s the header. And below that is the container.
We’ll just close up header area, look inside of container and he’s got this thing called Header Row 4. Inside of Header Row 4, he’s got these two columns, he’s got Header Row 4-Home Col 2 and Header Row 4-Home Col 1 as individual columns on the site.
These are actually widgets so you can see the name of the widget is Header Row 4 and then Home Col 1. Actually, that’s how he’s originally set all his templates up so that the way in which he has different images on different templates is by using a text widget and inside the text widget, putting the image. And he’s got all these sidebars.
If we come over and take a look at the widgets panel in the babyofcolor, it’s got Widgets 1 and Widgets 2 and then it’s got all of these header rows, Header Row 4-Toddlers Col 1 and 2, Pregnancy Col 1 and 2, Home Col 1 and 2.
There are all of these different sidebars that he has to manage and he’s got all of those specifically because he wants those images to be different. So what we’re going to do is to get rid of these sidebars and we’re going to embed this stuff directly inside of the template itself rather than having to continue to use and manage a whole bunch of different widget areas.
If we take a look at Home Col 1, he’s got a text widget in here with this one image in it. So Home Col 1, I think that’s this one here actually. No, it’s column 2 so column 1 is the one on the left and column 2 is the one on the right.