Build Your Own Business Website header image

Example #3 – Add a Grid of Recent Posts on the Front Page

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

The next thing we are going to do in this Beginner’s Guide to the Thesis 2.3 Skin Editor is add a grid a grid of recent posts to the Front page. The first thing I want to do with this Front page is make it full width.

Copy in Full Page Template

The easiest way to make the Front page full width is to copy the Full Page template into it. Open up the template menu by clicking on this and then we have this “Copy from template” option. Choose that, select a template. It’ll be the Full Page template. Copy that and now it’s the full page template.

Rebuild Header

You’ll note that our header isn’t there any longer. So we are going to have to rebuild our header. But that will be quick. Header columns. Header right column. Shift drag the nav menu into the right column. Shift drag the right column into header columns. Header columns into container. And header into header columns. So now we’ve got the header here. Let’s save the template.

Remove Unwanted Elements

Let’s take a look on the website. You can see we now have the full width template on this page. The first thing we are going to do with this is in headline area we’re going to get rid of the byline entirely on the front page. I’ll shift drag that up and drop it.

I’m going to get rid of the author avatar. I’ll shift drag that into the post box and then drag it down and drop it into the “drop orange boxes here to hide them in the tray”. I’m not using the WP featured image or the Thesis post image for this so I’ll drop those out also. I also don’t want page comments. I’ll shift drag that up and drop that out and save the template.

Add New Column Section

Now that I’m at that point I’m going to add another column section. So, we’re going to create one. We started off with the columns wrappers. So we’re going to create an HTML container and we’ll call it “three columns”. This way we can reuse it another place.

So my class is going to be columns. I’m going to add another class columns three. Leave it as a div and I’m going to shift drag that up into the container. Then drag it down and drop it below the content column.

Use Query Box to Choose Posts to Show

Now we are going to play with the most powerful box in Thesis, the query box. The query box is similar to the post box except you get to decide what posts get displayed there. And it is that ability that produces things like this page here. This page is created using a query box.

Examples of Query Box Usage

Let’s go look at another site. These are all query boxes. This little slider is actually a query box. This list of recent posts, that’s a query box. If you go to a page here, this looks like an optin form, right? But it’s actually a query box delivering an optin form like content and it’s doing that based on that fact that we are looking at interpreting.

This is a query box that is going to show the interpreting optin form because we are looking at an interpreting page. If we were looking at a translation page, which is exactly the same template, now it’s showing a translation optin. That’s because it is using a query box to deliver what looks like an optin form but is actually the content of a post type that we have in there.

If look at the French language page here. This is actually produced by using a query box. And it’s bringing in content from our landing page. It brings in this two columns of landing page content into this page. And then when we get down here towards the bottom, the FAQ is created by a query box.

This set of testimonials is also a query box. You come over and look at it, this is query box showing other related testimonials.

So query boxes are incredibly powerful tools for displaying content. You write the content one time and you can display it all over the site in different ways in different configurations and different places on the site using the query box.

Create the Grid

We are going to call this the “front recent posts”. We’re going to have six posts in this grid in three columns. There will be two rows with three columns each.

We’ll use that 1/3 style column that we created when we made the two column header. And add that class to this, one third. We’ll come down here and give it a blog posting schema. Let’s set up the options now.

Set the Options

You can choose what post types you want to show. You can choose posts or pages. These others are not legitimate post types so ignore those. You could choose a custom post type if you had one created. We don’t currently.

If I choose pages, this will let me select an individual page to show. If I choose posts, then I can choose the kind of query I want. So I can choose recent posts which will just take the most recent posts.

I can choose categories which at that point would allow me to choose the category that I wanted to display. You could choose tags if there were any tags. You could choose other taxonomy types.

If you search for this on my site you’ll see I did a seminar on how to show featured posts in a query box. You’d create a custom taxonomy for featured posts and then you just assign that featured post status to it. Or you could use tags and just add the tag featured post. Either way works.

We’re are going to choose recent posts for our purposes. Now here’s the number of posts we want to show up. I’ll choose 6. Then we have advanced query options. You could decide that you only wanted to show posts by one of these users. You can choose the order. You can choose order by.

One of the things I love about this is menu order. WordPress doesn’t come automatically with menu order added to posts but in my skins I add it so that you can pick posts specifically and decide their order if you wish.

You can choose an offset. We’re going to use offset one because I don’t like that post that came with the site. So we’ll offset the first post that show.

What is Exclude from Main Loop?

