WP – add class to a DIV if no featured image set

[taxicss]

Hi,

Is it possible to give a DIV a custom class depending if the post/page has a “featured image” set?

I have a custom page template which has a big banner image on top. The page title is positioned inside this banner image. Now I would like to style this banner DIV if the page doesn’t have a “featured image” set.

Thanks.

[Paulie_D]

Do the pages with the featured image have a specific class…because CSS could do this?

Also JS/JQ.

[Senff]

<div 
    <?php if ( has_post_thumbnail() ) { ?>
        class="something"
    <?php } ?> 
> 

Not tested though, but I think this should work as long as it’s within the Loop.

[taxicss]

@Paulie_D No they don’t. How could I do that so every new page that’s created/will be created will have this specific class?

EDIT: ahh I didn’t think enough, I could add a specific class on the body tag of my_custom_template.php, lol. But how could CSS know if there’s a featured image?

@Senff I would try that when I get home. Currently my code is like this

<div>
    <div><?php echo get_the_post_thumbnail( 'full');  ?></div>
    <h1>title</h1>
</div>

[Paulie_D]

What I am say saying that if you apply a specific class to the body tag of pages that do NOT have this featured image then you can address the pages that don’t with…

body:not(.featured-image_class) {

}

It’s kind of a doube-negative (reverse thinking) solution if you can’t add a class to the pages that DO have the featured image

[Senff]

I don’t think the body doesn’t get a different class depending on whether or not a post has a featured image.

There’s no need for that since you can use the conditional statement I mentioned earlier.

[chrisburton]

or you can use the NOT(!) operator.

What this code is saying is, if this template/page DOES NOT have a post_thumbnail/featured image, output <div class="something">. @Senff’s code does basically the same thing however, I like to write code in terms of how I think.

<?php if(!has_post_thumbnail()): ?>
   <div class="something">
<?php endif; ?> 

[Ilan Firsov]

Or if you really want to have a body class, take a look at class_body filter (and add_filter function )
You can add a class like this (in functions.php file):

    function mrb_filter_post_classes( $classes ) {
      global $post;
      if( has_post_thumbnail( $post->ID ) ) {
        $classes[] = "has-post-thumbnail";
      }
      return $classes;
    }
    add_filter( 'post_class', 'mrb_filter_post_classes' );

*block code doesn’t want to work for me today…
ok, it suddenly started to work when I wrapped it in inline code

Edit: just realized that using body_class will not work on blog page / archive page or anything displaying multiple posts on the same page. Just replace body_class with post_class and you should be good to go. I updated the snippet above

[taxicss]

Ok I got it. I think the solution of @Senff or @chrisburton best fit my requirements.

Thanks to all the suggestion though.

Performance | Best practices question:

Since the featured image is used as a banner (aesthetics), is it better if I would just apply it as background-image in CSS? I’m not sure if it’s possible to put PHP code in CSS. Thoughts?

[chrisburton]

@taxicss I think we need more information on the whole scope of what you’re trying to accomplish to be able to answer your question. All we know at this point is that you needed to add a class when there are no featured images. That doesn’t really give us any perspective on what you’re doing to answer your question on whether that is the best approach in regards to performance or best practices. Can you be a bit more clear?

[Author]

Posts