Styling Individual Post

In a previous post I showed you how to apply a specific style sheet to particular pages or categories. (See Create Pages With a Different Style Sheet) In this post I'll show you how to style an individual post such as I have done with this one. Why do that? For several reasons. Perhaps you have some type of announcement to make or maybe you just want to draw attention to a particular post.

In WordPress we can accomplish it easily thanks to this tag ...

<?php the_ID(); ?>

This tag assigns a unique ID number to each individual post and because of this unique identifier styling becomes simple. If you don't know what I'm talking about here is an example. My theme's index.php makes use of the tag in this way ...

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

Because the entire post is contained within its own DIV any styling I apply to it will affect the entire post. Upon checking the source code of this post in your favourite browser you will see ...

<div class="post" id="post-1135">

Note the ID "1135" which is unique to this post. Armed with that little nugget of knowledge let us wander over to the style sheet. Somewhere in style.css add ...

#post-ID# {your styling attributes}

To achieve the look this post has I added to style.css ...

#post-1135 {background:#FFFEE0;font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;}
#post-1135 .entry p a{color:#FF0055;}
#post-1135 h4 {font:.8em Verdana, Arial, 'Lucida Grande' , Sans-Serif;color:#555;}
#post-1135 h4 a:link {color:#FF0055;text-decoration:none;}
#post-1135 h4 a:hover {color:#FF0055;text-decoration:underline;}
#post-1135 h2 a{width:100%;display:block;outline:none; color: #55D580;}
#post-1135 h2 a:hover{color:#000;text-decoration:underline;}

Now of course you wouldn't do this for a bunch of different posts for your style sheet will become HUGE after time but it comes in handy for the odd post here and there. As always, the Codex is a rich resource for all things related to WordPress and is a must read.

Editor's note: This site has undergone a redesign since this information was published. Consequently a live example is not available at this time.

post
About Len Kutchma

Len has been blogging for over 10 years and is a rabid WordPress fan. In addition to blogging here you can find him writing the occasional article and toiling away in the forums at WeblogToolsCollection.com. He also hangs out at the WordPress support forums lending a hand where he can. Be sure to follow @wpcanada on Twitter.

Please Note: WPCanada is a moderated community. Please read the Comment Policy.

What Do You Think?

*