Community Forums › Forums › Archived Forums › Design Tips and Tricks › How do I add the category ID into post classes on the homepage?
- This topic has 6 replies, 2 voices, and was last updated 11 years, 2 months ago by lee.
-
AuthorPosts
-
January 27, 2013 at 4:41 pm #15434leeMember
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?
January 29, 2013 at 7:05 am #15939wpspeakMemberJanuary 29, 2013 at 7:09 am #15942leeMemberThat 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.
January 29, 2013 at 7:13 am #15944wpspeakMemberIn other words, do you want a blog page with single category? (or exclude single/multiple category)
So, these tutorials might be helpful
http://www.briangardner.com/blog-page-single-category/
http://www.basicwp.com/filter-posts-by-category-tag-genesis/
January 29, 2013 at 7:39 am #15951leeMemberThe 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>.
January 29, 2013 at 10:54 am #16011wpspeakMemberWell, 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 (http://demo.studiopress.com/blissful/) 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.
January 30, 2013 at 7:56 am #16383leeMemberSorry 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.