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 6 – Ex#4 Create a Custom Teaser Configuration

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The last thing to do here is to create a custom teaser configuration for our Thesis theme website. We’re going to do our custom teaser configuration on our home loop so I’m just going to come up here and change this home loop for this. What we’re going to do is have our own separate kind of teaser for the home page so you can see what that looks like.

Make the Teaser Full Width

This is what I want to do which is essentially have the full width teaser that has the title up here, the post date over there and I want to split this thing into half. On the left half, I want to put an image with a comment link and a link to the article and on the right half, to have the excerpt. This is what we’re going to be shooting for here as we do this. In the first place, we’re just going to borrow a whole bunch of different teaser functions from Thesis teasers to do this but we’re going to wrap them in some non Thesis theme HTML in order to make that work.

In terms of rationale, we are going to get rid of this if thesis is teaser because we are only going to show these teasers in this case, so we got rid of that. We don’t need to count the teasers, each teaser is going to be wrapped in this teaser_box class, $right will always be false and we’re going to continue to do post counts because it will put the top one the very first one and not any of the rest of them.

Thesis Teaser Function

The next thing we’re going to take a look at is this thesis_teaser function and if we look at teasers.php, this is the thesis_teaser and when you just call thesis_teaser, this is the function it calls so it assigns a class of teaser, it does the post image, gets the right class, thesis_hook_before_teaser_box, thesis_hook_after_teaser_box and all of those.

We’re going to go ahead and replicate those here and the first thing we want to grab is this thing right here, $post_image = thesis_post_image_info(‘thumb’). It’s just the piece of logic that we want to stick in here before we start printing out the HTML.

We’re going to open up our box and we’re going to have our thesis_hook_before_teaser_box with that $post_count then we’re going to get rid of this entirely because we’re not calling the thesis_teaser, we’re just going to create our own. If you remember correctly that the teasers wrapped inside of a div with a class of teaser, we’re going to replicate that right now, echo ‘div class=”teaser”‘; and we may close that out as well. So we got our opening and closing teaser div.

Place the Thesis Teaser Headline

The next thing we’re going to do is put our headline in here because remember we’ve got our headline and our date so we’ll come back over to teasers and look for that headline, here’s thesis_teaser_headline. We’re not going to bother with hook_before_thesis_teaser_headline here or hook_after_teaser_headline and we’re going to hard code the relationship of post image to a teaser here so we don’t actually want any of these logic.

The only thing we really want is just this echo statement here so that’s what we’re going to grab. Down inside of this now, here’s our headline, echo h2 entry-title get_permalink, that’s our headline and now we want to get our date.

In this case, we are going to come down here and look at thesis_teaser_date, we’re just going to grab this as a function that stands alone. In that function, we’re just going to call that function thesis_teaser_date($post_count, $post_image) and that’s going to put the date in exactly the same way as we formatted the date elsewhere.

Now, if you’re not showing the date elsewhere then you wouldn’t do it this way, you’d have to add some things but we are assuming that the date is being shown in other conditions so we’re going to go ahead and show it that same way here.

Divide the Teaser into Left and Right

We’ve got that top part of it done, now we need to divide it up into left and right. Next is, echo ‘div class=”teaser_left”‘; then we’ll close out this div. We’re going to do it exactly the same thing with the right so we’ll just copy it and replace left with right because we’ve got ‘div class=”teaser_left”
‘; ‘div class=”teaser_right”‘. Inside of class=”teaser_left” is our thesis_post_image. Below that is the comments count with its link then the Read More link. We’ll come back over and take a look at our teasers.php.

If we look for how the thesis_post_image is called, echo $post_image(‘output); so you defined the post image as the thumbnail and you just echo $post_image(‘output’). That’s going to happen right here. We want the comments link so if we come back to teasers.php and we look for teaser_comments, that’s what’s this one here so we’ll just grab that function, paste it and we want to find the same function for the teaser link itself so we’ll just grab this one. We’ve got our thumbnail, our teaser_comments and our teaser link on the left hand side.

