Support » Fixing WordPress » Use different post templates for different categories?

  • Hiya! So I’m currently running WP 6.0.3 and using a child theme of the latest version of Twenty Twenty Two (just some CSS changes here and there, and some targeted to a specific category, which is sort of work I’m asking here). The homepage of my site is just a default list of recent posts (of which there aren’t that many, because I’m just getting started).

    Is there a way for different post categories to appear differently on the home page, like the CSS hacks I’m using now, but more powerful? Using the blocks editor, basically I want to be able to customise pretty much everything inside of post template in the query loop on the main page, based on post category (I know a post can have multiple categories, but if I apply multiple ones and it stuffs things up, I probably deserve what’s coming). Or some blatantly obvious plugin I’ve somehow overlooked?

    • This topic was modified 1 year, 4 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Is there a way for different post categories to appear differently on the home page, like the CSS hacks I’m using now, but more powerful?

    Yes, but you’ll definitely need to skill-up on your browser’s developer tool and CSS selectors.

    I can see each of the posts is a list item (li element)with a bunch of classes, including a class for the specific category the post was filed under. For instance, one of the posts on your homepage has the following markup:

    <li class="wp-block-post post-148 post type-post status-publish format-standard hentry category-more_you_need">... </li>

    As you can see, there’s a class category-more_you_need corresponding to the slug of the specific category the post was filed under. The category name is “The more you need to say it the less I believe you” (terrible name for a category, but let’s leave that for another day 🙂 )… but the slug is more-you-need.

    This should allow you to select and style the parent li container for each post, as well as everything inside it (title, excerpt, thumbnail image, etc), based on the category or categories the post belongs to.

    Again, you’ll need to learn to use your browser’s developer tool to inspect the elements to know what to target, and you’ll also need to be careful with your CSS selectors, so you don’t introduce any unintended effects elsewhere.

    Thread Starter slasheethecow

    (@slasheethecow)

    Don’t worry the category names; if you don’t think I’m as funny as I do, that probably means you’re a well adjusted person. Although I’m always happy to takesteal suggestions.

    I’m already styling different categories to look different (here’s my child theme’s CSS file)

    a {
        text-decoration: none;
    }
    
    :is(.category-more_you_need, .category-seriously) .wp-block-post-title {
    	font-size: var(--wp--preset--font-size--large);
    }
    
    :is(.category-games-are-stupid) figcaption{
    	font-size: var(--wp--preset--font-size--middle);
    	color: var(--wp--preset--color--vivid-green-cyan)
    }
    
    .category-list{
    	margin-top: 0!important;
    	margin-bottom:0!important;
    }
    
    .entry-content img{
    	max-width: 75%;
    	display: block;
    	margin: 0 auto;
    }

    I was just hoping there might be an easier way, especially if I want to change the layout of posts of a certain category entirely (I’m nowhere near knowledgeable enough on CSS to know if there’s a way to change where something appears in the DOM hierarchy).

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Use different post templates for different categories?’ is closed to new replies.