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.