How to style the latest post in WordPress

wordpress tips tricks
You will often find blogs that shows the latest post in a different color or applied different CSS tags. Basically you need to Inject some code inside wordpress post listing generation loop. The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post. So we need to find the latest post and define a specific attribute to that post such as a different CSS class.

First of all open the index.php from the theme you are using. Search for the code

while (have_posts()) : the_post();

Now after that code to the next line add this code:

<?php if (is_paged()) : ?>
<?php $postclass = ('post'); ?>
<?php else : ?>
<?php $postclass = ($post == $posts[0]) ? 'featured-post' : 'post'; ?>
<?php endif; ?>

As you can see from the code above it defines $postclass as a variable and look for the latest post and assign that variable to a new name. But this is not all, you need to output that variable where your post has the CSS style assigned to it. See the example below:

<div class="<?php echo $postclass ?>">
    <h3 class="title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

Now you just need to style your CSS file according to the class name you’ve assigned for the latest post.

Some of the link on this post may have affiliate links attached. Read the FTC Disclaimer.

Comments are closed.