Styling Different Posts in Different Ways With Post_Class
63With WordPress 2.7 came the post_class function. This gives a set of CSS classes to a post, depending on what’s in the post (e.g. based on what category it is in).
The code that you use in your template to use this is simply like this:
1 | <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> |
While this is a fantastic function for changing a post’s display, the classes that it outputs are actually quite limited. Luckily, we can add our own, and we can also add our own dynamic classes.
Basically what I mean by this is that by using some extra lines of PHP, we can add our own classes into the post_class
function depending on some other post information.
The default classes that are output are:
- post-id, where id is the post’s id
- post type, which by default are post, page and attachment
- sticky, for posts marked as sticky on the post write panel
- hentry, for hAtom compliance
- category-category-name, so if your category was wordpress, it would be category-wordpress
- tag-tag-name, so if your tag was php, it would be tag-php
NB. This post uses some functions only introduced in WordPress 2.8.
Author Styling
A lot of blogs style their authors’ comments differently to visitors’ comments, so why not style one author’s posts differently to another’s?
First of all, to get the author of the post, add this line before the start of your loop.
1 | <?php $author = get_the_author_meta('display_name'); ?> |
- This creates a new variable called $author…
- And assigns the value of get_the_author_meta to it, specifically the author’s display name.
If you want to use other aspects of the author’s meta, take a look at the get_the_author_meta entry in the codex.
And then to add that as a class to post_class, add this line:
1 | <?php post_class('box ' . $author); ?> |
- As an example of a static class in conjunction with this dynamic class, I’ve added the arbitrary ‘box’ class.
- Note the space before the closing apostrophe; this ensures that there is a space between it and our dynamic class.
- We concatenate our author variable to output the name of our author as a class.
We can now style each post depending on the author. Just as an example, we’ll change the border colour.
1 2 3 4 5 6 | .Alex { border: 1px solid #0066CC; } .Martin { border: 1px dashed #CC0000; } |
Show Post Popularity with CSS
This is a little more complicated, but ultimately, we’re going to use the amount of comments on a post to produce a different class accordingly.
You may wish to change these numbers to suit the average number of comments you get on a post to determine what is more popular, but the concept remains the same.
To get the amount of comments we need to add the following code, this time inside the loop.
1 2 3 4 5 6 7 8 9 10 11 12 | <?php $postid = get_the_ID(); $total_comment_count = wp_count_comments($postid); $my_comment_count = $total_comment_count->approved; if ($my_comment_count <10) { $my_comment_count = 'new'; } elseif ($my_comment_count >= 10 && $my_comment_count <20) { $my_comment_count = 'ermerging'; } elseif ($my_comment_count >= 20) { $my_comment_count = 'popular'; } ?> |
- We create our first variable and set the post’s ID as its value.
- Using that variable we can access the comment count for that post using wp_count_comments, assigning that to another variable.
- That function gets all comments, whether spam, awaiting moderation or approved, but luckily we can say to only get the approved count using
->approved
. - Now we can test the value of the
$my_comment_count
variable using php operators.
Now for each class we have created, we add a CSS rule. Because the point of this is to show an article’s popularity visually, it makes sense to use some kind of spectrum, I’m using yellow to red.
1 2 3 4 5 6 7 8 9 | .new { border: 1px solid #FFFF00; } .emerging { border: 1px dashed #FF9933; } .popular { border: 1px dashed #CC0000; } |
Custom Fields
To get the ultimate control over a post’s display we can turn to custom fields.
First of all we add a custom field value and key pair to our post:
So in this case, we add two classes, showing my mood when I wrote the post, and what the weather was doing. Just to show how that can be used, we can add some CSS to show a background for the weather.
1 2 3 | .raining { background: transparent url('images/raining.jpg') no-repeat right bottom; } |
We can use the following code to get our custom field:
1 | <?php $custom_values = get_post_meta($post->ID, 'post-class'); ?> |
Remembering to add the $custom_values variable to our post_class function.
Taking the idea further
Some other ways you can use post_class dynamically are with the_time, checking for differences in the_time and the_modified_time or even with word count. See what interesting ways you can come up with to change a post’s display depending on some of its dynamic aspects.
Enjoy this post? You should follow me on Twitter!
[…] You can check out the article here: Styling Different Posts in Different Ways With Post_Class. […]
cool tutorial!!
i’m wondering is it possible to create different class for posts with different age?
i mean, for example, posts older than 3 months has different class with younger posts
Thanks reza, glad you enjoyed it! One of the easiest ways to do that would be to use a ‘time since’ plugin, such as Binary Bonsai’s to store a variable similarly to how we did with the comment count method.
In other words, you would use the plugin’s function to create a variable again. Have a look at that and comment back if you need any further help!
Grade A stuff. I’m unqusiteonably in your debt.
OU888x ootxmgjqeroj
alex, it works!!
i can create different classes for different age posts
i edited the plugin function, and make hours as its output value
and then i use your comment count method
may be i’ll use it in our next themes
thanks to you man, you r the best
and thanks to time_since creator too
Awesome! Glad you got it to work.
Should I add the $custom_values variable before the function or after? I’m not clear where to put this variable.
Hi Pat, you would end up with something looking like this:
Followed by the rest of your loop. Let me know if you need any further pointers.
Oops, sorry that should be:
Then followed by the rest of your loop.
wow .. this is nice trick.. but i want to know is there any possible way to show different css styles of excrepts in index page.. for eg. alternative colors for individual excrepts with these codes?? if so please any one explain me..
Hi vinoth, yeah, that is possible, but is a little tricky.
You have to use get_the_excerpt and add your own
tags. Then you can use the same concept to add the classes there. This is because the_excerpt already has paragraph tags attached.
Very useful WordPress styling tips. I’m a huge fan of the custom fields. That was one of WordPress’s best improvement.
Thanks Adam, yeah, custom fields bring so much to the table when coding a theme, they’re a life saver at times!
Thanks for a great article! That’s some more tricks for the toolbox.
[…] David – Styling Posts […]
[…] Those of you who read my blog regularly will know that I recently wrote an article for PBD on the post_class function […]
[…] Styling Different Posts in Different Ways With Post_Class | Pro Blog Design — Great way to differentiate posts in addition to the usual standards of category, tag, etc. […]
Are threshold values of the required amount -high multiples of the average heat energy kT – reasonable, are they within the range known from ordinary chemistry? ,
Hi Alex,
This is definitely a great post. We are re-developing our site and I am now thinking on ways to small but distinguishing elements to differentiate the posts. Maybe differentiating by category would be the best.
Very cool. The styling for different authors is a good idea.
Hi Alex,
Thanks for this tutorial, I can use it to my blog too. You have explained it clearly that I think even a high school can do it. To give more variation to a blog this is really a good idea.
That’s really cool! I like the idea to define different styles for content-elements like blog-comments.
[…] Styling Different Posts in Different Ways With Post_Class […]
[…] Styling Different Posts in Different Ways With Post_Class […]
[…] pleins d’autres classes utiles en fonction du contexte dans lequel vous vous […]
[…] Styling Different Posts in Different Ways With Post_Class […]
[…] Styling Different Posts in Different Ways With Post_Class – Pro Blog Design […]
I appreciate the work that your are doing!!
Hey, I was searching for how to Style WordPress posts and I came across your article and did a few more searches on google. I came across the exact same one on another site:
http://www.wordpressurls.com/styling-different-posts-in-different-ways-with-post_class/
Just wanted to make you aware!
I usually do go through the spam filter, so even the simple fact you have a Gravatar will help any future comments of yours stand out for me
I’ll have another look at Dagon Design
[…] EpicAlex of ProblogDesign WordPress Codex Super Loop by Perishable […]
[…] EpicAlex of ProblogDesign WordPress Codex Super Loop by Perishable […]
[…] Diferentes estilos usando post_class […]
[…] Diferentes estilos usando post_class […]
WordPress is a fantastic platform and I too have taking some of your instructions for my little box of tricks.
[…] Styling Different Posts in Different Ways With Post_Class […]
Very useful post indeed. Your article has giving me a few ideas on how to improve my plugin, thanks for that!
Great post, it is so clear to follow, thanks. I like the idea to define different styles for content-elements.
good post ,thanks! This article was Very helpful. i like your website,I am fond of reading online punjabi news.
Alex, this is perfect both example and your imagination, I got a lot idea to improve my poor design blog for new years.
Happy new year in London.
[…] Styling Different Posts in Different Ways With Post_Class […]
[…] Styling Different Posts in Different Ways With Post_Class […]
[…] 134. Styling Different Posts in Different Ways With Post_Class […]
[…] 134. Styling Different Posts in Different Ways With Post_Class […]
[…] 134. Styling Different Posts in Different Ways With Post_Class […]
[…] 134. Styling Different Posts in Different Ways With Post_Class […]
[…] 134. Styling Different Posts in Different Ways With Post_Class […]
Nice tutorial mate!
thanks for this.
[…] Styling Different Posts in Different Ways With Post_Class […]
[…] 134. Styling Uncommon Posts іn Uncommon Ways Wіth Post_Class […]
[…] A Different Way Of Looking At Things A Different Way Of Looking At Things Talk about a different way of looking at things… Proudly pres…g>… […]
Great post, it is so clear to follow, thanks. I like the idea to define different styles for content-elements.Küstenpatent,
[…] Styling Different Posts in Different Ways With Post_Class […]
Hi, thanks for a great post! I am trying to implement this code but just cant get it right :(
I have a custom post type called hotels
A custom field called Featuredhotels
And a field value of Featuredhotel which I want to highlight in results.
Any pointers would me amazing….!
!!! The best pills!Huge selection !!!
Low prices!Discounts!
Link to the best of our pharmacy http://tinyurl.com/bbeesstt/
Ordering the analysis term papers, you should watch out because of the phony web writing services. Therefore, that’s needed to make a deep examination of the custom research papers service.
[…] 134. Styling Different Posts in Different Ways With Post_Class […]
The story was great
I want to style posts based on category difference .
i have 5 main category and i want to change the color of headings .
please help .
Offshore Russia it company is the only firm to offer buyers the wide spectrum of high quality production and services, so if you are interested in collaborating with this agency, merely go to home page (worldsystems.com).