The look of your latest post is important

While browsing through different websites, you have probably came across blogs which have the top post displayed differently. That post might have a different background color or it is only positioned differently than the rest of the posts in the blogroll.

By making the latest post different, you are creating a unique look and, at the same time, telling your visitors that this is something new.

If you have wondered how to achieve that, wonder no more because we will show you how to customize the look of latest post in your WordPress blog.

Create a new function:

  1. Open functions.php file
  2. Copy and paste the code and save changes afterwards:
  3. function last_post_class($classes){
    global $wp_query;
    if(($wp_query->current_post+10) == $wp_query->post_count) $classes[] = 'lastpost';
    return $classes;
    }
    
    add_filter('post_class', 'last_post_class');

This function will count your posts and when it founds that last one that you have published, the function will add a new class to it.

Note that third line of the code searches for the 10th post. That’s the case if you have your blogroll set to default and it shows 10 posts per page. If you have different setup, you will need to modify the code. If you for example show 5 posts per page, you will need to change the code to:

if(($wp_query->current_post+5) == $wp_query->post_count) $classes[] = 'lastpost';

The name of the class you’re adding with the above code is “lastpost” and you are free to change that to anything you like. It is important that you know the name of that class because you’re going to need it later when you define the CSS class.

But before you go to define the class, you will need to make sure that you have the following code in your post loop. The loop is usually found in index.php and any other template that uses post information. Find div with post-id and replace it with this one:

<div id="blog-post-<?php the_ID(); ?>" <?php post_class(); ?>>

Have you made the change? OK, now you’re ready to style your last post:

Style the last post:

  1. Open your style.css file
  2. Add your new class and customize the post:
  3. .lastpost {
    background: blue;
    border: 2px solid #84aac4;
    }
  4. Save changes

And that’s it. Now you can go to your blogroll page and see the changes that you have made. If you want to style the last post nicely, you will probably spend some time playing around with the CSS code, but hey, that’s the fun part of customization, isn’t it?

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *