• Hi!

    I am looking for having posts in a post grid on my page behave differently by having a category based css selector assigned. Ie. if a post belongs to the “sports” category, then I wish that post thumbnail have a “category-sports” css selector.

    I see that this has been presented and solved many times before, I just can’t make any of that work. I have tried Lorelle’s solution and related plugin. This does not help me with assigning category css to post grid om my main static page as I am looking for.

    The remaining posts on this forum are either outdated or I do not know what to do with them. I understand that the hack I need has a function.php component, a php content component and a css component.

    Can someone help me with a comprehensible solution?

    I am new to wordpress and apologize for disregarding conventions here, I aspire to become a resource for the wordpress community once I get a grasp on things.

    Thanks in advance!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi,

    In this case you need to write custom post loops.

    https://codex.wordpress.org/Class_Reference/WP_Query

    Prokops.,

    I hope it ll be help you

    <?php body_class( $class ); ?>

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

    Thanks,
    Rajan V

    Moderator bcworkz

    (@bcworkz)

    Hi prokops,

    Thank you for starting a new topic. Don’t worry about mistakenly tagging on to someone else’s topic, we learn from our mistakes, I’m sure you won’t do that again here 🙂 And welcome to the community!

    It’s puzzling why the solutions you linked did not work for you. It’s possible your theme or some other plugin is interfering with conventional functionality. Or it may simply be the class is not applied to the element you desire.

    The correct approach depends on what your theme is currently doing for classes on the element you’re interested in. If the classes are coming from a template tag or function call on the applicable template, there’s a chance you could achieve what you want by hooking a filter or overriding a pluggable function. Otherwise, you probably need to directly alter the template code. When you alter theme templates or functions, you should create a child theme so theme updates do not overwrite your changes.

    First identify the template that outputs the element where you want to add classes, then copy it to your child theme folder. I’m assuming this element is within The Loop, which greatly simplifies things. Then Lorelle’s approach should more or less work for you, though some alteration may be needed to work with your exact situation. She is basically creating a template tag function. The function declaration should go on you child theme’s functions.php file. The template tag should be called just like she suggests:
    <div class="post<?php the_category_unlinked(' '); ?>">

    Maybe your element is not a div, but the class attribute is declared the same way for most elements. You also need to be sure you keep HTML and PHP sections straight. If the HTML is output with PHP echo, you do not introduce another <?php ?> block, you cannot nest these blocks. The equivalent all PHP version would be like this:
    echo '<div class="post' . get_the_category_unlinked(' ') . '">';

    Note that I changed the template tag name. This is because the original version echoes out the category classes. In an all PHP version, the template tag should return a value instead of echoing it.

    If you’re still having trouble, please post the relevant portion of your template code along with your version of Lorelle’s template tag function.

    in case your theme is using post_class() within the posts div in teh loop, you will get automically category related CSS classes added.

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

    what theme are you using?

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