How to Style Individual WordPress Posts in Seconds

by admin on June 22, 2010 · 8 comments

It’s time for a really quick tip.

With art directed posts being all the rage now, everybody wants to style everything. There are plugins and custom fields and all sorts of ways to do this, but WordPress already has two not-so-popular functions that allow you to style specific posts or pages

So here they are:

Body Class

<body <?php body_class(); ?>>

This will generate something like this:

<body class="single postid-61 logged-in">

Using this you can easily change the background image of your post by targetting .postid-61 in your CSS file. You could change anything else by targetting whatever it is, such as .postid-61 li to change your lists or .postid-61 a to change your link colours.

Post Class

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

This will generate something like:

<div class="post" id="post-61">

This will allow you to style the post section in the same way by targeting #post-61. Thus you can change the p font or the h1 or anything else.

There’s a lot you can do with these tags, since your content is wrapped in post and the rest of your site is wrapped in the body class. Not all themes will have this built in, so if yours doesn’t you can just replace the body and post tags with the functions above. I didn’t go over everything you can do here because it’s almost limitless, I just wanted to make sure that you were aware of the possibilities. There are links at the bottom you can read if you want more detail on the body class. Have fun!

Note: depending on your CSS structure you may have to place !important in your tags to override others.