How to Add New Class to First Post in The Homepage

Sometimes, wordpress theme developers or users want to make their latest post looks different from the rest for their theme. Maybe they want to make the font larger, or the background color lighter, or whatever. This can be done by adding new class to the latest post and then styling the class via css. Here, I’ll share the trick to add that new class.

How to Add New Class to First Post in The Homepage

But before that, you may also be interested in the following wordpress quick tips related articles:

How To Add New Class to First Post in The Homepage

On standard themes, usually using post_class() function to create post classes. We need a filter so this function on the first post has a special class. Ok, Add this code in the function.php

function firstpost_class($class) {
	global $post, $posts;
	if ( is_home() && !is_paged() && ($post == $posts[0]) ) $class[] = 'firstpost';
	return $class;
add_filter('post_class', 'firstpost_class');

Now, the first post has new class, ‘firstpost’ and we can style the latest post by using this class.

Hope this hack help :)

7 Comments to “How to Add New Class to First Post in The Homepage”

Add Comments (+)

  1. error message, last }

    Parse error: syntax error, unexpected ‘}’

  2. sorry my mistake. all fine. thanks!

  3. Michael says:

    OH MY GOD…. Dude thanks so much…. I have been working on trying to get the first post styled…. you just saved my ass. :)

  4. Nice post dude…Can i know how to display posts with separate categories headings as in wordpress movable theme in the homepage.

  5. trigun says:

    Did not work for me. There was no error, but nothing changed. Is there I need to modify in my index.php?


  6. Hello! Congratulations for your post. I would like to know if is possible to apply your code not only for the index, but also on single page or post page (post view). My problem is the following: on header.php the last element is a “” and for each post there is a “border-top”, so, when I view a single page for example, above the post appears 2 “borders”, in otherwise, the look is so bad! How can I solve that?

    Thank you.

  7. Mohamed Samir says:

    Thank you Very much, You just saved me, I’ve been searching for this for other 3 months (not joking)


  1. 如何突出显示WordPress首页第一篇文章

Leave a Reply


Amazingly Beautiful WordPress Themes