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 4 – Ex#2 Display 3 Teasers Per Row for Specific Categories

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Our second example is going to be to display three teasers per row for specific categories on our Thesis theme website. What we’re going to do is come over here and look at our Bananas category. What we want is our Bananas category to have three teasers across rather than two teasers across.

Change Logic in the Home Loop

If we take a look at the default loop, look at our home loop then we come down to our archive loop. In the default archive loop, it calls the thesis_archive_intro then it tests to see what style the thing should be displayed in. If it doesn’t have any titles, it comes down here and uses this home loop.

We’re familiar with what the home loop does, it checks to see what the remainder is and it has the opening box and the closing box depending upon what remainder is. It opens the box, it does the thesis_teaser, closes the box, it increments the teaser count then comes back up and asks about opening and closing box again.

We need to change this logic ourselves so that we can test for every third teaser rather than every other teaser because we still want to open and close the box but we want to open the box on the first teaser and close the box on the third teaser, open the box on the fourth teaser and close the box on the 7th teaser. This math isn’t going to work for us and we’re going to have to come up with our own set of math.

In this case, we’re going to let our logic be the same except that we aren’t going to be testing for any featured posts so we don’t need this featured post test. Obviously, we’re going to have to change the logic for opening and closing the box. Also, the third of the teasers, so 3, 6, 9, each of those teasers is going to have $right = true because we’re going to want it to float to the right. We’ve got those things that we have to manage in the way this teaser thing happens so we’re just going to start off then.

Create the Function Category

What I’m going to do is copy this function and call it custom_loop_2, we’ve got our function home and we’re going to do our function category. Now in this case, we do want that $teasers_count so we are going to get that $teasers_count back in there as a variable then we have while (have_posts), the_post and we aren’t going to actually ask if the Thesis is teaser in this case.

