• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
wpdesigner-logo

WPDesigner

WordPress Themes, Blog Design, and Web Development

  • News
  • Tutorials
    • Theme Development
    • WordPress Tips
  • Resources
  • Reviews
    • Hosting Reviews
  • Collections
    • Plugin Collections
    • Theme Collections
  • Contests
  • WWMD
  • Our Themes
  • Login
WPDesigner » Tutorials

Styling Individual Posts Using the_ID

Last Updated on February 19, 2018 by Jazib Zaman

firstexid

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

<?php the_ID(); ?>

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.

About Jazib Zaman

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

  • LinkedIn
  • Pinterest
  • RSS
  • Twitter

Recent Posts

  • Secure Your WordPress Admin Area with Some Reliable Tools
  • What is SEO and How Does it Work?
  • 40+ Solutions to Supercharge Your WordPress Website
  • Create Your Own Website or Outsource to a Web Studio?
  • 4 Things You Will Need for a Successful Career in the Tech Industry

Copyright © 2022 · All Rights Reserved · A Project of TechAbout LLC.
All of our themes are 100% GPL compatible.

  • About
  • Write for us
  • Archives
  • Contributions
  • Privacy Policy
  • Feedback
  • Terms & Conditions