How to style the latest post in WordPress

Article Last Updated: 23^rd Apr 2010
Posted by Ruhani Rabin in PHP, Wordpress | View Comments |

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

1	while (have_posts()) : the_post();

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

1
2
3
4
5

<?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:

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

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

GD Star Rating
loading...

About Ruhani Rabin

Ruhani Rabin is the original owner and author of this blog. He also reviews web 2.0 startups at Tech2all.com. Largely interested in web 2.0 apps & Social Media. Currently the Vice President of MOL Access Portal (MOL is owner of Friendster.com). Also he is Web 2.0 & Social Media Researcher and a Total fun Geek!.. There you have it ;)

Twitter Profile: http://twitter.com/ruhanirabin

TJ
I am new at this. Can someone tell me how to, "output that variable where your post has the CSS style assigned to it"?

I see the example, but I don't know where to put that or what exactly to do with that information.

Thanks!
shag
great post. thanks. Any clue how I would do this for say the third post in the loop? so the third most recent post could have class="post-3".
shag
I actually hacked something together to accomplish my goal. I used a counter and some php combined with this script - http://wordpress.org/support/topic/323616 - which is how to show your most recent post as full text and others as excerpts.
aks
thank u for sharing. this one the interesting article which i read related to wordpress. thanks again for this.
max
wheres the code?
Ruhani Rabin
Sorry fixed now.. the code is here.. it has some issue with the new syntax highlight plugin
Marketing Advertising
Thank you Ruhani,for the effort that you made in writing this article.this post is really helpful for every blogger.i have decided to bookmark this site . Keep blogging .I am waiting for your next precious article!
Michael Soriano
Thanks for this code. This is what I used to style my free theme: http://garamond.fearlessflyer.com/
Nick
Thank you for the tip. I have been searching for something like this for quite some time. I had one question, though. What would I change to get this to work for all posts in one category? Not just necessarily the new posts.

Thanks for your help.

How to style the latest post in WordPress

About Ruhani Rabin

Last 10 posts in PHP

Random Selection

Awesome Sites

High Influence

Suggested

Members & Friends