Build Your Own Business Website header image

How to Create a Custom Template that Displays a Grid of Thumbnails for a Category Page

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

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.

In this session we demonstrate how to create a custom template that displays a grid of thumbnails for category page and show how to style that template. We also show how to create a product wrap for the Carta Extender Border Styles Package.

Video Transcript

Actually, the next part of this is going to look really familiar except now, what you’re going to do is you’re going to create a custom template. So you’re going to add a new custom template and we’ll call this Products Archive and the Products Archive template, let’s do it as an archive so we’re going to copy from the archive template so it’s now exactly the same as the archive template except what we’re going to do here is in this post box, we’re going to create a new post box called Products Post Box.

It’s taking a little while to create that or did I fail to create it? There it is, it did take a while so I’m just going to drag this up here to the WP Loop. I’m going to drag Home Post Box out and then under Products Post Box, we’re going to do exactly the same thing really. We’re going to drag those things out of there and then we’re going to do something different which is, we’re going to wrap our headline and our thumbnail image and we could just take our category image here for grins in this case but we’re going wrap these two things in another div or in another container.

So we’re going to create a plain old vanilla container and we’re just going to call this Product Wrap and shift drag that up into place and drop it into the post box and then drop Products up into post box and category image up into post box. In Product Wrap, we’re going to give it a class of product_wrap.

Now, we’ve created this Products Archive page, this custom template, now what we have to do is apply this custom template to a specific category. We’re going to come in here and go into our dashboard and go to Posts and Categories and Thesis gives you this opportunity here in the Categories to choose a custom template so now we’re going to choose Products Archive.

So we’re going to edit the Bananas category, go down to the custom template and say Products Archive and then we’re going down to the Cherries and say, Products Archive and then we’re just going to view the Cherries page. Right now, what’s happening is, it’s showing the title and the image or the image and the title. So what we need to do now is create a style for this product wrap and I’m going to copy that, <div.

Now, in Carta, there is another special package and that’s special package is called Extended Border Styles package. We’re going to go ahead and add that package, we’re going to give it that selector of .product_wrap, the reference of product_wrap, we’ll call Product Wrap and then we’re going to make it float to the left, we’ll give it a width of say, 210 pixels, we won’t give it a height and we’ll just save that and then come down here and just add that &product_wrap.

Now, if I go to my Bananas product here, it doesn’t appear to have worked yet. Let’s see, save the CSS, Cherries. I failed to do something right here, product_wrap and I’m looking at the Skin Editor here. I’ve got &product_wrap and I look here, I’ve got product_wrap, my CSS Selector is .product_wrap, try that one more time. Something is not behaving correctly, what is not behaving?

Let’s see, let’s look for product_wrap in our CSS file. Okay, so it’s not making its way into the CSS file which suggests I’ve just done something wrong here, what did I do wrong? I put a dollar sign in front of product_wrap? No. CSS Selector, .product_wrap, this really should be doing something. I’m now, fulfilling the definition of insanity by repeating myself. Well, am I on the right spot, Categories? Categories, categories. Crazy.

Carta Extended Border Styles, working here, if I look for style 2 in that same thing, that’s working fine so what is actually happening then with my product_wrap thing? Why isn’t that writing, &product_wrap should be directly above &widgets_typ and directly below &archive_intro in the CSS file so in the CSS file directly below archive intro and directly above regular widget is just not there. You know what, I think it’s happening. I think this is cached, I forgot about that.

This is actually on my server that’s being cached and so we are seeing the cached CSS file, not the existing current CSS file, unfortunately. Let’s just make sure, view page source, view page source. That’s what I get for choosing, let’s see, I don’t see it there but I still think that’s what’s happening here. I still think that this server has server-based caching on it that speeds up BYOBWebsite but because this happens to be on it, we don’t see it.

What happens here is if we look at Product Wrap and we just sort of artificially changed this so that it floats left and then width 210 pixels. Actually, let’s do this in FireFox. I don’t think I have FireFox installed in this computer, so much for that idea. Let’s see, let’s add a new style rule and that’s .product_wrap there we go. Now we’ll say, float: left and we’ll say width: 210px. Okay, now why is that killing?

Float, column, left, that should be working. It’s because of that, I see. So what’s happening is post box is clearing both then, it is post box after is clear: both so what I have to do is deactivate that in this style and so that’s the other thing I would do here is, let’s see. We want to come over to this template actually and we’ll give this template a body class so we come back over to HTML, come over here and we give it a body class of products and then I can use that to get rid of that clear: both so that these things can float side by side.

So now, I’m going to add that style again, .product_wrap, that’s going to be width: 210px and then float: left. The other thing we’re going to do is come to our post box but actually, it’s going to be .products .post_box:after and then it’s going to be clear: none okay. So now you can see these things jump up side by side, right? And I probably want to come back over to my product_wrap here and give a margin-left of say, 10 pixels, maybe I need to make this smaller.

For whatever reason, it’s not letting me do that but you’d end up putting a little bit of margin in here to give yourself some space and to make sure that you’ve got enough room for all of these things and you might end up giving it a little extra height too and maybe the 200 pixel wide is too big for this kind of a grid in this context but that’s what you would do, right? You would end up creating a custom template with a custom post box and then you’re going to give that post_wrap some style. Obviously, you’re going to have to restyle the heading and stuff like that too. Does that give you a place to start from?

Member: Oh yes, definitely. Thank you so much, I appreciate it.

Rick: You’re welcome.

0 Comments… add one

Save $200 on Membership Now!

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

Leave a Comment