Build Your Own Business Website header image

Create a Magazine Style Blog Site with Thesis 2 – Part 14 – Setup Featured Posts Query Box

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.

We’re now working on content here in the front page template that wants to be automatically generated. I’m going to start off here by replacing these with the query box and what this is going to do is this is going to show featured posts.

Featured Posts

Actually, the first thing we’re going to do is come along here and use tags to specify which posts should be featured so I’m going to have featured as a tag and we’ll add it. Then I’m going to come over here to posts and I’m going to take this one and make it featured.

We’re going to take this one and make it featured and we’ll take Fine Arts & Crafts and make it featured and then 6 Min Workout and make it featured and hit that green arrow there so it’ll be saved so now these are featured.

If you’re just coming into this, I demonstrated how to use this plugin last week for easily managing lots of posts like this and so we have a bunch of posts here that are tag as featured.

Configure Featured Posts Query Box

Now, what we’re going to do is come back over to our skin editor and to the front page. Above this WP Loop here, we’re going to create a query box and we’re just going to call this one Featured Posts.

We’ll shift drag Featured Posts up into place right above WP Loop, so in Column 1 and then down below Feature Box. And we’re going to display posts, that’s the kind of post, we’re going to display tags, we are going to select featured. At the moment, we’ll just say 4, we’ll go ahead and order them by date, ascending and I think that’s probably fine just like that. So that’s the configuration for the Featured Posts.

Now, what we’ll do is open them up and decide what’s going to show up. We don’t care about author so we’ll drop that in the tray. We don’t want edit so we’re going to drop that into the tray.

What we’ve got is a picture, an excerpt, a title and a read more link. So, right now we’ve got our headline and our excerpt and I’m just going to show you what that looks like here right off the bat.

We’ll just save this template, come back over here and here we go. Now this is automatically placed these 4 posts on the page. It hasn’t done it in a way that we want them to and we’re still missing a few things.

Add Post Box Style to the Query Box

The first thing I want to do is come up with a style for this and what that really means is we need to add a post box style to this. Let’s come back over to our CSS and we’re going to create a new post formatting. And we’re going to call this Query Box Post Format and query_box_format and we’ll save that.

We need to figure out how wide is this really, this section here is, I guess I have to measure it. So we want our content to be roughly 375 pixels wide. So we’re going to set that 375 here and leave everything alone for just a moment. But we’re going to save that.

Under our post format, we will add the &query_box_format but we need to come back over here to HTML and see what this really is called because one thing we didn’t set was our HTML class. And if we don’t set a class, what happens is we end up with the class of query_box. That’s okay, we’ll just use that as our class.

So we come back over and close that, go to CSS, come down to our Post Format and it’s actually going to apply to .query_box as our CSS selector so we hit save now and we’re getting something looking a bit better.

The other thing we want to do is have this be that color of blue. And that’s our style attribute and we have that set up as an h1 but that really wants to be an h2. So we’ll come back over to our skin editor and we’re going to write a bit of code here for this. So .query_box and then .headline_area and then color, paste that color in there. Let’s make sure that it’s wrapped in a thing called .headline.

Then if we come over to our package, our headline, I would say the headline should be probably in this case smaller than it is. It looks like it might be 18 pixels but bold. So font weight, bold. I think we’re good with the rest of that so we’re going to hit save, save our CSS. That’s getting a little bit better, maybe it’s a tad too small but let’s see what it looks like after we get an image in here.

Install the BYOB Featured Image Box

Now, what we’re going to be using is a box of mine called the Featured Image Box which is available on the site. We’ll come over here over to Thesis and install that box. In fact, we’re going to install 2 boxes, both the Read More box and the Featured Image box.

So byob_featured_image, we’ll open up that one, add the box and then we’re going to choose one more and that will be the Read More link and then we’re going to activate both of those.

Let’s come back over to our skin editor, open up Featured Posts. And now what I want to do is add my featured image so we’ll drag that into this place. We’re going to use a thumbnail, we’re going to left align it, we’re going to link the image to post, yes. This is going to come to an h2 and we’re also going to link this headline to the article page, let’s hit save template.

We need to make that a link in our CSS. We have that Query Post Format, now that it’s a link, it’s got to be .headline a, here we go. We should make it underline otherwise so it’s clear what’s happening there. So we’re just going to a:hover and then we’ll call it text-decoration:underline. Now it’s clear what’s going on.

Set Up Featured Image

Obviously, there are no featured images for these posts so that’s the next thing we have to do is set up our featured image. Let’s take a look at these images. Inspect the element, we look at that image and it is 113 x 113 so we’ll assume that that’s our target, 113 x 113.

We’re going to come back over to the dashboard. Let’s go down to settings and media. Thumbnail size is 113 okay perfect. We’ve got that already set up so then what we need to do is go back to our posts and add featured images to this post.

Let’s see if we can set the featured image for this and what was this one? This was Traveling, I’m not sure which one was it,but let’s call that one Traveling. Set the featured image. Yes, Traveling with Kids was the first one and we’ve set that featured image, update it.

Then we’ll go back to all posts, do the same thing with our next one which is Toddler Flu Symptoms and set that featured image. Let’s see, do they have a picture of a sick kid, he kind of look sick. Anyway, our purposes we’re just going to choose that one. Set that featured image and update it.

In order for a lot of this to work, you really do need to have featured images set up. For Fine Arts & Crafts, looks like she’s doing a craft, that’s a big image, okay we’re going to use that one as the featured image.

Then finally, one last one, 6 Min Workout. This is a sporty mom, we’ll use the sporty mom for the 6 Min Workout. Now, when we refresh this page, we have the picture sitting in the right position.

Now we need a Read More link and then we need some space in between of each of these things with a nice little dash line.

2 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
2 comments… add one
  • Melinda Maxfield May 16, 2013, 7:36 pm

    Question- where’s the link to the BYOB Read More box which you uploaded in the tutorial?

Leave a Comment

Cancel reply