In fact, I think what we should do is come back over here and grab this function instead and replace my category function with that function then call that category, $post_count, $teaser_count, if (apply_filters(‘thesis_is_teaser’, this is something we are going to get rid of because we aren’t going to have this condition so we’ll delete that and that.

Divide the Remainder by Three

If the remainder of the teaser count divided by 2, we don’t really want to be that way anymore so we’re going to say, remainder divided by 3. The other thing we want to do is just make sure since we aren’t going to have any featured posts, we want to add one more test here and that is going to be if teaser count is equal to 1 so we want to make sure that so $teaser_count ==1.

If $teaser_count remainder 3 equals 1, $teaser_count ==1 then we’ll put this $top in. If $teaser_count is equal to 1, $teaser_count remainder 3 is not going to equal 1 so we need to start the condition off. So if $teaser_count remainder 3 equals 1, then we’ll have this as our $top, if $post_count equals 1 then it’s really going to add $top to that.

Wrapping the Middle Teaser

Our open box is going to be the same as before, our close box is going to be blank and our right is going to be false. Really, we’re going to do this same thing again here, elseif $teaser_count divided by 3 remainder is equal to 2, then we’re not going to have a $top so we don’t need to worry about that. The open box is never going to look like this. We need an open box because we need to be able to wrap the middle teaser with something.

Now, our $open_box is going to be middle_teaser and our $close_box is going to be just a closing div. If it’s the middle_teaser then we’re going to wrap it with the class middle_teaser and close that div and the $right is still going to be false, else, the $open_box is going to blank, the $close_box is going to be that and the $right is equal to true. Then we say if $open_box is not equal to blank, then do the $open_box and thesis_hook_before_teasers_box.

We may want to end up with another condition that only puts this hook in there once. Open box is not going to be blank either in the first condition or the second condition. What we could do here is come down and just say this. We’re going to echo the $open_box no matter what but we’re going to say if the remainder of $teaser_count divided by 3 is not equal to 2, then we’ll put this in.

If there’s an $open_box, it’s either going to be equal to 2 which is when we don’t want to put the hook or it’s going to be equal to 2 when we do want to put the hook so we’ll open no matter what. If it’s not equal to 2, we’ll put the hook in, we’ll come down and put our teaser in then close the box. Actually, we’re going to have exactly the same condition here. If the remainder of our $teaser_count divided by 3 is not equal to 2, we will put our thesis_hook_after_teasers_box then we’re going to increment our $teaser_count, increment our$post_count and I have one extra thing here.

Create a Variable Finish

There’s one other thing we need to do here and that is figure out when we’re going to do this finishing closing div. Rather than the math this way, what we’re going to do instead is create a variable called $finish = then we’re going to use this. If there’s one teaser left in this row, then we’re going to do this as a finish. If there are two teasers left in a row, then we’re going to do this as a finish. If this is the third row of teasers, then our finish is actually going to be equal to blank because we’ve already finished it here.

Down in this case, what we can just say is echo $finish and I need to figure out what I have. The logic that underlies this is if it’s a category, we’re going to set our $post_count is equal to 1, out $teaser_count is equal to 1 and we’re going through our loop, opening the box at the first of 3 in row wrapping the second one in a div that is it’s own class.

The third one in a row is going to close it out and if there’s an odd one left out, if it didn’t get closed out entirely, then what we’ll do is close it out once we get all the way out of our loop. That is what’s going on here. I’m going to show you that first then we’ll come back and refine this. I’m going to upload custom_functions.php, refresh this, come over and look at one of our categories. Now, you can see that we don’t actually have them 3 in a row.

The reason why we don’t actually have them 3 in a row is that we have a width that is currently specified that doesn’t allow 3 in a row to go in place. That’s really the next thing we have to do, is to get rid of this sidebar.

Eliminate the Sidebar

As we talked about in Lesson 1 where we talked about Thesis theme filers and there’s this filter that will let you eliminate the sidebars here. Once we get rid of our sidebars, this is all going to behave the way we want it to behave. A couple of things here that we need to do that we forgot about, the first one is that thesis_archive_intro align that exists here in thesis_archive_intro so we’re going to go ahead and capture that and put it above while (have_posts).

The other one was remember how above here we put in full? Here we’re going to put in thirds. We’re going to add another class that allows us to style this. At the moment, this applies to all categories but before you know it, we’re going to make it apply only to a single category so we’ll add that special class there. Then we’re going to use the thesis_filter_show_sidebars which will hide our sidebars and make our content area full width.

Add Replacement Functions to Custom Loops

Now, this is where we start adding functions into this custom loop that are specifically replacement functions. Remember I said, we can create two kinds of functions here, we can create replacement functions and we can create our own functions. In order for us to create our own functions, the first thing we’re going to need to do is pull in our constructor and we’re just going to copy this from this Thesis Skin Starter template, we’re just going to come along here and grab public function__construct, public function init, public function actions and public function filters.

We’re just going to copy that because that would give us a good starting spot for our code and paste it. So we’ve got our public function__construct and what this is doing is it’s calling the parent constructor. We’re adding an action and that is, ($this, ‘init’) to the init hook. We are creating this public function init and it’s going to have actions and filters. To the extent that we have actions and filters, we’ll put them in here.

Define a Function to Hide the Filters

The next thing we want to do is define a new public function that essentially hides the filters. Let’s see, public function hide_sidebars and at the moment, we’re going to say if(is_category()), return false. We’re going to come up here and say under our filters, add_filter and that filter is thesis_show_sidebars. The way you call this filter is like this, rather than the name of that because it’s contained inside of this class, you put together an array here and you say $this, inside that array you use $this and the function name which in this case is hide_sidebars.

This is the way you add the filter, add_filter, the name of the filter and instead of the name of the function, since $this function is inside of the class, we say, array $this being this class and the function name hide_sidebars. What’s going to happen is this hide_sidebars is going to say, if it’s a category, then return false which means the sidebars won’t show. If we come up here and say, save, upload that, come back over to this, now we don’t have sidebars but it also looks like we don’t quite have enough room for all of these and that’s because of the width that’s been defined here.

What we’re going to do is edit our CSS and now we’re going to say, .custom .teasers_box .teaser and instead of full we’ll say thirds and instead of width:100% let’s call it 33%. Oh, teasers_box top thirds has been given a size so we need to change the width of that to 100%. Now we have our three teasers spread across like that. You can see this text is too close so this is where that middle_teaser thing comes in.

What we’re really going to do is make this say, 31% and we are going to say, .middle_teaser and say padding-left:3.5%. I guess we need to add the rest of these to that. Did I do this wrong? That’s still not right. I almost feel like I’m missing something here. Okay, we got that backwards here, .middle-teaser .teaser, there we go. That’s what it was so you have to have those classes in the right order because just so you can walk through this. We’ve got our teasers_box thirds, we’ve got middle_teaser and teaser. That’s the deal there.

Limit the Teaser to Specific Categories

We made this 31% wide which left us with 9% and maybe 31.5% let’s try that. There we go, that’s a bit better. Actually, maybe doesn’t quite look right, does it? Maybe this 31%, it looks more even doesn’t it, it does. Now we have CSS setup for this and I’m just going to take up to there, box thirds, copy that, come back over to custom.css and paste it. Let’s just go upload this first then we’ll talk about the one other thing we want to do which is limit this to specific categories.

Right now, this is applied to all categories. If we refresh this, now it works for our Bananas category, our Oranges category and our Cherries category. Let’s make this apply only to Bananas. The way you do that is to add a conditional statement so here we are in our category and we’re going to say, if (is_category)(‘bananas’)) then do this thing else, do the default thing.

The default thing in this case, is called thesis_loop: :category. What this is, is this calling the thesis_loop class which is the parent, these two dots indicate that we’re talking about the parent class and we’re going to use the function category. I need the closing, there we go. So if it’s bananas, we’ll do this, if it isn’t bananas, we’ll do the typical category and the typical category won’t have them 3 across.

Now, that means we probably want to change this function up here too. What we really want to do is say, if (is_category)(‘bananas’)) we’re going to hide the sidebars otherwise, we’re going to show the sidebars so if (is_category)(‘bananas’)) return false. I suppose in this case, we should probably else return true. We’ll go ahead and upload this, come back to our example and we’ll refresh it for Cherries.

Now for Cherries, we have our sidebar back and it’s a plain old ordinary Cherry configuration. Same thing is true for Oranges. First question is I misspelled it, let’s just go back over and double check, I probably misspelled it one place or the other. Copy that, come back over here so if (is_category)(‘bananas’)) return false else return true.

Yes, this is right. I did miss Bananas there. Save it, upload and refresh it. Now we should be golden, there we go. Our Bananas stretches 3-across, our Oranges is only 2-across, our home page is only 1-across and we have all those different versions of our teasers.

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