0

I am trying to learn WP Theme development. And as I have understod it is important to use "post_class()" since plugins may need to use it. But what I not understand is where I should use it?

Should I use it for the post for the main loop. Or should I use it for my custom-post-type-loop. Or both?

1

It's actually only important to use it if your theme's CSS or JS is reliant on something it outputs. It essentially stuffs relevant class names into the HTML tag you put it on based on the current post/category/blah/blah. So, on a single post template this:

<article <?php post_class(); ?>>

might output:

<article class="post post-123 category-3 category-cats status-publish hentry">

You can then use those classes to style things with CSS (or hooks for JavaScript).

When using it with a custom post type, it will also output the post type:

<article class="mycpt type-mycpt post-345 category-3 category-cats status-publish hentry">

It actually always outputs post type. In the first example, post was the post type.

Note that you can also manually pass in custom class names; since the function actually outputs the class attribute itself (vs a list of class names only) this is the only way to get both WP generated classes and custom classes onto an element. So:

<article <?php post_class( 'my-custom-class' ); ?>>

will added my-custom-class to the string of classes output by WordPress.

Codex article: https://codex.wordpress.org/Function_Reference/post_class

EDIT: From the comments "Okay, so post_class() should be used on the single-post-page?"

You can use it on any template. Indeed, it might even be more commonly used on archive type pages. Let's say you have a blog with three categories of posts: Tutorials, Editorials and Reviews. On your site's home page you might have a grid with all of those posts listed out in a single large list. With CSS and post_class() you could style each type of entry differently. Say, adding a graduate hat icon on anything with class="category-tutorial", a pencil icon on anything with class="category-editorial" and so on.

On http://ecotrust.org/search/farms I use the post classes on the search results page to let the user know what type of content each result is. We never got around to designing icons for each so it's simple text inserted with CSS content.

// a mixin that puts the little words in the bottom right corner
.type-identify(@content-type:" ") {
    &:before {
        content: @content-type;
        bottom: 20px;
        color: #cccccc;
        clear: none;
        display: block;
        position: absolute;
        right: 0;
        text-align: right;
        width: 160px;
        .small-info();
    }
    &:hover:before {
        color: #aaaaaa;
    }
}

// then call it based on the post_class() output for different post types, 
// including custom post types
.type-post {
    .type-identify("Blog post");
}
.type-page {
    .type-identify("Page");
}
.type-press_release {
    .type-identify("Press release");
}
.type-portfolio_item {
    .type-identify("Portfolio");
}
.type-project {
    .type-identify("Project");
}
  • Okay, so post_class() should be used on the single-post-page, not in the loop? – Alex Aug 30 '15 at 17:18
  • It needs to be used within the loop in order to know all of the bits to stuff in the class attribute. If you want to use it outside of the Le Loupe, you have to pass it an post_id so that it can find the relevant bits. – Will Aug 30 '15 at 17:39
0

post_class will add some default Wordpress CSS Classes to the HTML tag; like <div <?php post_class(); ?>

If you want to add your own theme's custom classes, you can add those inside post_class, like so... <div <?php post_class('blog-entry'); ?>.

You can use post_class in Loop as well as in Single/Page theme files. If used in Loop, it will allow you to give different look-n-feel for each post depending upon the Content type (standard, video, chat etc if your theme supports).

Just to mention... see body_class() and use it with body tag; this will give you even more flexibility while writing CSS for specific pages or page-template content.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.