Build Your Own Business Website header image

Custom Front Page Loop that Displays One Post from Each Category

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.

Part 1 – Is Thesis the Right Tool for the Job?

This is the first in a series on creating a custom home page that will display the first post from each category. In this first part we discuss whether Thesis is the right theme to use for this and why. We also discuss the various steps necessary to accomplish her desired goal.

Video Transcript

Rick: Okay so let’s see, now that Lauraine is back… okay I just unmuted your microphone Lauraine and I have your slides up here. And I understand what you want to do is you want to create a homepage that looks like this… essentially, what you have is you have teasers, one per category, the most recent teaser per category with the image coming from the latest post in that category and with a name of the category being here. So you’re not going to… on the first blush, if you don’t hover over anything, all you see is images and category names. And then when you hover over it then this thing pops up which gives the name of the post and perhaps, a little bit of excerpt. Is that a fair description of what you’re looking for?

Lauraine: Perfect. The only thing that’s missing is that the categories underneath the pictures could be done in CSS prior. I mean, they don’t have to come up. I thought that that could be in before the actual loop and everything. That’s one thing…

Rick: Well, it could be but I don’t think it’s… I mean, I think that’s probably the hard way to do.

Lauraine: Oh okay.

Rick: What we’re going to talk about today is just to create a single loop that will produce this entire thing in one loop. The combination of WordPress and PHP gives us all the tools we need in order to incorporate this into a nice… really, it’s a relatively simple loop. In that regard, not very much code is necessary. You know, you asked the question initially, “Is Thesis the right theme for this task?” Well, I mean I personally wouldn’t use any other theme for this task because I think this task is quite simple in Thesis. Now, if there was a theme that already had this functionality created out of the box and had all the benefits of Thesis then I would say, sure, go ahead and use that theme. But in terms of what’s the best theme to customize to get to this the only themes I know of that would work for customizing like this would either be Thematic, Hybrid, Thesis, Genesis you know, maybe Builder, maybe Headway. I don’t know about those. But…

Lauraine: I was wondering if I should just go with a blank theme. You know, like with WP framework I think is one of those which is blank and you can start from scratch.

Rick: Yeah, I wouldn’t… I personally wouldn’t start there. If you didn’t want to use Thesis, I personally would start with Hybrid which is also a blank-ish theme that has a lot of similarities to Thesis except that it uses the traditional WordPress template system which is what makes it slower than Thesis. So I mean, I think this is going to be very easy to do in Thesis and I don’t think it would be any easier to do in any of the other theme frameworks. I’m not familiar with the framework you’re referring to.

Lauraine: It’s very basic.

Rick: Yeah, before I started with Thesis, I used Thematic which was the original theme framework and then Hybrid. But then when I started working with Thesis, it just didn’t make any sense to use either of those anymore because this is so much simpler to accomplish what I was after. So Thesis is going to be a good choice for this,.

Lauraine: Okay good, I’m glad.

Rick: So the other thing is that you want to use this jQuery plugin, jCapSlide. Are you familiar with how to incorporate a jQuery plugin into WordPress?

Lauraine: Absolutely not. I did it quickly on an HTML CSS site the other day and it would give us like… what’s going to happen with WordPress and Thesis, I have no idea.

Rick: Okay well so that’s another piece of the equation and you know, I’ve been looking for a good example to each how to incorporate a standard jQuery plugin into you know, customize Thesis page. And this is a great example for it although it’s probably more than an hour of conversation. So we would have to come back to how you would structure this.

Lauraine: Oh I love it.

Rick: But we can certainly take on part of it here today and then we’ll just you know, work on more of it later. Okay?

Lauraine: Okay, wonderful. Thank you.

Rick: So then… so we’re going to start off. I created a demonstration site for this called Laurraine.byobtutorial.com and what I have on this demonstration site is a whole bunch of posts that are categorized – Bananas, Cherries…

Lauraine: I recognize them.

Rick: Right. So I have these categories and what we’re going to do is we’re going to take this site and we’re going to make it into what you are looking for. Okay and so that way, you just kind of follow on and we can work on it as we work our way through this. And it’s clean so I don’t have any other code in there that can affect the outcome of this.

Lauraine: First, unhook everything on this? You make it like a minimalist page before?

Rick: I have not done that yet, no. And I’m not even sure that that’s what you want to do but it could be. It could be what you want to do. I mean, certainly, you could… I mean, you’re going to want to get rid of the footer but if I look at your page, this page has a header right?

Lauraine: Yes.

Rick: So you may as well just reconfigure the header rather than throwing it out entirely. For example, I mean, you could choose to do this in you know, a font, right? So this text could be its own rather than be an image, could be a font. And is there really going to be a shopping cart on this?

Lauraine: No, no. It’s going to be… just say e-shopping, I think. Contact e-shop.

Rick: Okay and so, you’ve got a couple of links up there with an icon. You’ve got your name with underline, you’ve got a couple of social icons search bar and I’m presuming that this icon or this image… the Betty Boop image is not going to show up at every page. Is that right? Or is it?

Lauraine: No, I mean, it’s going to be like a little character and she’s going to have a role to play around on the site. So she’s going to introduce her sort of on that page. But she’s not going to be there because she’s going to be different every week.

Rick: Okay and so your heading probably still remains this thing right here, right?

Lauraine: Yes.

Rick: So then we don’t need to get rid of the header. All we just need to do is we just need to pick the parts of it that we want and that’s easy. This is the more interesting part.  Obviously, you’re familiar with CSS and HTML so you probably can make this into a sprite pretty easily. And if you need help with that, we can talk about those things. But these should shake out fairly simply. I do have a couple of tutorials on how to both customize the search bar and to put it in the header. And I’m guessing this is some kind of an advertisement.

Lauraine: Yes…

Rick: And so, I mean, blocking this out on the homepage might be a little bit interesting but conceptually, each piece of it’s fairly simple.

0 Comments… add one
0 comments… add one

Leave a Comment