How to: make your new posts stands out

Why not giving a special style to the posts published less than 24 hours ago, to let your readers know about the fact they’re new? Here’s a simple code to do it.

To achieve this recipe, edit your index.php file and look for the loop. Replace it with that one:

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post();
        $currentdate = date('Y-m-d',mktime(0,0,0,date('m'),date('d'),date('Y')));
        $postdate = get_the_time('Y-m-d');
        if ($postdate==$currentdate) {
            echo '<div class="post new">';
        } else {
            echo '<div class="post">';
        } ?>
        <a href="<?php the_permalink() ?>" rel="bookmark">
        <?php the_title(); ?></a>
        <?php the_time('j F Y'); ?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>

The above code will add the css class new if the post was published less than 24 hours ago. Then, you just have to modify your stylesheet a bit:

.post{
    /* CSS style for "normal" posts */
}

.post.new {
    /* CSS style for newer posts */
}

Thanks to Fred jaillet for the recipe!

21 Responses

13770

Dec 07 2008 09:36

Fine but what about posts less than 48 or 72 hours ago ?

Jean-Baptiste Jung

Dec 07 2008 10:02

@13770: It is possible and just a bit harder to do than this recipe. If people is interrested, I should write a new recipe to show how to make post younger than 48/72/whatever hours stands out

Raju

Dec 07 2008 10:03

This is not as easy as it looks

Jean-Baptiste Jung

Dec 07 2008 10:05

@Raju: Explain your problem, I’ll try to help

Avinash

Dec 07 2008 11:19

Jean, I feel instead of a time based hack it would be better if it was hack that could highlight the latest post itself, so that it would work in any situation.

Jean-Baptiste Jung

Dec 07 2008 11:26

@Avinash: Very good idea! This can be done using a custom field or a “featured” category. I should write about it if peopel are interested

13770

Dec 07 2008 11:29

the latest post ?
No I’m not interested. If this post is 15 days old it’ll be highlighted all the time.

fredjaillet

Dec 07 2008 13:56

A current date :
//CURRENTDATE
$currentdate = date(‘Y-m-d’,mktime(0,0,0,date(‘m’),date(‘d’),date(‘Y’)));

Brad Blogging.com – Personal Blog Tips And Blog Help

Dec 07 2008 18:40

@ Raju – Your right, it looks even easier

This is a great way to add a special flare to your current post.. Perhaps add some christmas lights around the title? Make a beige background? The choice is yours.

I don’t think I’d recommend it though for people that use full posts instead of post summaries.. A 1px border around the edge might get a little tedious after a while.

Andreas

Dec 08 2008 19:25

I used this way in my index.php to show only the first post different from the rest:

http://www.unintentionallyblank.co.uk/2007/02/18/adventures-with-the-wordpress-loop-sticky-articles/

This works independent from any time comparison, is very flexible and it doesn’t seem to make the loop any slower

mydesignbytes

Jan 09 2009 16:54

Unless I’m crazy -> you missed <?php on line three:

<?php $currentdate = date(‘Y-m-d’,mktime(0,0,0,date(‘m’),date(‘d’),date(‘Y’)));
$postdate = get_the_time(‘Y-m-d’);
if ($postdate==$currentdate) {
echo ”;
} else {
echo ”;
} ?>
<a href=”" rel=”bookmark”>

Great idea!

Jean-Baptiste Jung

Jan 09 2009 18:45

@mydesignbytes: You’re right! Thanks for letting me know and sorry for the mistake!

mydesignbytes

Jan 09 2009 20:35

Sorry, my code got scrambled