post_class( string|array $class = '', int|WP_Post $post_id = null )

Display the classes for the post div.


Description Description


Parameters Parameters

$class

(string|array) (Optional) One or more classes to add to the class list.

Default value: ''

$post_id

(int|WP_Post) (Optional) Post ID or post object. Defaults to the global $post.

Default value: null


Top ↑

Source Source

File: wp-includes/post-template.php

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

Top ↑

Changelog Changelog

Changelog
Version Description
2.7.0 Introduced.


Top ↑

User Contributed Notes User Contributed Notes

  1. Skip to note content
    Contributed by hearvox

    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:

    <div id="post-4564" class="class-name post-4564 post type-post status-publish format-standard hentry category-news">

    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 content
    Contributed by hearvox

    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):

    <div id="post-4564" class="post-4564 post type-post status-publish format-standard hentry category-news">

    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.