If you have surfed the web enough you have probably noticed that some websites style each post differently. For example, some sites use different colors for each category, or others may use a completely different style for all the posts. Are you curious how this is possible? Well, we will show you in this article and you will see how simple it actually is.
Styling each WordPress post differently is not that complicated if you use the function named post_class. This function will allow you to print out completely different post container classes. Basically, you can add them in the index.php, single.php, or any other template files you use to make posts.
Keep in mind that you will need some WordPress knowledge, and some HTML/CSS and theming information as well.
How to start
Open your index.php file, or any other loop file you have to see a div with post-id, and you need to add the post_class variable.
Once you have added the function, each of your posts will get a unique CSS class. Now you can modify them. It will change the look of each of your WordPress posts. These are the default classes:
- .post
- .post-id
- .sticky
- .attachment
- .hentry
- .tag-name
- .category-name
- .category-ID
You can open the style.css file, where you can add the class .category-music. It will allow you to change the look of the music category in every post.
This is how you can modify it:
.category-music{background: #97c3e1; border: 1px solid#84aac4;}
It will add a blue background to the music category, and a nice, dark blue border. You can add different link classes. Use the same techniques to make any post have a different look.
If you want to customize every post, you will need more controls. For each post WordPress generates an unique ID that it turns into a class for each post. So you can create styles based on the unique post IDs.
Let’s take a look at some other posts and pages you can easily add custom styles to.
Author Style Posts
Many blogs and websites like to style their posts based on the authors. It is extremely useful for multi-author blogs, when you can give a personal color or style to each of them. If you want to do this, open your index.php (or the category.php) and add the author’s name before the loop, like this:
This code will allow you to select the author’s name in the profile area, and to assign it any variable. Basically, you create a dynamic class value, which can be added in your post class code:
Popularity Style Posts
Some websites like to style the popular posts, based on the comment counts. For example, the most commented posts will get a different style, attracting even more readers. You can style posts in WordPress using the comment count, so the first thing to do is to get it and make sure you associate it with a class.
For the comment count, add the next code into the loop:
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';
}
?>
It means that a post with less than 10 comments will be classified as “new”, while the ones with 10-20 comments will be considered “increasing”. The posts with more than 20 comments are already “popular”. You can add a different style for each category.
Custom Fields Style Posts
Last, but not least, you can style posts based on custom fields. Usually people style posts that are more relevant than others. For example, if it is your birthday, you can have a special style with this occasion. Create a new custom field, name it “post-class”, and add the “birthday” value.
ID, 'post-class'); ?>
It is the time to add some $custom_values:
And your own style:
birthday{Your Own Styling }
Conclusion
As you can see, it is not that complicated to style each WordPress post differently, if you follow our instructions. Make sure you paste the code as it is, and you won’t have problems. Play with the code, the styles, and the colors, and you will get a great look for your site. Have fun!