How to style individual posts differently using category name.

How to style individual posts differently using category name.

Normally on a blog every post is styled uniform. But wont you think it would be nice if you could style these posts differently. One way to do it is to retrieve the post-ID and then apply style to it. But it is a painstaking process and you would have to repeat the css edit every time a new post is made. Here I am concentrating on a different method. It is by exploiting the post_class(); feature added to WordPress since 2.7. The post loop markup using post_class(); features is given below.

<div> id="post-"&gt;</div>

The post_class() generates dynamic class names for each post. They are,

  1. .post ( default class assigned to posts)
  2. .hentry ( hAtom microformat pages)
  3. .sticky
  4. .category-x ( x is the category slug )
  5. .tag-x ( x is the tag name )

For example ,if you have a post assigned to a category named “games”, that particular post will have a generated class called .category-games. You can style all posts belonging to the “games” category with a different style.

.category-games{
      background:#fff;
      border:1px dotted #ff0000:
}

Following the same example you can style all your sticky posts and post with tags differently. I am using a similar techniques on my site to give different color ribbons on posts.

  • bb

    That’s really useful, thanks.
    Keep on updating.

  • bb

    That’s really useful, thanks.
    Keep on updating.

  • rbl

    that is what I looking for
    thank you!

  • rbl

    that is what I looking for
    thank you!

  • JC

    Thank you Jinsona
    keep up the updates and happy you got your website up and running again

  • JC

    Thank you Jinsona
    keep up the updates and happy you got your website up and running again

  • Thank you for the details

  • Thank you for the details

  • That’s really useful. I might try to implement this on my site.

    If I have a category named Love & Relationships with a slugline love-relationships then what do I use for the class name

    e.g. Is it: .category-love-relationships
    .category-love&relationships
    .category-love-&-relationships

    This is probably a stupid question but I am STUPID when it comes to CSS.

  • That’s really useful. I might try to implement this on my site.

    If I have a category named Love & Relationships with a slugline love-relationships then what do I use for the class name

    e.g. Is it: .category-love-relationships
    .category-love&relationships
    .category-love-&-relationships

    This is probably a stupid question but I am STUPID when it comes to CSS.

  • Great suggess. Thanks!

    It would be great to be able to create posts / pages that dont’ have left or right columns. Large space for big images. : )

    Your themes are some of the best ever. But someone says there’s possibly malware in the footers according to Google… Hope they’re wrong!

    Happy New Year All!

  • Great suggess. Thanks!

    It would be great to be able to create posts / pages that dont’ have left or right columns. Large space for big images. : )

    Your themes are some of the best ever. But someone says there’s possibly malware in the footers according to Google… Hope they’re wrong!

    Happy New Year All!

  • yes yes … i want that ….. really gr8….

    keep updating this type tips….

    its really help full

  • yes yes … i want that ….. really gr8….

    keep updating this type tips….

    its really help full

  • hi, is this possible to do with pages? so one page can have different style than other?

  • hi, is this possible to do with pages? so one page can have different style than other?

  • aman

    hey web2feel. I had a question about clickable thumbnails.How to get them on a theme like stitchpress or multichrome.

  • thanks you details god :))))

  • Here elaborates the matter not only extensively but also detailly .I support the
    write's unique point.It is useful and benefit to your daily life.You can go those
    sits to know more relate things.They are strongly recommended by friends.Personally
    I feel quite well.. http://www.prada-outlet-store.com

  • Good idea:) You are very clever.

  • Louis vuitton
  • This is very useful,.Thank you for the information..It helps me a lot because i love to have creative and futuristics style of my blog!..

  • Very useful post indeed. Why don’t you publish some wordpress themes with your awesome ideas and functionality. I would be great success.

  • Very useful post indeed. Why don’t you publish some wordpress themes with your awesome ideas and functionality. I would be great success.

  • Very useful post indeed. Why don’t you publish some wordpress themes with your awesome ideas and functionality. I would be great success.

  • Very useful post indeed. Why don’t you publish some wordpress themes with your awesome ideas and functionality. I would be great success.

  • Very useful post indeed. Why don’t you publish some wordpress themes with your awesome ideas and functionality. I would be great success.

  • Now you can also apply styles to the individual blogs also after reading this one…Informative post

  • TakLeaRn

    very nice
    Thanks