WordPress users frequently ask how to make their most recent post look different from the rest. Maybe they want to make the font larger, or the background color lighter, or whatever. With a small sprinkling of PHP, this is easy to do. But first, an overview of what we’re trying to accomplish.
Overview of What We’ll Be Doing
What we’re going to do is add a special CSS class to the first post, but not to the others. In most themes, each post gets wrapped in a div that looks something like this:
<code>__abENT__lt;div class=__abENT__quot;post__abENT__quot;__abENT__gt;__abENT__#46;__abENT__#46;__abENT__#46;__abENT__lt;__abENT__#8260;div__abENT__gt;</code>We’ll leave that alone for all the posts except the first. For the first, we’ll change that to this:
<code>__abENT__lt;div class=__abENT__quot;post firstpost__abENT__quot;__abENT__gt;__abENT__#46;__abENT__#46;__abENT__#46;__abENT__lt;__abENT__#8260;div__abENT__gt;</code>And then it’s a simple matter of defining a background color for the <code>__abENT__#46;firstpost</code> class in your style.css, like this:
<code>__abENT__#46;firstpost{background:#f00;}</code>So that’s what we want to do. It’s easy with a small amount of PHP.
How to Do It
Open up your WordPress template folder. You need to open whichever file controls the part of your blog in question. If we’re talking about your main page (we probably are), then you probably want to open index.php. (But if there’s a home.php, open that instead.)
Find the beginning of the loop 
. Usually, that looks something like one of these:
<code>__abENT__lt;?php if ( have_posts() ) : while( have_posts() ): the_post(); ?__abENT__gt;<br />
__abENT__lt;?php while( have_posts() ): the_post(); ?__abENT__gt;<br />
__abENT__lt;?php while( have_posts() ){ ?__abENT__gt;</code>Now, just before the loop starts, insert this line of code, exactly as shown, on a line by itself:
<code>__abENT__lt;?php $firstClass = __abENT__apos;firstpost__abENT__apos;; ?__abENT__gt;</code>Now, go into the loop and find the first <code>__abENT__lt;div__abENT__gt;</code> after the loop starts. In most themes, it will look something like this:
<code>__abENT__lt;div class=__abENT__quot;post__abENT__quot;__abENT__gt;</code>The class name might be different, but that’s the general idea. Change it to this:
<code>__abENT__lt;div class=__abENT__quot;post __abENT__lt;?php echo $firstClass; ?__abENT__gt;__abENT__quot;__abENT__gt;</code>Easy enough so far, right? There’s one more step we need to take, otherwise every post will get that <code>firstpost</code> class added to it, and we don’t want that. So on the line right after the one you just edited, add this in:
<code>__abENT__lt;?php $firstClass = __abENT__quot;__abENT__quot;; ?__abENT__gt;</code>That’s two quotation marks in a row, just in case it isn’t clear. With that piece of code inserted, you’re all done. For the first post, <code>$firstClass</code> is <code>firstpost</code>, but for later posts, <code>$firstClass</code>will be blank, so echoing it into the div won’t have any effect.
24 Comments
Thank you for this easy to understand explanation! =)
Wow, this is just great. You saved my day buddy. I’m using your hack to not display a border-top for the first post (so we don’t have double borders).
Thanks!
Thank you for this tutorial, just right when I needed it :)
That’s exactly what I was looking for, in a very easy-to-understand explanation.
Thank-you!
This totally worked! and so simple. Thanks!
This was exactly what I’m searching for. Great! Thanks a lot!
Cool! thanks a lot! That really works after looking for the solution for a while!
Is there a way to make every other post have a different class so it can have different font/color/bkg, etc?
Gary: It’s easiest to help those who help themselves. Poke around a bit.
Adam, thanks for the link. I was poking around but wasn’t getting anywhere so thanks again!
I Dont supose you have a wordpress 3.01 version of this i known that this should still work but im trying to get it to work in the new loop.php file with no success
David, the functions are all exactly the same in WP 3.01. It’s your theme that’s different, not WordPress. Every theme is different.
Adam, I’d like to add a specific post class for the latest post of every category in the loop, so I can target them with css.
My index page displays a loop containing the latest 10 excerpts from posts of any of the three available categories. I’d like to stlyle the latest “category 1″ post, the latest “category 2″ post and the latest “category 3″ post differently.
Ho to do that?
Hi, this seems to change the first post on every page. Is there a way to only do this for the absolute most recent post?
Thank u!! It was so useful!! But.. what if I want to change also the content of the first post?
i.e. show the excerpt while the other posts have only the thumbnail..
L.
Thx for post it help me a lot but I’ve got a little bit different problem. In my post I’ve got three divs to make my post look rounded.
Is there any possibility to make this example work with this?
That’s pretty much exactly what I need to do, but I suspect my styling won’t be quite right for making it work!
Wow !!!!!!!!!
Very nice……….
Wouldn’t it be easier to simply do ->
inside the loop…
<?php if ( !$firstpost ) { echo 'firstpost'; $firstpost = true; } ?>Cezz, on some servers, that code will issue a notice as you’re trying to access a variable that hasn’t been set. You could set $firstpost to false outside the loop before running this, or change
if ( !$firstpost )toif ( !isset( $firstpost ) ).very usefull article!!
how can i do this with the first or last comment? thanks
Tried this and it works great! I’ve set this up to name my other div as post. How can I set a featured image/thumbnail to show only on that div? Here is that section of code so far and it shows a thumbnail on every post, including the firstpost. Not familiar enough with PHP to figure this out and I’ve looked for something like , but apparently that doesn’t work or at least my implementation of that doesn’t work.
<div id="”>
Thanks for any feedback.
Just read the comment guidelines about code after I posted…lol. Here’s the code snippet I was trying to post.