How to Style Individual WordPress Posts in Seconds
June 22, 2010
in Tutorials
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.
Further reading
WordPress 2.8 and the body class function
WordPress 2.8 body_class, automatic_feed_links
9 Ways to Set Dynamic Body IDs via PHP and WordPress
photo by ivan makarov
Stay Updated
You'll notice this site talks about the Thesis theme for Wordpress. Don't know what the heck that is? Find out.
Previous post: The Most Important Features for Your Premium WordPress Theme
Next post: 27 More Customizations for the Thesis WordPress Theme
{ 8 comments… read them below or add one }
Cool trick!
Thanks for sharing!
Reply
It’s a small trick but really useful, thank you
Reply
Really love this tutorial
Thanks for sharing Matt!
Reply
Yeah wordpress is definitely well thought out. I remember when i first started using it just thinking “why the hell are there all these classes everywhere”, lol well this is why ^_^
Reply
Haha yeah that’s what I thought at first too.
Reply
is there the plugin for make it to simple steps..?
Reply
Not that I know of. This is pretty simple as it is.
Reply
Perfect! I had the CSS to hide my byline, #art-2856 .meta { display:none }, but it appears without being able to set an id it would just hide everything. instead of post I used art for article as it looks like whoever set up the theme already applied your suggestion to the header. Just commenting an actual example in case someone has a similar issue. Great post!
Reply