Subscribe to RSS

Styling the first post of your Wordpress blog

I got several emails when I had published my new site design about how to style only the first post of the blog in Wordpress. This tactic can be handy to call out the very first post so that the readers attention is on the most recent topic for your blog. It is actually very easy, and may not be the best PHP in the world but it works perfectly.

Now the only problem with using this method is that you will have every first post on every index page styled this way. I haven’t played around with how to avoid that because that is the way I intended to design it. Perhaps someone has an idea on avoiding that if it is needed.

In your index.php file for your Wordpress theme you want to find your post container div (or whatever markup wraps your entire post). In the class area of this post you want to add a space after the first class (assuming you have a first class) and use the following PHP:

<?php if ($post != 'set') { echo 'firstPost'; $post='set'; } ?>

What this PHP will do is check to see if the variable $post is set with the string “set” and if it is not set with that string then it will echo out the class “firstPost” and then set the variable. Once the variable has been set each post afterwards will not echo out that class. Thereby creating a unique class for your first post that you can style however you want.

May be a little sloppy for the PHP gurus reading this— but it works.

Popularity: 5%

Whats Next?

  • Save to Delicious! Save the page

4 Responses to “Styling the first post of your Wordpress blog”

  1. How To StyleThe First Post Of Your Wordpress Blog | Shaun Low Says:

    […] Comments […]

  2. elena Says:

    thanks a lot that helped me how to style only the first post of the blog in Wordpress. nice site

  3. jeeremie Says:

    Hi,

    This solution didn’t work for me. Instead, I use this one »

  4. cheap website design Says:

    good point you have in there! thanks for sharing with us

Leave a Reply


Recent comments

I’ve been on a vacation, normality will happen next week

On August 28, 2008, holiday travel wrote:

well this is useful… (at least for me) very thanks ————&# 8212;———R 12;—–...

Top 10 search engine optimization techniques

On August 26, 2008, ибп wrote:

А что, неплохо!

Styling the first post of your Wordpress blog

On August 21, 2008, cheap website design wrote:

good point you have in there! thanks for sharing with us

CSS Hack:Getting Safari to behave

On August 21, 2008, Glass wrote:

You can also target Safari with the following: body:first-of-type .class {} That is: just prepend css the rule with body:first-of-type. Simple.

Styling the first post of your Wordpress blog

On August 20, 2008, jeeremie wrote:

Hi, This solution didn’t work for me. Instead, I use this one »