You can do other things with this as well. I say that because you could choose to show sticky posts at the top of this if you wanted. Or you could show them in their natural position. And this one, exclude from main loop, I think only works on the home page. Is that right, Chris?

Chris: Yes, on Home page and Archive pages. Anything that loops more than one post.

Rick: So if it shows up here then it won’t show up in the main loop, essentially.

Chris: Yes. So an example of when you would want to do that is let’s say instead of a recent post widget on the right side maybe you’ve got popular posts. But let’s say two of the five posts on your front page are those as well. Maybe you don’t want all those redundant links. It’s for people who are really maintaining tight editorial control.

Add Elements to the Grid of Posts

Rick: Okay. We’ve got those options set up so now let’s drag it over to our three columns section. Now let’s decide what we are going to show. Because remember this is like a post box. This has all of these various things that you can show.

I don’t want to show the edit link so I’ll drop that out. I’m not going to show the author so I’ll drop that out. I definitely want the headline and the excerpt and I want the WP featured image. I’m going to click those up there. Drag it to the top.

And then in this case I don’t want a full sized image it’s too big but I will take the medium image. I better check my image sizes to make sure medium is right. Max width 320×102. Actually, I’m going to go with the large size.

If you use a plugin to create your own custom image sizes, those image sizes will show up here.

Let’s center it with no text wrap. We’re going to link the image to the post. Our headline in this case is going to be an h2 tag and we’re going to link it to the post. Our excerpt we won’t use. We won’t show ellipses but we’ll add the read more. And in this case we’ll say “learn more”. Now let’s save the template.

Adjust the Display of the Posts

Come back over to the website. Flush the cache and now you have a grid of six posts showing up here. With a minor exception they are all sitting nicely side by side. The minor exception is there because each one of these elements is not the same height.

And because they are all floating this one floats up here and then bumps up against the edge of this one instead of coming over. So what we are going to do is make this fourth element clear the float on the desktop view.

Let’s go back to our Custom CSS. In the desktop view which is this one here, we are going to say one third query box. Inspect that. Yes, query box dot one third. Dot query underscore box dot one hyphen third. And then we’re going to use the nth of type, pseudo class. Then say we want the fourth one. Then we are going to clear colon both. That’s it. I think that’s all we need to do.

We’re going to make that one clear. Now you have it. They’ve all cleared. Then let’s just give ourselves some extra padding, in this in particular. That is h2 headline. Then we’re going to say query box one third. I think we’ll do that up here so it’s the same everywhere. Query box one third dot headline.

And we’ll say padding and the top padding is a half. Then the side padding will be zero. The bottom padding will be single. And then zero. Save the Custom CSS.

Let’s look at it in the responsinator. Start up here at the top and everything is stacked nicely. We’ll reduce the padding on the sides a bit. But on this size phone the image expands to fill the space rather than staying small. When we get down to the bigger size I don’t really think we want this to be that large. So, we’re going to want to change the media query so that instead of being 100% wide, it’s 50% wide.

Go back to custom CSS. In the larger mobile view we have header one third and header two thirds, width of 100%. Remember we called it “columns three” so here we’ll add columns underscore three dot one third. Then we’ll say width colon 50 percent. That should make those 50%.

I know that we are going to want to do exactly the same thing here when we do this. So I’m going to copy this. It’s not going to be the fourth one though. It’s going to be the odd ones. As you know nth of type does allow you to say even or odd. So in this case we are going to clear the odd ones so that they stack up nicely in mobile.

While we are at it, in this view on the small phone we are going to take those columns one third and we are going to make them 100% wide. Because we made them 50% wide here. That’s way too small on this so we need to take them back up to 100.

Okay we’ve got an error here. We’re missing a colon.

Chris: And since you are doing top and bottom you just need xs half and zero, you don’t need the second set.

Rick: Well, this is single for the bottom.

Chris: Okay, it’s not redundant.

Rick: Let’s look at the site again. Flush the cache. We now have decent spacing. We have them side by side in this case and they all stack nicely even though they aren’t the same height. That’s the same case for this. And then we get down to our smaller screens. It stays on the smaller screens but on this screen it goes down to 50%.

The only other thing I wanted to do with this is knock this margin down to half on the small screen. So, we’ll do that. On the small screen take this down here. I want to change the padding in the column not the headline. I’ve got everything I need for that, columns three, one third, width 100 percent and then padding. I still want the single at top and bottom but I want the half at side to side.

Let’s save our custom CSS and move on to the next example, adding a widgetized footer.

0 Comments… add one
0 comments… add one

Leave a Comment