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

Flat Design for Your WordPress Site: What Is It + 4 WordPress Flat Design Themes

Web designers in the past mostly used 3D styles for buttons that made the button seem more realistic. That all changed when flat design...

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

Recent comments