WPDesigner

Jun.12.2007

Styling Individual Posts Using the_ID

Filed under: Tutorials

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:

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 lets 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 thats 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.

What's Next?

Craig:

#1 of 45
2007.06.13

Great tip! You can use to style individual comments in the same way.

“Congratulations! You’ve our 1′000′000th commenter!”

I’d like to know if that was me.

Craig:

#2 of 45
2007.06.13

That meant to say…

You can use

comment_ID()

to style individual comments in the same way.

Small Potato:

#3 of 45
2007.06.13

I’d like to see alternate background colors, author highlight, and single comment styling, all on one page :).

Craig - You were comment number 2698 and 2699.

brian:

#4 of 45
2007.06.13

There is an even more flexible way of doing this that I’ve been using for awhile. I’ll post it soon.

After that I’ll take a look at styling comments in various ways. Including author comments, ec.

DanGayle:

#5 of 45
2007.06.13

I saw a complicated way to style every other post by adding a weird PHP call. Is there a way to do that using css only, or in a less complicated manner?

brian:

#6 of 45
2007.06.13

There is. You’ll see;)

Oriri:

#7 of 45
2007.06.13

@ brian: I’d love to see that in the next few days or so.

Small Potatoes, I just wanted to say thank you for taking the time to fill this blog with a ton of incredibly useful info. Despite what your stat tracker may say, I swear I’m not stalking you - I just reference this site frequently for bits of information I haven’t found elsewhere!

brian:

#8 of 45
2007.06.13

@ Oriri: I’ll try to have it up by the end of the week. If not then I’m sure by next week. I’m going to try and make it as complete as possible.

Oriri:

#9 of 45
2007.06.13

@brian: That would rock, but seriously, no pressure! I’d love to read how you worked it! If it works as well as you hinted, I’m hoping it will be exactly what I need for a theme I’m working on for my blog.

(But I’ve got so much work left to do on the theme, before I hit the point in coding where I can use the background alternating, that you’ll probably have your post and blog done long before I finish this theme! )

Thank you as well for the response, and can’t wait to see what it is you’ve figured out! I can’t help but wonder if it will help me get what I’m hoping to do, done…

Jenny:

#10 of 45
2007.06.13

That’s pretty awesome. But is there a way to do that with certain catagories? Because as soon as I read this, I was thinking, if it could be done, I would like to style my BLOGATHON posts to be nifty and stuffs.

brian:

#11 of 45
2007.06.13

@Jenny: There is a way to do it with certain categories actually. I might make that post first as it will be more simple to explain.

Goob:

#12 of 45
2007.06.16

Yeah, I’d like to see this done with a certain category that I use only for important announcements and stuff. But even still, I had no idea you could do this with even individual posts. Good to know!

brian:

#13 of 45
2007.06.21

@Goob the category based styling should be posted soon.

Styling Posts by Category and Category-Specific Images » WPDesigner:

#14 of 45
2007.06.22

[…] my previous post, the question came about if posts can be styled for a specific category. Well you’ll be happy […]

proxy:

#15 of 45
2007.08.20

aha… that’s a great tip.

» Wordpress ierakstu izskats @ Atoma pieraksti:

#16 of 45
2007.09.18

[…] via: wp-designer […]

Svaigs.lv » Blog Archive » Wordpress ierakstu izskats:

#17 of 45
2007.09.23

[…] via: wp-designer […]

| Wordpress ierakstu izskats:

#18 of 45
2007.09.23

[…] via: wp-designer […]

Blogbuster: Ð±Ð»Ð¾Ð³Ð¸, blogs, blogging, RSS, Wordpress, ÑÐ¾Ñ†Ð¸Ð°Ð»ÑŒÐ½Ð¾Ðµ:

#19 of 45
2008.01.25

25 Ð½ÐµÐ¾Ñ‚ÑÑ‚Ð¾Ð¹Ð½Ñ‹Ñ… Ñ…Ð°ÐºÐ¾Ð² Ð´Ð»Ñ WordPress

25 hacks para dinamizar seu Wordpress! — Bytes a Go-go!:

#20 of 45
2008.01.25

[…] Estilos diferentes para cada post. Ã‰ bastante comum, tanto para posts que merecem destaque quanto para comentÃ¡rios. Faz aquela “zebra” nos comentÃ¡rios, sabe? Cor sim, cor nÃ£o. […]

Blog Verde » 25 Hacks pra dinamizar o Wordpress:

#21 of 45
2008.01.27

[…] Estilos diferentes para cada post. Ã‰ bastante comum, tanto para posts que merecem destaque quanto para comentÃ¡rios. Faz aquela â€œzebraâ€ nos comentÃ¡rios, sabe? Cor sim, cor nÃ£o. […]

63 Essential Wordpress Hacks, Tutorials, Help Files and Cheats | Speckyboy - Wordpress and Design:

#22 of 45
2008.03.08

