post_class( string|string[] $css_class = , int|WP_Post $post = null )

Displays the classes for the post container element.

Parameters

$css_classstring|string[]optional
One or more classes to add to the class list.

Default:''

$postint|WP_Postoptional
Post ID or post object. Defaults to the global $post.

Default:null

Source

function post_class( $css_class = '', $post = null ) {
	// Separates classes with a single space, collates classes for post DIV.
	echo 'class="' . esc_attr( implode( ' ', get_post_class( $css_class, $post ) ) ) . '"';
}

Changelog

VersionDescription
2.7.0Introduced.

User Contributed Notes

  1. Skip to note 6 content

    Add more classes.
    You can add a class to the post_class defaults:

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

    The above prints HTML with your added class and the defaults:
    [html]<div id="post-4564" class="class-name post-4564 post type-post status-publish format-standard hentry category-news">[/html]

    Use an array to add multiple classes:

    <?php
    $classes = array(
    	'class1',
    	'class2',
    	'class3',
    );
    ?>
    
    <div id="post-<?php the_ID(); ?>" <?php post_class( $classes ); ?>>
  2. Skip to note 8 content

    Example of the template tag (and its default CSS classes).
    This example shows the post_class template tag as commonly used in a theme file (such as single.php):

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

    The output of the above prints this HTML (for a post in the ‘news’ category and a theme that supports Post Formats):
    [html]<div id="post-4564" class="post-4564 post type-post status-publish format-standard hentry category-news">[/html]

    Using these CSS classes you can then style this specific post, or all posts assigned the same category (or post format):

    .post {
    	/* Styles for all posts */
    }
    
    .post-4564 {
    	/* Styles for only this post (ID number 4564) */
    }
    
    .category-news {
    	/* Styles for all posts in the 'news' category  */
    }
    
    .format-standard {
    	/* Styles for all posts assigned the post-format of 'standard'  */
    }

You must log in before being able to contribute a note or feedback.