Styling Individual Posts Using the_ID

How many times have you typed up a post and published it, only to wish that you could style that post just a little differently than the others? One example might be a special announcement post that maybe you wanted to highlight with a unique background color. Well, we are going to take a look at one method of doing this in WordPress.

Before we get started on the details I’d like to direct you to a short read in the WordPress documentation on the

tag. I’ll wait…

Welcome back! Having read that maybe you noticed something interesting about one of the examples given for the tags usage. This tag can be used as a unique anchor identifier for each post. It can be used anywhere that you can place an ID or CLASS. Take the example they demonstrated:

I’ve highlighted the important section above. The example headline has been given a unique attribute ID using the posts numerical ID within the name so that we can reference it individually within a stylesheet.

Now that we’ve seen that let’s look at an example using a common theme that you can reference. On a default install of WordPress, you should have Kubrick installed. Log into your WordPress Admin. Now go to Presentation: Theme Editor: Select Kubrick in the drop-down menu: Main Index Template. If you scroll down while browsing the index you should see the following:

We see the familiar tag again and this time it is styling the post as a whole rather then an individual headline. How does this look when we publish? Kind of like this:

Notice the unique ID of post-150. Each post that is published will have its own number (ie. 151, 152, 153, etc.) corresponding to that individual post. Now, all we need to do is style it. To do this just open up your stylesheet and reference that attribute within the stylesheet. So in the case of Kubrick it could look something like this:

#post-150 { background: #113355; font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif; }

You could even style any specific headlines within the above ID for that post like so:

#post-150 h2 {font-family: Georgia, Verdana, Arial; font-size: 1.2em; }

One last note in regards to using this when creating your templates. In XHTML, the ID attribute must not start with a digit. Since

the_ID

returns the post ID as number, you should include at least one alphabetical character before using it in an ID attribute, hence the use of “post” within most templates.

Well, that’s it for now. We are going to come back to this later and take a look at a more flexible way of styling individual posts because as you can imagine, your stylesheet could get quite bloated if you styled a large amount of posts using this method. But it does work great for those few posts that you need styled differently and I encourage you to give it a try.