Home Tutorials Styling Individual Posts Using the_ID

Styling Individual Posts Using the_ID

Author

Date

Updated on

Category

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:

firstexid

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:

intropost_id

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:

afterpublishing

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

5 WordPress Plugins to Increase Your Website Speed

 And if you’re an online entrepreneur, you probably know that making people wait is bad for your eCommerce business too — really bad.I mean,...

How to Show Only Images that the User Has Uploaded in WordPress

When using WordPress with multiple authors, many things need to be taken into consideration. The default permissions system leaves much to be desired, and...

Oxygen Builder Review

Free from all sorts of coding hassles and an abundance of options that cater to the users’ needs, Oxygen 2.0 is probably the best...

Basic Guide to Online Backup

A Basic Guide to Online Backup You may have heard of it, know you need it, but what exactly is it? Online backup is the...

Web Hosting Hub Review

How did it begin? Based in Virginia Beach, Web hosting hub has been on the market since 2001. If it were not for Web Hosting...

Recent comments