Welcome, visitor! Log in
 

KB Plugins blog

The best Wordpress plugins are free

How do I make my first post look different from the rest?

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

  1. Posted March 30, 2008 at 4:12 am | Permalink

    Thank you for this easy to understand explanation! =)

  2. Posted July 24, 2008 at 5:05 pm | Permalink

    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!

  3. Posted February 6, 2009 at 1:22 pm | Permalink

    Thank you for this tutorial, just right when I needed it :)

  4. Posted June 11, 2009 at 8:15 pm | Permalink

    That’s exactly what I was looking for, in a very easy-to-understand explanation.
    Thank-you!

  5. Yup
    Posted June 18, 2009 at 10:36 pm | Permalink

    This totally worked! and so simple. Thanks!

  6. Posted December 31, 2009 at 12:46 am | Permalink

    This was exactly what I’m searching for. Great! Thanks a lot!

  7. Posted May 15, 2010 at 4:59 pm | Permalink

    Cool! thanks a lot! That really works after looking for the solution for a while!

  8. Gary
    Posted June 15, 2010 at 9:46 pm | Permalink

    Is there a way to make every other post have a different class so it can have different font/color/bkg, etc?

  9. Posted June 16, 2010 at 7:42 am | Permalink

    Gary: It’s easiest to help those who help themselves. Poke around a bit.

  10. Gary
    Posted June 16, 2010 at 10:06 am | Permalink

    Adam, thanks for the link. I was poking around but wasn’t getting anywhere so thanks again!

  11. David
    Posted September 14, 2010 at 5:04 am | Permalink

    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

  12. Posted September 14, 2010 at 7:34 am | Permalink

    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.

  13. Andrea
    Posted September 26, 2010 at 5:39 am | Permalink

    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?

  14. Posted October 4, 2010 at 6:28 am | Permalink

    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?

  15. Lolly
    Posted November 25, 2010 at 1:23 pm | Permalink

    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.

  16. Lukas
    Posted November 25, 2010 at 3:30 pm | Permalink

    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?

  17. Posted September 4, 2011 at 11:17 pm | Permalink

    That’s pretty much exactly what I need to do, but I suspect my styling won’t be quite right for making it work!

  18. Shaile
    Posted October 10, 2011 at 1:21 am | Permalink

    Wow !!!!!!!!!
    Very nice……….

  19. Cezz
    Posted October 14, 2011 at 11:08 am | Permalink

    Wouldn’t it be easier to simply do ->

    inside the loop…

  20. Cezz
    Posted October 14, 2011 at 11:09 am | Permalink

    <?php if ( !$firstpost ) { echo 'firstpost'; $firstpost = true; } ?>

  21. Posted October 16, 2011 at 12:05 am | Permalink

    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 ) to if ( !isset( $firstpost ) ).

  22. Posted November 13, 2011 at 10:28 am | Permalink

    very usefull article!!
    how can i do this with the first or last comment? thanks

  23. Shayne
    Posted January 5, 2012 at 9:26 am | Permalink

    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.

  24. Shayne
    Posted January 5, 2012 at 9:28 am | Permalink

    Just read the comment guidelines about code after I posted…lol. Here’s the code snippet I was trying to post.

    <?php $firstClass = 'firstpost'; ?>
    	<?php if (have_posts()) : ?>
    
    		<?php while (have_posts()) : the_post(); ?>
    <!-- post -->
    				<div id="<?php echo $firstClass; ?>">
    <?php $firstClass = "post"; ?>
    
    <?php if(!is_single() ) { ?>
      <?php the_post_thumbnail('thumbnail'); ?>
    <?php } ?>