[…] Styling Individual Posts Using the_ID (Source: WP […]

63 essenziali Wordpress Hacks, Tutorials, Help Files e Cheats : technorati.it:

#23 of 45
2008.03.12

[…] Styling Individual Posts Using the_ID (Source: WP […]

Wordpress Tutorials/Hacks « The house of software freeware:

#24 of 45
2008.03.13

[…] Styling Individual Posts Using the_ID (Source: WP […]

WordPress Talk - March 23, 2008:

#25 of 45
2008.03.23

[…] explains how to style individual posts using the post ID. This is an older post, but one I just discovered and I think it goes a long way towards showing […]

63 Essential Wordpress Hacks, Tutorials, Help Files and Cheats | Speckyboy - Wordpress and Design » ???(JASMIN):

#26 of 45
2008.03.23

[…] Styling Individual Posts Using the_ID (Source: WP […]

Wp Wordpress » Blog Archive » WordPress Talk - March 23, 2008:

#27 of 45
2008.03.23

[…] explains how to style individual posts using the post ID. This is an older post, but one I just discovered and I think it goes a long way towards showing […]

155 Wordpress Resources, Tutorials, Plugins, Themes, AJAX, Podcasting…WP Monster List | Speckyboy - Wordpress and Design:

#28 of 45
2008.04.27

[…] Theme Hacks. 84. No More CSS Hacks. 85. Create a Dynamic Sticky. 86. Styling Individual Posts Using the_ID. 87. Show Category Images. 88. Separate WordPress Comments and Trackbacks. 89. Customize your […]

155? WordPress ????????????AJAX???…… —— WP ??????? | ???????:

#29 of 45
2008.05.16

[…] ???? 83.WordPress Theme Hacks 84. No More CSS Hacks 85. Create a Dynamic Sticky 86. Styling Individual Posts Using the_ID 87. Show Category Images 88. Separate WordPress Comments and Trackbacks 89. Customize your […]

155? WordPress ????????????AJAX???…… —— WP ???? | Awesomer:

#30 of 45
2008.06.06

[…] WordPress ????83.WordPress Theme Hacks84. No More CSS Hacks85. Create a Dynamic Sticky86. Styling Individual Posts Using the_ID87. Show Category Images88. Separate WordPress Comments and Trackbacks89. Customize your WordPress […]

IndoProTech.com:

#31 of 45
2008.07.06

[…] 33. Styling Individual Posts Using the_ID […]

IndoProTech.com:

#32 of 45
2008.07.06

[…] 33. Styling Individual Posts Using the_ID […]

elbandito.us » Blog Archive » Tutoriale si hack-uri pentru wordpress ( lista mare ):

#33 of 45
2008.07.11

[…] Styling Individual Posts Using the_ID ( Sursa: WP […]

63 correções, tutoriais, arquivos de ajuda e dicas essenciais para Wordpress | Rafael Bernard Araújo:

#34 of 45
2008.07.11

[…] Individualizando o post usando the_ID (Fonte: WP […]

Wordpress ierakstu izskats:

#35 of 45
2008.07.12

[…] via: wp-designer […]

WordPress Developer’s Toolbox | Developer's Toolbox | Smashing Magazine:

#36 of 45
2008.09.15

[…] Styling Individual Posts Using the_ID If you want to get creative, individual posts can be styled differently by using the post ID assigned by WP. […]

Andrei Gonzales:

#37 of 45
2008.09.15

I stumbled upon this gem of tip via Smashing Mag.

What I wanted to ask was: is there a way to make the loop call the specific stylesheet for that post? After 100 individually styled posts, a single stylesheet would be incredibly fat. Isn’t there a way to separate the main one (header, sidebar, footer, body), from the post-specific one?

-Andrei

Andrei Gonzales:

#38 of 45
2008.09.15

^^^ - Actually, scratch that. I think I just figured it out (was too lazy to use my brain 5 minutes ago )

WP?????-2.8: WordPress???? | ????:

#39 of 45
2008.09.18

[…] Styling Individual Posts Using the_ID […]

Wordpress ile ilgili 155 kaynak « YEAH28 - Her ?ey Sizin ?çin:

#40 of 45
2008.09.19

WordPress Developer’s Toolbox | rafdesign:

#41 of 45
2008.09.20

[…] Styling Individual Posts Using the_ID If you want to get creative, individual posts can be styled differently by using the post ID assigned by WP. […]

Best of WordPress Tutorials – More than 100 recourses | Tutorials | .:Lirent.net Hacks:. | All about Web 2.0, SEO, PHP5, Ajax, Adsense, Unix/Linux, Free Stuff, OpenSource, Designs, Wordpress, Hi-Tech etc:

#42 of 45
2008.09.28

[…] Styling Individual Posts Using the_ID […]

30+ (More) Most Wanted Wordpress Tips, Tricks and Hacks | Wordpress:

#43 of 45
2008.10.04

[…] Styling Individual Posts […]

30+??????WordPress????? | ??|??:

#44 of 45
2008.10.05

[…] 14?Styling Individual Posts ??????ID????????????????????????????? […]

EggFire Inc » Blog Archive » 30 Most Wanted Wordpress Tips, Tricks and Hacks:

#45 of 45
2008.10.14

[…] Styling Individual Posts […]

Comment Policy

Theme support questions should be posted at the support forums.
Name and Email are required. Email is never published.
You grant this site perpetual license to reproduce your words and name/website in attribution.
Inappropriate comments will be removed at my discretion.

Styling Individual Posts Using the_ID

Club Statistics

Categories

Author