Build Your Own Business Website header image

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.

Lesson 16 – Part 3 – Ex#1 Display 1 Teaser Per Row on the Home Page

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We’re just going to jump right into that now because this theory sounds more complicated than it really is and we’ll create a display with 1 teaser per row on the Thesis theme home page. We’re going to create a custom loop that takes our teasers on the home page and makes them one-wide instead of two-wide.

Right now, our teasers are two wide and you could theoretically do this using CSS except that the Thesis theme automatically creates this top class so you would end up with this dashed line in between every other one which I think is less than perfect. I’m going to show you how to do it from the loop side rather than just trying to force it with CSS and it’s going to be on the home page.

Default Home Loops

First let’s take a look at the home loop. The first thing the default home loop does is it sets up a variable for post $post_count and sets up a variable for $teaser_count. It uses these two things in defining what HTML is going to be used.

The home query essentially goes and gets all of the posts ordered by the most recent posts and gets as many of those posts as you’ve said posts to be displayed per page. On this one in particular, it went out and got the 10 most recent posts with the most recent one at the top. That’s what the query automatically returned and now it says, while have_posts, the_post.

The first thing it does is tests whether or not this thing should be a teaser. If it shouldn’t be a teaser, what it does is displays the featured post so it comes down and says, assigns post_box to the value of classes, it says if that $post_count is equal to 1 then it adds top to this classes and calls the Thesis post_box passing that value of those classes and the value of $post_count.

Depending upon how you have these set up, if you’ve got two featured posts, then the first two times this goes through, it’s going to go through with this. If you have no featured post and if they’re all teasers, then this part is going to trigger so if (apply_filters(‘thesis_is_teaser’, thesis_is_teaser($post_count))) then it starts displaying the teaser.

Teasers’ Open Box and Close Box

Now, the thing about these teasers is that they have an opening and a closing thing around every other one. First, if it’s the first teaser at the very top of the page, then it wants to add this top class to this variable $top. The way this works is it takes the $teaser_count and it divides it by 2 and if the remainder of the $teaser_count divided by 2 is equal to 1, then it gets these open box and close box.

If the remainder of $teaser_count divided by 2 is not equal to 1, then it gets this opening and closing conditions so our $open_box is teasers_box with that $top variable,, the $close_box is equal to blank and the right is equal to false. That’s if it’s the first teaser in a pair. If it’s the second teaser in a pair, it doesn’t have an open box but it does have a close box and it says the right is equal to true.

In a pair of teasers, your left teaser starts off by opening up the teaser box and not essentially floating to the left and the right teaser doesn’t open the teaser box but it does close the teaser box and floats to the right. Then it comes down here once it’s set these variables, whether it’s the first teaser or the second teaser on a row.

Then it comes down here and says, if $open_box isn’t blank, so that is if it’s the first teaser on a row, then (04:50) the $open_box then thesis_hook_before_teasers_box then it does the thesis_teaser. If the $close_box is not equal to blank, then it echoes the $close_box so that is, if this is the second teaser, then it closes the box and puts the hook in there and it increments the teaser by 1.

The first time this goes through, $teaser_count is equal to 1, as soon as it hits here $teaser_count goes up to 2. It comes back around here if $teaser_count is equal to 2 then it gets the closing box and it gets the right. When $teaser_count is equal to 3, then the remainder is equal to 1 and we open the box and when it’s equal to 4 then it’s equal to 0 and we close the box and so on and so forth. We have this thing going on, that’s what’s happening with this thing.

It has one other thing, one other possibility is that you could have an uneven number of teasers being displayed. So if you have an uneven number of teasers being displayed so rather than your last teaser might actually open a box and never close the box, it wants just to make sure before it leaves the loop that it closes that box. That’s what’s happening here then it’s got this finishing so we’ve got a start and we’ve got a finish that we have to manage plus the opening and closing that happens in between each pair. That’s what’s going on with this.

Open and Close the Box for Every Teaser

