Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Style Each WordPress Post Differently

Last updated on by
Follow WPBeginner on YouTube
How to Style Each WordPress Post Differently

Have you ever came across a site that style their posts differently? Some sites have different sticky posts highlighted whereas others have each category post styled with a different color, or some may even have a totally unique outlook altogether. Well, that is exactly what we are going to cover in this article. We will share how you can style different WordPress posts in different ways. So what are we going to use? We will use a function called post_class. Post Class function prints out different post container classes which can be added, typically, in the index.php, single.php, and other template files featuring post content.

Note: This tutorial requires that you are somewhat familiar with WordPress theming, and know fairbits of HTML / CSS.

When you open your index.php file, or another file with a loop, you will normally see something a div with post-id, but we are adding a new variable post_class to it like shown in the example below:

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

By adding this function in the div, each of your posts will get specific css classes added to them which will allow you to modify the looks of your WordPress posts via CSS. The following classes are added by default:

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name

An example output would look like this:

<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in">

So if you open your style.css file and add the class .category-dancing, you will be able to make your posts from the dancing category look different in the post.

.category-dancing{background: #97c3e1; border: 1px solid #84aac4;}

This will make your dancing category posts have a blue background with a dark blue border. You can further this by adding a different link class for .category-dancing etc. You can use the same technique to make posts with a specific tag look different.

But for someone who is looking to really customize the look of their site might need additional controls in terms of classes. Well, you can specify the classes if you wish like so:

<?php post_class('class-1 class-2'); ?>

But, how will this work on a dynamic platform like WordPress? So let’s look at some examples of how you can add classes to make your posts look different.

Style Posts Based on Authors

Often you will see that blogs highlight author’s comment differently. Well for multi-author blogs, it might be a good idea to give each author’s post a different style altogether. So in this example, we will give each post it’s own styling based on author’s first name. So in your index.php or another file (archive.php / category.php etc), lets get the author’s first name value by adding this code BEFORE the loop:

<?php $author = get_the_author_meta('display_name'); ?>

The code above is getting author’s display_name which can be selected in user’s profile area, and it is assigning the value with $author variable. Now that we have a dynamic class value created, we can add it in our post_class code like this:

<?php post_class('class-1 class-2 ' . $author); ?>

Note: You do not have to keep class-1 and class-2. That is just if you want to add static classes. So your code should output something like this:

<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in class-1 class-2 Syed">

Notice that Syed is added in final output. The name will be different on each post based on the author’s display_name. You can then style each class in your CSS like so:

.Syed{border: 1px solid #000;}
.Zain{border: 1px solid #d88b3d;}
.Dronix {border: 1px solid #4781a8;}

Then each post in the loop with these authors will be styled differently. You can further the individual styling using the technique above for other authors on your site.

Style Posts Based on Popularity using Comment Count

You have seen sites with popular posts widgets, which are mostly based on comment counts. Well in this example, we will show you how to style posts differently using the comment count. First thing we need to do is get the comment count and associate a class with it. To get the comment count, we need to paste the following code INSIDE the loop:

<?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';
	}
?>

In the code above we are adding classes based on a scale. If the post has less than 10 comments, then the class ‘new’ will be added. If the post has greater than 10 comments and less than 20 comments, then the class ‘emerging’ will be added. If the post has greater than 20 comments, then the class ‘popular’ will be added. You may change this scale based on your site’s average comment rate.

So your post_class code will look like this:

<?php post_class('class-1 class-2 ' . $my_comment_count); ?>

Then you can create the following classes in your style.css file:

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

Notice that we are only changing the border colors, but you can go in much more depth with this including adding a custom background image, background color etc. This will spice up your theme and make the blog page stand out.

Want more control over the CSS classes? Well then we can look at a way that you can assign classes via Custom fields.

Style Posts based on Custom Fields

You can add specific classes via post custom fields. So for example, it is your blog’s anniversary and you want the anniversary post to look different. You can create a custom field and give it the name ‘post-class’ and then add the value ‘anniversary’. Once you add this custom field and save the post, this value is stored in your database. Now we can pull it from our loop using the code below:

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Make sure you paste the code above INSIDE the loop. Then you will add the $custom_values variable to post_class function.

<?php post_class('class-1 class-2 ' . $custom_variable); ?>

Now you can go to your style.css file and add the class such as:

.anniversary{YOur Styling Goes Here}

This is by far the most control you will get with post_class function in terms of CSS styling. But sometimes, you want even more control. CSS classes lets you change the background and other stylistic elements, but you cannot change the entire structure this way. So let’s look at something a little bit more advanced which we like to call THE SUPER LOOP.

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
          
 Add your Custom Post Divs Here for the 1st post. 

<?php elseif ($count == 2) : ?>      
  
 Add your Custom Post Divs Here for the 2nd post.          
          
<?php elseif ($count == 3) : ?> 

 Add your Custom Post Divs Here for the 3rd post.      

<?php elseif ($count == 4) : ?>  

 Add your Custom Post Divs Here for the 4th post.     
          
<?php else : ?>
   
 Add your Custom Post Divs Here for the rest of the posts. 

  <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

If you notice that we just created a loop above that lets you style each post based on count. This is very helpful when you want your first three posts to look different from the rest. For example, your first three posts can be one column posts whereas the rest will be smaller and in a two column list. You can accomplish almost everything with the super loop. You can add your own queries and much more. If you are a developer, then this will be worth taking a stab at to push the limits.

Sources:

EpicAlex of ProblogDesign
WordPress Codex
Super Loop by Perishable


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Nadeem

    Thanx alot bro..its very helpful

  • Es piat

    Hello, following instruction is wrong:

    “… lets get the author’s first name value by adding this code BEFORE the loop:”

    The problem: You can’t get an value for this line of code OUTSIDE the loop without specify an ID:
    get_the_author_meta(‘display_name’);

    From the Codex (http://codex.wordpress.org/Function_Reference/get_the_author_meta):

    “If used within The Loop, the user ID need not be specified, and the displayed data is that of the current post author. A user ID must be specified if used outside The Loop.”

    greeting Es piaT

  • RW

    yet another bookmark! great post! thank you…

  • Payal

    Very informative, thank you. I’ve bookmarked this page.

    I also have a question: What if I wanted to style the first (latest) post differently — so that the post displayed at the top of my index page shows up differently?

  • James

    Hey there, I’m struggling with this atm..

    My post loop doesnt seem to have a post_class function so I cant figure out where to place the above code…

    This is the loop I use for posts, where would I place the above code? Or how could I get custom fields to work using this?

    • http://www.wpbeginner.com Editorial Staff

      You have to add something like this on your post loop:

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

    Hello, I am quite new to making WordPress themes and I am looking for a way to display each post in a box of its own which is seperated by a margin top and bottom. Please explain how this is possible.

    Thanks

    • http://www.wpbeginner.com Editorial Staff

      By default each post is inside its own div element. You just have to use CSS to add margin-top and bottom.

  • Shaun

    Curious, how could this be applied to adding a CSS class to only posts posted that have the same “meta value” or “meta value number”?

    Thanks for the great tutorial by the way!
    Best

    • http://www.wpbeginner.com Editorial Staff

      We showed how to do it with custom fields, but that’s being done by key. But if you have the same key with multiple values, then you should get_post_custom_values function.

  • Em

    Just found this post and it is great, clear, succinct and spot on, many thanks

  • Jim

    I would like to do something where post one gets the class “1”, post two gets “2” post three gets “3”, and then it repeats this order, so post four gets “1” again.

    Any tips? it’s just repeating three different classes every three posts.

    • http://www.wpbeginner.com Editorial Staff

      You would have to use the super loop option.

  • Brit

    What I’m trying to do specifically is just make it so when someone lands on my blog, that the thumbnail (which is just a circle with the post title) is a different color for ONLY the most recent post. I’m at a loss of how to make this happen. Everything I’ve found is category or order specific. Thoughts?

    • http://www.wpbeginner.com Editorial Staff

      Brit, you would have to use the last method “Super Loop”. That is probably the only way of doing it because all what you would do is on the first post, you add a unique class such as “first-post” , and then style that using your CSS file.

  • http://www.facebook.com/profile.php?id=100000152868675 Jayaseelan Arumugam

    It is very Nice and useful post. Especially I like the way to Style Posts based on Custom Fields. Thanks.

  • Kathleen

    Thanks for this great article! It’s exactly what I searched for and so much helpful! :)

  • dina

    How do I add unique class to the 3rd, 6th, 9th, and 12nd posts in super loop. Thanks!

  • vajrasar

    Well, that is a very good piece. I got what you said, but can you shed some light on how am gonna implement this on my Genesis driven News Child theme, as I am supposed to do all this with function.php

    I would like to style category specific posts differently. Thanks a lot for this piece. very informative.

    • http://www.wpbeginner.com Editorial Staff

      So if you are just using the post class method, then Genesis has the field under their Layout settings for each post. You can enter a custom class and style it that way. The rest can get pretty complicated depending on all the hooks and such. We don’t necessary do genesis specific articles here.

  • jim

    What do you mean index.php in the loop. which index.php. Mine has nothing like yours. This is the 10th post I’ve read where no one has explained this basic concept properly. And what about the CSS. Last 10 posts didn’t explain that either. Internet is getting worse and worse.

    • http://www.wpbeginner.com Editorial Staff

      Hey Jim,

      Every WordPress theme does things differently. The concept of loop is pretty well explained in the WordPress Codex. It requires a simple google search: Loop WordPress which will take you to: http://codex.wordpress.org/The_Loop

      Because every theme varies, some utilize a separate loop.php file others are child themes which don’t even have index.php files. It is really hard to explain all of those concepts. When we put tutorials in a theme category, we expect the users to have a fair knowledge of how WordPress themes work (even if you don’t know PHP).

  • http://twitter.com/HEkarrar Haider E Karrar

    I think you should be using filters instead in combination with the template tags here http://codex.wordpress.org/Conditional_Tags

    For example

    function my_post_css_filters($content) {
    if(is_category(…))
    return ” $content “;
    else if (something else)
    ….

    }

    add_filter(‘the_content’, ‘my_post_css_filters’, 1) — (priority 1, not sure what else it may affect).

  • Hossein

    Hi..

    How i can wrap every 4 posts in a div ?

  • gashface

    Nevermind got that working, but NOW it doesn’t style each post differently, it just styles them all according to the first post author it finds?

  • gashface

    Is there a way to specificy a tag like H2 is styled by author I am trying .username h2{} for example but it won’t work?

  • gashface

    This doesn’t show the author with me just a blank space, pasted your exact code, any ideas? posts made by admin and are private, does that make a difference?

    • wpbeginner

      @gashface not it doesn’t make a difference whether the post is private or public… If it is returning a white page, then you are pasting the code in a wrong place.

      • gashface

        I realised it was because I was putting the code before the call to the loop, I thought you meant before the if have posts etc.. when it needs to go after that, thanks for the heads up

  • KimeeDoherty

    This was a little helpful, but I am still lost :( Not sure how to include the loop file in order to override the template. You started the <div> tag but not ended them, what’s inside the div? I’m lost :(

  • kristelvdakker

    Thank you so much for this post! It has been very helpful.

  • http://iphone.networkscompared.co.uk/news Stuart

    Hi, thanks for the ideas – especially the super loop – pleased to have got it working on my site.

    But I wonder, complete php beginner here, so is there a way to adapt the code so each subsequent page of posts doesn’t get the styling that posts 1, 2, 3, & 4 get on the first page.

    In other words, I only want the first four posts on the first page to look any different to the rest.

    Cheers,
    Stu

    • http://www.wpbeginner.com Editorial Staff

      Yes. You can use is_paged() conditional tag, so it only shows up on the first page, but not the others. You can also use is_home() … so only on the homepage.

      • http://iphone.networkscompared.co.uk/news Stuart

        Cool – thank you. Looks like is_paged() is the one for me – but unfortunately, my novice abilities mean I’m struggling to work out how to integrate it in to the code.

      • http://iphone.networkscompared.co.uk/news Stuart

        Got there in the end…

  • Michael

    If you wanted to use this approach to separate posts visually based on their published date. How would you go about it? For example: style the 5 posts published on the 1st with a black background, and then style the posts published on the 2nd with a red background? Thanks in advance!

    • http://www.wpbeginner.com Editorial Staff

      The best way to do this is using the superloop method. Where you use the counter variable to set the post class values.

  • Dale

    I am trying to style each authors name a different colour on our wordpress website and I have followed your code as below:

    Whilst this code is kind of working on my wordpress theme it is putting end quotation marks after class-2 but before the authors name so the class is being closed without the name in it. I only found this out by putting that php inside the body where you can see the full string.

    Does anyone have any ideas why this is happening?

    • Dale

      Sorry it stripped out the php I posted but here is the class output of styling my posts by the authors name. The author here is called admin, and as you can see the closing tag is before the author name admin.

      “post-395 post type-post hentry category-uncategorized class-1 class-2″admin

  • http://www.danthesparkyman.com.au/ Bec

    Great post! That info is awesome for adding those extra special custom features to your design.

  • http://www.huizehoog.nl Ed

    Nice post. I do want to mention a technique I came across while redesigning our blog which works just perfect.

    It’s a few lines of code in your functions.php file, and gives you the ability to create custom css files based on the post-id.

    The code is explained here: http://digwp.com/2010/02/custom-css-per-post/

  • http://wpmodder.com Adam W. Warner

    Indeed a great post, hats off! However, I couldn’t help but keep thinking about when it’s time to upgrade the theme you’re making all these custom edits to. I try to use the functions file whenever possible to avoid overwrites.

    I would think it would be better to roll these loop edits into a function. I know that with Parent Themes like Thematic, Hybrid, Genesis, etc…that it’s possible (and advisable) to filter the loop and thus add these changes.

    @Ken – Maybe your plugin would negate the need for any functions altogether?

    Anyway, just my two cents and congrats Syed and the team on your continuing excellence on this site!

  • http://www.internetgeeks.org Azad Shaikh

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

    Thanks!

  • Ken

    Your article has giving me a few ideas on how to improve my plugin, thanks for that!

    I just wrote a plugin (Scripts n Styles) for adding CSS directly to the head element from the post/page editing screen. (Only admin users can do this though.) It’s not as robust (or rather, doesn’t address the same thing) as your solution because the CSS only appears on the single view, not in the lists (archives).

    I’m considering adding the functionality to include a class name into post_class, but via a meta box on the admin screen. Then, the admin would only have to add the css to his theme. (Or, perhaps a setting screen to facilitate this?)

    Anyway, the Super Loop seems useful for theming in general, I’ll have to include that in my next one!

  • http://connorcrosby.me Connor Crosby

    Wow, that is a great post! Perfect timing since I am making a new WordPress theme :)