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

User Contributed Notes

1. Skip to note 6 content

   hearvox 10 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 4You must log in to vote on the helpfulness of this note

   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 7 content

   hearvox 10 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 3You must log in to vote on the helpfulness of this note

   To print post_class CSS classes for a post other then the current one, specify its ID (integer):

   <?php post_class( '', 22 ); ?>

   The above prints (depending on category and tags):
   class="post-22 post type-post status-publish format-standard hentry category-another-cat tag-tag1 tag-tag2
3. Skip to note 8 content

   hearvox 10 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

   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'  */
   }
4. Skip to note 9 content

   Selrond 8 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

   A simple way to add multiple classes to the post_class defaults, is to just write them as a string argument:

   <div <?php post_class( 'class1 class2 class3' ); ?>>

   which will add those classes to the default class list.
5. Skip to note 10 content

   hearvox 10 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note

   post_class filter
   You can also add classes using the post_class filter.