Support » Plugins » Hacks » Post thumbnails with different colors based on category?

  • I’m really new to coding with wordpress/PHP and I’m struggling to figure out how implement different styles for thumbnails depending on their category.

    Right now I’m making a news website with 4 categories (news, sports, entertainment, columns) and each category has a different color associated with it. I’d like for the thumbnails and excerpts to display the color of the category it’s in. I’m trying to insert the post category into a class which I can then style, but I just get a bunch of one random category listed as links at the top of my grid instead of my thumbnails getting an actual class/id. This is the current code for my thumbnails:

    <?php
    			  $thumbnails = get_posts('numberposts=6');
    			  foreach ($thumbnails as $thumbnail) {
    			    if ( has_post_thumbnail($thumbnail->ID)) {
    			      echo '<div class="small_feature"><a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '"><div class="colored_bar' . the_category( ' ' ) . '"></div>';
    			      echo get_the_post_thumbnail($thumbnail->ID, 'thumbnail');
    			      echo '<div class="overlay_bar"> <h2 class="post_title_thumbnail"> ' . esc_attr( $thumbnail->post_title ) . '</h2></div></a></div>';
    			    }
    			  }
    			?>

    Which results in this, links to one random category and no id or class in the actual colored bar:
    Link

    This is what I want, each side colored bar is a different color corresponding to its category:
    Link

    Thanks, any help would be appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    You’ve stumbled upon one of the confusing things about WordPress. The WordPress “Loop” is not necessarily equivalent to a PHP loop. The WP Loop does some special things to make certain post values available that do not occur with a typical PHP loop. Your foreach is obviously a PHP loop, but it is not a WP Loop, thus you cannot use the_category().

    You need to get the category with a function that works outside of a WP Loop, such as get_the_category(). The problem with get_the_category() is it returns an array of term objects, so you need to pick which term to use and get the category name out of the term object. If just using the first category in the array will work for you, do this:

    $cats = get_the_category( $thumbnail->ID );
    $cat = $cats[0]->name;

    Use $cat in place of the_category( ' ' ) that you currently have.

    I am also interested in how to make this work.

    Is there an easy way to make post thumbnails include category css selectors?

    In OP example, how to make a sport news post thumbnail have a .category-sport selector?

    Have anyone made the above example work?

    cheers,
    prokop, dk

    Moderator bcworkz

    (@bcworkz)

    Hi prokop,

    How you would do so depends on how you manage categories on your site. The OP is using category slugs that match the CSS selector, so it’s just a matter of outputting the slug as a CSS class. My suggested code assumes there is only one category assigned to any given post. With multiple categories, one needs to search through the categories array for specific CSS relevant categories.

    If you have more questions, please start a new topic so we can focus on your specific situation without confusing the OP’s topic. Even though tagging onto an existing topic is often encouraged in other forums, in these forums it is seriously frowned upon. Your cooperation would be greatly appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Post thumbnails with different colors based on category?’ is closed to new replies.