Build Your Own Business Website header image

Create a Magazine Style Blog Site with Thesis 2 – Part 20 – Create and Customize Custom Category Templates

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.

Good afternoon everybody and welcome to this third and final session in our Case Study on How to Create a Magazine Style Blog Site Using Thesis 2. In the previous weeks, we’ve spent a bunch of time here on babyofcolor.net employing WordPress’ ability to display groups of posts based on categories and based on other kinds of information here. Today, what we’re going to do is work primarily on the single posts template.

Review of Where We Are in the Process

Now, remember that each of our different primary categories has different pieces here at the top, it has a different feature box with the different menu and that sort of thing going on. We’re going to be replicating that with various different posts.

Last week, we got all the way here to this Toddlers Category Archive Page and it has the Toddlers colors up here at the top and it’s got the Toddlers slider then it’s got the posts that have been categorized as fitting under the Toddlers section.

Before we go too much further today, we’re going to do the same thing with Kids and with Teens and as you may recall, that means what we have to do is create additional custom templates. So we’re going to come on back over here to our site and open the site up in the Skin Editor. Then we’re going to go to Custom Templates where we created the Toddler Archive Template.

How to Copy Content and Templates

Now, we’re going to create the Kids Archive Template. Well, this is the way you copy content and templates because right now it’s blank, right? So we’re going to click on the template again and then say now that we’ve got Kids Archive, we’re going to copy from the Toddler Archive.

We’re going to do that one more time, we’re going to create one more of these and this is going to be the Teens Archive and in the Teens Archive, we’re going to copy the Toddlers Archive as well.

We’ll go ahead and make the same customization changes we did to the Toddlers Archive to these. If we come back and review them for just a second, inside of our Header Row 4, we have the Column 2 which has the Toddler Header Image and Tagline and the other Toddler Header Image so we’ve got these two header images and a tagline inside of Header Row 4.

Inside of our Feature Box, we have the Toddler Featured Posts Slider and we have the Toddler Menu and then everything else is just going to come across exactly the same. So we’re going to make these changes to the other two menus.

We come on down here to Kids Archive and actually, I think we’re going to need to open up the Kids page, if not the Kids page we’re going to open up the Widgets page because right now, we have a whole bunch of widgets. We’ve got the Toddlers widgets, Pregnancy, Planning, Babies, Kids, here we go.

Create a Text Box

So Kids Column 1 has this image in it. So we go over to Header Row 4, Kids Column 1, we need to create a new text box here so this would be Kids Header 1 and that image was this. Remember we’re going to disable the automatic p tags and we want no HTML wrapper and then we’ll create another one of those text boxes. We’ll call it Kids Header 2, add that box, we’re just going to shift drag this up into Header 1. So Kids Header 1 drops in there and Toddler Header 1 pulls out although I think I put this in the wrong one, this is Kids Header 2 so we’ll bring that up to Column 2, drag Toddler Header 2 out and then come all the way back down to Kids Header 1.

Great, okay do that again. So Header Row 4, Kids Header 1, I’m on the wrong template. Okay, Kids Archive, not sure how I did that but open Header Row 4, 2 and 1 and we’re going to scroll down here, grab Kids Header 2 and drop it in Column 2 and shift drag that away. Then we’re going to do the same thing with Kids Header 1 and shift drag Toddler Header 1 out.

Add Execute Shortcodes

Now we can save that template. Then we open up our Feature Box so we need to change out the shortcode and we need to change out the menu. So we’re going to add a new execute shortcodes and this would be Kids Slider. We’re going to drag the Kids Slider into the Feature Box and we’re going to add a Kids Menu.

Another Feature Box, we’ll pick the Kids Menu of course, this is a slider pardon me. Pick the Kids Menu, we’ll drag the Toddler Menu out and we’ll drag the Toddler Featured Post Slider out and we’ll save the template and then while we’re over here, we may as well, Kids Column 1, Kids Column 2, we better grab that image over here so we go to Kids Header 2 and drop that in without p tags and with no HTML wrapper.

Add Shortcode for the Slider

The other thing we need is the shortcode for the slider so I’m going to go over here to pages because remember this was automatically added directly into a straight page so we’re looking for Kids now. Kids and go to the text and grab this easyrotator, come back over to the Skin Editor, go down to the Kids Slider and post that shortcode and then save our template. I think we are going to be in great shape here let’s see, let’s go to Kids. Not quite and it’s not quite because we haven’t assigned that template to the Kids category.

Assign Custom Templates to the Categories

If we’re back over here and we go look at our categories and now that we’re in our categories, we are looking for Kids and actually, I’m just going to edit each of these so open link in new tab, open link in new tab because we’re going to assign this custom template to each of these categories and then we’ll just scroll down to the bottom and we’re going to pick Kids Archive, update, scroll down to the bottom, Kids Archive, update, scroll down to the bottom.

This is one of the most powerful features of Thesis 2, is this ability to assign any kind of custom template to any kind of page including individual archive pages. Let’s see, this one should be the Kids one now, let’s see what happens. Okay, there we go. Remember that we also had to change the class of the menu from the standard class to the secondary menu and then let’s just make sure that we know which one it is though.

Change the Menu Class

I think it is just secondary menu, that’s what it is so we change that menu class, Skin Editor, we look at the menu and we give it a class of secondary_menu okay. So, we’re going to do that one more time now and we’re going to do that with the Teens so we’ve got posts showing up there correctly although the Kids Header 1 doesn’t seem to be showing there right yet so maybe let’s just look at that Kids Header 1, I lost that.

We go back over here to widgets, come back down here to Kids Row Column 1, copy that, back over to the Skin Editor, paste it so now we have Kids set up exactly the way we want it. Let’s do this one more time for Teens, note that the way Teens is set up here is it’s using the default that we set up last week, the default template so we’re going to switch over to the Teens template and we’re going to start that by coming over to Teens Archive and opening up Header Row 4 and then we’re going to create those two new text boxes and then a new menu.

First, text box is going to be Teens Header 1, second text box will be Teens Header 2. So Teens Header 2 is going to go into Column 2, Teens Header 1 will go into Column 1, Toddlers Header 1 is going to be dropped out and Toddler Header 2 is going to be dropped out. Actually, what we’re going to do is get rid of this, we’re going to delete that one and delete that one and then we’re looking for Teens. Teens Column 1, no p tags, no HTML wrapper. Column 2, no p tags, no HTML wrapper and then we do need to do a menu which is in Feature Box, Teens Menu.

This time we’re going to give it a class of secondary_menu and then we need the slider for that so execute shortcodes Teens Slider then we’re going to drag this stuff out and save the template. Let’s delete that widget and we’re going to come back to posts and categories and assign the Teens categories to that template so here we go, pick the custom template and we should be in pretty good shape. Let’s see what it looks like. Okay, almost, we just need that slider.

We’ll come back over to pages and find the page that has that slider. There’s the slider, we’ll put that in the shortcode, save the template, okay there we go so we now have three templates that are set up so that they are automatically loaded when a post is made. If we come over and look at the Planning page, this one is yet to be done, this should be an Archive Template but right now, it’s just got a bunch of static content.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment