Add default post class in WordPress themes

When creating new themes for WordPress, often I want to apply different style for various post types, archives or pages. Makeing new templates is the better way to use different page layouts. But if we can reuse the same page layout with differnt styles for different pages, it is consider as a best pracices in WordPress theming.

To do so, WordPress have a function, post_class(). We just want to call this function in our page element.

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

By adding this function on that div, some post specific css classes will be added to that element. We can use them to modify the looks of our 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

example:

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

So from the above example, now we can apply different style for category-songs class & they will get entirly different styles than other categories.

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

But if you need more controll, you can manually add some classes within that function.

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

We can also modify this function to get PHP variable values with post class like below example.

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

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

output

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

This is an essential function we want to use in our WordPress themes and it will make our themes as too flexible for further modifications.

Recent Posts

1. Automating Code Linting with GitHub Actions for WordPress Plugins
2. Comprehensive Guide to Linting PHP, JavaScript, and CSS in WordPress Plugins Using Composer
3. The Ultimate Guide to Indexing in Database Design
4. Understanding 'update_meta_cache' in WordPress - When to Use It, When Not to, and Its Impact on Database Queries
5. A Guide to Configuring JavaScript and SCSS Paths in WordPress Plugins with @wordpress/scripts

This article was published on January 27, 2015

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about it, please get in touch.