Now, our logic, and this is going to stay essentially the same except that we’re going to open and close the box for every teaser. This concept of $right, there’s never going to be a $right teaser because the teasers are going to go all the way across so the $right is always going to be false. We don’t have quite as elaborate a calculation here.

Let’s just go ahead and set this up and we’re going to say,class byob_custom_loop_1 extends thesis_custom_loop and what we’re going to do is come over here to loop.php and steal home so I’m going to take all of function home. Come back over, there is function home.

In function home, we’re going to leave $post_count and $teaser_count because we’re going to use those and we’re going to preserve the ability here to have a couple of feature posts and after our featured post all the rest of them are going to be full width but they’re still going to be teasers. We’re going to keep that filter, we’re not going to have an alternating opening box and closing box so what we’ll do is just take this $close_box and replace this with that.

The opening and close box is always going to be the same which means we can get rid of this ifelse statement because we aren’t ever not both opening and closing the box. So $top equals if the $post_count is equal to 1 then we’re going to add top to this teasers_box.

Define the Teasers Box

One of the things I do want to do is to distinguish this teasers_box$top from any of the rest of them because I only want to change this on the home page. I’m going to come over here and add an additional class called full. Now my div is going to be teasers class teasers_box sometimes top and full then I can create some CSS that will apply only to the teasers_box full class.

Here’s our $open_box, our $close_box, our $right then we don’t really need this if question here because we’re always going to open it so we can get rid of that if question, $right = false so echo $open_box thesis_hook_before_teasers_box($post_count). We’re also going to get rid of this if statement for the closing box.

Now we’ve got our opening box and our closing box, we’ll echo the $open_box, we will do our thesis_hook_before_teasers_box, our thesis_teaser, we’ll echo the closing box, we’ll put in the thesis_hook_after_teasers_box and we will increment our $teaser_count. Actually, we don’t even need a $teaser_count here because we aren’t using teaser count so we’re just going to get rid of the $teaser_count, we don’t need to increment $teaser_count because we aren’t counting the teasers.

There’s no possibility when we’re not going to have a closing so we can get rid of this closing thing here as well because we’re always opening our box and closing our box with these teasers then you have the condition where it’s potentially a featured post. So if it’s a teaser, then do this otherwise do the featured post. We’ll increment the $post_count once and so the second time after the second post, this top thing doesn’t show up anymore. That’s what’s going on here, we can just go ahead and save that.

Instantiate the Class

Actually, we’ve defined our class but we’ve not instantiated the class. What we’re going to do is say, $byob_custom_loop = new byob_custom_loop_1; and byob_custom_loop_1 extends the thesis_custom_loop. What we’ve done is we’ve created this function which replaces the function home in the main thesis_custom_loop and what that does is essentially reconstructs our teasers so that each teaser is wrap in a teasers_box and we’ve added the class full to that teasers_box. We’re now going to upload our custom_functions.php file.

This is the way it sits right now. This is our home page, now it’s going to change when I refresh this page. Let’s see, what have I done here, I didn’t save it. Save the custom_functions.php file, upload that, now let’s take a look at it. Now we have each of these things on one line and the only thing we need to do now is to style so that it works the way we want it to do. I am going to do that in FireFox.

FireFox is saving an old version of custom.css file here. There we go, that’s more like it. If we inspect this element and we look at this for just a moment, you can see the div class=”teasers_box full” so it is adding that teasers_box full to this but if we look down at our div teaser, it says the width is 30.9em and what we really want the width is to be is 100%. The trick here is to say, .custom .teasers_box.full, this is why we added the full thing here so we can now say .teaser then say width:100%; and now we have them split up like this.

The whole thing is configured the way we ask it to be configured except that the teasers are now 100% wide and we have this new class that allows us to specify this teasers_box this way. I’m going to add that style to our custom.css file, save it, upload it and refresh it. So it works on the home page just fine but it does not affect any of the category archive pages because all of them are still split into twos. That is our first example which is changing the home loop so that it displays the teasers as full width in the Thesis theme.

Save $200 on Membership Now!

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

Leave a Comment