On the right hand side, we just want our excerpts so we’ll come back over here again and grab that thesis_excerpt that’s really this right here, grab that function name. Now, we could construct all these from raw WordPress functions.

The reason I’m using the Thesis teaser functions is because one, it simplifies the process of showing this and secondly because it then borrows all the styling and all the configurations that you’ve done in Thesis Design Options. That’s why I’m using these functions rather than a straight WordPress function that could do the same thing but won’t have the Thesis theme styling associated with it.

Clearing the Floats

Now, we’ve reconstituted our teaser, we’re opening and closing our teaser here with the Thesis teaser, we’ve got our headline and our teaser date then we’ve the left and the right. We’re missing one thing and that is a clearing div because we’re going to float these things, we need to clear those floats before we close out this teaser.

I’m going to echo our clearing div so ‘div style=”clear: both;”/div’; and what this is going to do is essentially echo a clearing div so that this div class Thesis teaser doesn’t collapse. So we’ve got our teaser_left, our teaser_right and our clearing div plus our heading and our date above those things.

We will save this document, upload it and test it now. Obviously the CSS hasn’t been developed before this yet so it’s not going to look quite like you expect it to look but you can see it definitely looks different than it used to because now we have our excerpt down below this, we’ve got our heading and date then we’ve got this comment and the Read the full post.

Create a Custom Defined Teaser Style

The next thing for us to do really is simply to style this. The first thing that we’re going to style is our h2 and the way we’re going to style this h2 is we’re looking for our .custom .teasers_box.full .teaser h2 and its width is not going to be 100%, its width is going to be 470px. Let’s just expect that element at FireBug so now that’s 470px and let’s float it left so that the other thing pops up beside it. Now the date pops up beside it. Let’s give it a font size, let’s call it 24px, a nice big font size.

Then we want to customize these left and right sections so that it actually splits left and right. We’re going to do that by looking at our teaser_left and teaser_right. So .teaser_left let’s give it a width of 330px, let’s float it left. We want to make sure that it clears everything up here so we’ll go ahead and clear both and I think we want to give it a bit of margin too, margin-top:10px so that’s our left.

Now we want our teaser_right, we definitely don’t want to clear both now, make it float:left and we’re going to make the teaser_right width 300px. There we go, it pops up over there. This format_teaser entry-content has some margin on the top that we want to get rid of because we would like that to float up there like that. We’re going to come along here and say, .teaser .teaser_right .format_teaser. Then the format_teaser is going to say margin:0 so format_teaser pops up.

Style the Teaser Links

The only thing we have left to do with this is to style these two links. To style the links, what we want to do is reference teaser_left post_image_link and teaser_left teaser_comments. What we’re really doing here is, .teaser_left a.teaser_comments then teaser_comments let’s display:block that will allow us to give it a height and width. We’ll give it a padding of 10px, we’ll float it left, we will give it a background color, give it a font size of 13px, give it a color of white, give it a letter spacing of normal and give it a text transform of none.

Actually, we want that same thing to apply to “Read the full article” so we’re just going to take this, paste it but it’s going to be teaser_link instead of teaser_comments. Now, I think we should give ourselves some margin:left of 10px. It separates the button there. Actually, you don’t want a margin:left on this side so I’m going to do a special one for this and this is going to have margin:0. I think I want to change the padding on that one, padding and what happens if I do 9px?

Create a Hover Condition

You notice there’s something odd about that. I think I’m going to monkey about with this and say, 9px, 20px, 10px and 20px. That makes this 1px smaller in the padding definition but it looks like it makes those two things the same size now. So we’ve got that and that and now the only other thing we want to do here is just to create a hover condition to this, a.teaser_comments:hover, hover and now our background color is going to be light blue.

Actually, I may as well just use the color that I created for that so instead of blue, cherry red color and a lighter cherry red color. Now we have a custom defined teaser style. Come down here and copy this right to there, custom.css, save, upload and test it. There we have this home page being different than the Oranges, being different than the Bananas and being different than the Cherries.

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