Styling Specific Posts On Your Blog

One of the many, many smart things that WordPress does is apply the ID of posts to the div of that post. Most themes leave this intact, although I have seen some themes that remove it. This is how the container div for posts should look like:

<div class="post" id="post-<?php the_ID(); ?>">

One of the reasons WordPress does this is for linkability. ID’s have that special ability to “skip down the page”, so if you wanted to link to your homepage, but make sure it skips down to a particular post, you could link to it like:

http://yourblog.com/index.php#post-465

Just view the source on your homepage and find the div with the post you are looking for to find the ID.

The other awesome thing this unique ID lets you do is apply styling to only specific posts. Let’s say you have an image in a particular post that you want to put a big fat red border on. I’m sure that happens to you all the time, right? Well there is a way to apply that styling to only the image in that post and not affect images in other posts. Just use the ID! Check it out:

#post-465 img {
   border: 10px solid red;
}

Make sure that the ID is being applied both on your homepage (index.php) as well as your individual post pages (single.php).

Written by Chris Coyier from CSS-Tricks
Posted on January 25th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

1