Are you looking for a way to add a class to the first post in The Loop? This snippet will add a first class to the first post in The Loop, which will let you add unique styling to the first post.
Instructions:
All you have to do is add this code to your theme’s functions.php file or in a site-specific plugin:
add_filter( 'post_class', 'wps_first_post_class' );
function wps_first_post_class( $classes ) {
global $wp_query;
if( 0 == $wp_query->current_post )
$classes[] = 'first';
return $classes;
}
Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.
If you liked this code snippet, please consider checking out our other articles on the site like: CSS Hero Review.
Hi,
This has worked great, however, if I have pagination and i go, say, page 2, it adds the class to the first post on page 2, which I don’t particularly want. How would I be able to update the code to add the ‘first’ class to the first post of all the posts, even counting those paginated.
Thanks a lot for the article it’s been very helpful! 🙂
Yeah! for adding a last class to the post, need only to add a condition like $wp_query->current_post === $wp_query->found_posts?
Something like this should work,
if( $wp_query->current_post == $wp_query->post_count-1 )
Thank you man, i was unsafe about found_posts start from 0 (my bad). However, in same cases post_count isn’t a right choice because it contain the total number of posts being displayed. The use of found_posts or post_count depend which query had been performed, post_count have the same value of “posts_per_page” if is defined in a query or the default value defined into the read settings (sorry for my english).
Hi Widzo, I think it depends on the results you want, if you want to add the class to the last post on every page you would use “post_count” on the very last post only you would use “found_post”
great! And if I want to add a class always to the fourth column of the loop? For example, I have a loop showing my posts into 4 columns and I need to add this class to the right column. How can I do that?
Thanks
Hi Fabio, I would need to see your columns loop in order to see what would need to be done.