Change featured photo per 'category' and 'tag' pages

Home Forums Automattic Forefront Change featured photo per 'category' and 'tag' pages

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #107902 Resolve


    I noticed that for every category page, there is also a featured photo on top.

    For instance,

    How can I amend the featured photo per category page?

    Appreciate your help. Cheers

    The blog I need help with is


    There’s actually no direct way to set a featured image per category page, but we can try to do it with CSS! It’s a process but it could work. Here would be the steps:

    1. Prepare the featured image and upload it to your Media Library. Be sure to get the URL of the image once you’ve uploaded it.

    2. Go to the category archive page, and right-click. Choose “View Source” from the small menu that pops up. In the HTML source, look for the following tag:

    <body class="archive category category-the-big-blog-exchange category-144285780 logged-in admin-bar no-customize-support custom-background typekit-enabled group-blog mp6 debug-bar-maximized theme-menu-maximized highlander-enabled highlander-light custom-colors">

    You want to find the unique CSS class for the category you’re working with. Each category has a unique class that we can use to target that category page with CSS. So, for the “Big Blog Exchange” category, the unique class is: “category-the-big-blog-exchange”, as you can see in the code above. This will be different for each category.

    3. Now, in your CSS editor, you’d do the following:

    .category-the-big-blog-exchange .hero.without-featured-image {
    background-image: url('http://path/to/your/uploaded/image/from/step/1');
    background-repeat: no-repeat;
    background-color: transparent;

    This might require some further adjustment, but if you give it a try, we can adjust as needed. You would need to repeat these steps for every single category or tag that you want to add a custom featured image for (so the “.category-the-big-blog-exchange ” in Step 3 would change to reflect the name of each category or tag).

    Hope this helps, if you decide to give it a try, let me know if you have questions about the process.



    Will try this out later today. Much appreciated!



    Great, keep us posted on how it goes. :)


    Kathryn P.
    Happiness Engineer

    Hi there – I’m just checking in to see if you got this sorted or whether you still needed any help. Just let me know, thanks!



    Hi Kathryn, I almost forgot about this. Will get back to you on this sometime this week, hope that’s fine. Thanks for reminding me. Cheers


    Kathryn P.
    Happiness Engineer

    That would be great – thanks!



    Hi Kathryn,

    I did a sample upload on the above page,

    using this sample photo,

    I noticed however that the image is not aligned center.

    Hoping you can hep me on this.




    Kathryn P.
    Happiness Engineer

    Hi Jean, I took a look in both Chrome and Firefox, and the image is looking centered to me, as you can see in this screenshot:

    Would it be possible to upload a screenshot of what you’re seeing, to help in troubleshooting?

    Here’s a guide on how to make a screenshot, if you’re not sure:

    You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library so I can see it.

    Could you also please let me know what browser and version the screenshot is from? Thanks very much!


    Kathryn P.
    Happiness Engineer

    Hi there, just wondering if you were able to get this issue sorted out? If you still need help with it, a screenshot would be super helpful – see my instructions above. It would also be great to know what browser and version you’re using. Thanks!


    Kathryn P.
    Happiness Engineer

    Hi there, I’m going to close this thread since it’s been a while since we heard from you, but feel free to start a new one if you need further help. Thanks!

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

The topic ‘Change featured photo per 'category' and 'tag' pages’ is closed to new replies.