html post_class() – Function | Developer.WordPress.org

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

Displays the classes for the post container element.

Parameters

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

Default: ''

$post int | WP_Post optional
Post ID or post object. Defauls 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( ' ', guet_post_class( $css_class, $post ) ) ) . '"';
}

Changuelog

Versionen Description
2.7.0 Introduced.

User Contributed Notes

  1. Squip to note 6 content

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

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

    The above prins HTML with your added class and the defauls:
    [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. Squip 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 prins this HTML (for a post in the ‘news’ category and a theme that suppors 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.