post_class not working with css

Question

through the codex I read about how to use the post_class() function to create a css hook for styling the content.

Here is the code I have, PHP:

<li class="<?php post_class();?>"> <?php the_title(); ?> </li>
<p class="<?php post_class(); ?>"> <?php the_content(); ?> </p>

However, the following CSS does not work, the styling does not change:

.category-blockquote {
color: green;
}

This is despite the codex saying you can prefix a category name with 'category-' in your CSS to hook onto that content.

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

Any help on why my code is not working would be much appreciated.

Thanks in advance.

Answer 1

First of all, <?php post_class(); ?> function prints a string that contains html 'class' attribute. So, whenever you are using this function inside class attribute, then you are actually printing another class attribute inside class attribute. That's why your class is not working.

Secondly, since <?php the_content(); ?> function may contains <p> tag, that's why never use <?php the_content(); ?> function inside <p> tag. That will break your style that you wrote for the_content block. Instead <p> tag, use <div>.

So, you may try with this:

<li <?php post_class();?>><?php the_title(); ?></li>
<div <?php post_class(); ?>><?php the_content(); ?></div>

Answer 2

This is wrong:

<li class="<?php post_class;?>"> <?php the_title(); ?> </li>

That is, this-- post_class-- is wrong. post_class() is a function. What you have written is going to get you a, most likely, "undefined constant" Notice and won't work.

Secondly, that is not really the way post_class() is used. Add post_class() to your outer post wrapper, without the class= part which is generated by post_class(), not to individual elements in the post. What you are doing is going to add the same classes to both the li and the p which is going to cause trouble properly targeting individual pieces of the layout and will also generate a lot of unnecessary markup. For example:

13    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
14            <?php twentyfourteen_post_thumbnail(); ?>
15    
16            <header class="entry-header">
17                    <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) &&

twentyfourteen_categorized_blog() ) : ?> 18

https://core.trac.wordpress.org/browser/tags/3.9.1/src/wp-content/themes/twentyfourteen/content.php#L13

Now you would use something like:

.category-abc .entry-header {
   background:red;
}

To target <header class="entry-header">.

Yes, category-{category_name} should work:

Category

Category template files and pageviews displaying posts feature the class selectors: post post-id category-ID category-name

http://codex.wordpress.org/Function_Reference/post_class

But the "name" will be the slug not the human readable name-- that is "abc-def" and not "Abc Def".