Post Pic

fahirsch asked: “How to style posts individually?”

One of WpRecipes readers, fahirsch, asked in the forum how to be able to style posts individually and add specific backgrounds. Here’s the answser to fahirsch question.

To be able to style posts individually, you have to edit your single.php file and find the line starting with:

<div class="post">

Simply change this line to:

<div class="post" id="post-<?php the_ID(); ?>">

Once you saved the file, you can style an individual post by using the #post-XXX id:

#post-112 {
    background: #113355;
    color:#069;
    font-weight:bold;
}

Done! Easy, isn't it?

Related Posts

Related Posts

No related posts.

21 Responses

Feb 04 2009 09:26

Thank you for the tip.. that was easy.

What if we need to alternate the style for odd and even posts. May be use the loop to set the active style?

Feb 04 2009 11:07

Where do you insert the new style ? In the style.css ?

Feb 04 2009 12:53

Nice! And to answer Sarbjit: Aside from style.css, look at “How to: Embed CSS…” above.
Another solution would be if someone knowledgeable, please, made a plugin to keep track of all styles

Feb 04 2009 22:12

Such a simple little trick!

Feb 05 2009 08:33

Don’t forget about the new post_class function in WordPress 2.7.

So, instead of using use .

It will give you much more control over your unique post designs.

Feb 05 2009 08:34

Should have known that wouldn’t work.

Instead of

the_ID();

use

post_class();

Feb 05 2009 08:37

Damn, I forget that the new function cannot be used in conjunction or with another.

This is what I use in all of my themes:

[div id="single-[?php the_ID(); ?]” [?php post_class(); ?]]

Just change those brackets.

Feb 05 2009 20:47

Do you mean having a unique background for your posts?

Ben

Feb 06 2009 00:00

The idea is to have the possibility of having different styling for each post. I asked for backgrounds, but this is more general. Of course if you style every post I’m sure it will be absolutely awful.

Feb 06 2009 17:59

what i miss currently in wordpress is an option to choose extra-templates for SINGLE POSTS like I can for PAGE POSTS. is there a workaround to use predefined SINGLE POST TEMPLATES.

this hack here is nice, but only working for some posts and i have to edit the css-file each time…

Feb 06 2009 21:01

@mo: Yeah, such option should be great! Try the “post template” plugin :)

Feb 07 2009 13:16

@Jean-Baptiste Jung: another plugin ;) ok, thanks for the hint, i will try it.

Mar 13 2009 18:08

small yet best !!

Apr 15 2009 08:13

Nice lil trick.. Love your site :)

Jul 17 2009 04:02

How if I used conditional tags to display another stylesheet that different?

Ex:
if is home, displayed style1.css
else if is_single(array(post ID)), displayed style2.css

Sorry for my bad english.

Nov 27 2009 08:35

Try the “art direction” plugin. you can specify styles to be included where ever the post is shown or only in single post view. You can use it to like to a separate css file or put the css right into it. It also works with javascript. It inserts the code after the wp_head() hook and so overrides any styles above it. Pretty nice plugin.

Trackbacks:

Leave a Comment

* Name, Email, Comment are Required