How do I add the category ID into post classes on the homepage?

Community Forums Forums Design Tips and Tricks How do I add the category ID into post classes on the homepage?

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  lee 2 years, 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #15434


    I know there will be a filter for this somewhere but I can’t find it.

    Using a basic child theme of the Genesis parent theme, I want to style posts listed in a site’s homepage differently according to their category.  The div that encases each post listed in the homepage currently lists the nice name of each post’s category. I want to insert the category ID number so I can keep my CSS file lightweight. How do I do it?



    How do you want them to be listed? Grid?



    That will be okay if it’s a grid of one column ;)

    They need to display as a single column list similar to the way they display in the parent Genesis theme or the default Twenty Twelve theme.



    In other words, do you want a blog page with single category? (or exclude single/multiple category)

    So, these tutorials might be helpful




    The blog’s homepage displays all categories. I want to color each blog post excerpt differently according to the category it is in.

    For example,

    1) The homepage displays the 10 most recent posts.
    2) The site has 5 categories: red (id = 1), orange (id = 2), yellow (id = 3), green (id = 4) and blue (id = 5).
    3) Post excerpts of red category posts need to display with a red background.
    4) Post excerpts of orange category posts need to display with an orange background etc…

    If I can get the <div> that encases each post excerpt to include the category ID as its class then I can achieve different coloring for each excerpt based on category.

    The actual site has over 30 categories. I already know the category IDs because I’ve already configured the site to style category pages differently according to category ID but I can’t get the homepage excerpts to reflect the category ID styling without inserting the category ID in each excerpt’s <div>.



    Well, actually you can do that with the correct class.

    Try this

    .home #content .category-category-1 .entry-content p {
    color: #F5f5f5

    Where 1 is the ID of your category.

    If you notice from Blissful theme ( besides the post title, there is a cute icon. If you realize, each post has different icon based on their category. Look at the style.css file to figure out the code it use. You’ll find it is close to what I gave you above.



    Sorry for replying so late, I didn’t get an reply notice in my inbox.

    Thought we were onto something there but we’re not. The demo themes on StudioPress use category names like category-1 and category-2… That’s why the source code for those themes appears to have the category ‘ID’ number in the HTML tag class. Went through Blissful’s functions.php and home.php to check and there’s nothing special in there.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.