Suppress header on posts of a particular category

  • Unknown's avatar
    tonymrobinson · Member ·

    I have a website: http://www.wmd-free.me.
    I have posts of a particular category, here’s an example: https://www.wmd-free.me/2021/11/03/the-bright-side-issue-1-nov-21/

    I want to be able to suppress the header (everything above the heading “The Bright Side – Issue 1 – Nov. 2021”)

    I can do this in the custom CSS if I specify the postid of the post. But I want to do it at the category level.

    Is this possible?

    Many thanks in advance.
    Tony Robinson

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    If you inspect the <article> div for that single post you can see that the category has been added as a class you can use: .category-the-bright-side

    This is true of any blog post that has a category or tag added, and it can be used to target your CSS like this:

    .category-the-bright-side .entry-title, 
.category-the-bright-side .entry-meta {
    display: none;
}

    If you try that on your site it should remove the title and post meta from any post with the “The Bright Side” category added to it. Hope this helps!

  • Unknown's avatar
    tonymrobinson · Member ·

    Hi Jerry,
    Thanks for your feedback. I’m sure you’re going in the right direction but I need a bit more help with the CSS.

    This piece of CSS works and suppresses the header:

    .postid-1264 .site-header {
    display: none;
    }

    Obviously, “postid-1264” relates to the specific article.

    If I take what you suggested and adapt it, my CSS would be:

    .category-the-bright-side .site-header {
    display: none;
    }

    However, when I use this, it doesn’t work. (The CSS is currently published so that you can see it).

    What am I missing?

    Many thanks again.

  • aleone89 · Staff ·

    Hello there,

    Happy to help you with this.

    It looks like you might be targeting the wrong class there – you might want to try:

    
.category-the-bright-side .page-header {
    display: none;
}

    I hope this helps.

  • Unknown's avatar
    tonymrobinson · Member ·

    Hi Adam,
    Thanks for your response. I tried your code but it doesn’t work either. I looked in the source code and “page-header” doesn’t exist as a class. Presumably this is why your code doesn’t work.

    I’m clearly missing something in my understanding.

    If this code works: 

    .postid-1264 .site-header {
display: none;
}

    Why wont this:

    .category-the-bright-side .site-header {
    display: none;
}

    Thanks again,
    Tony

  • staff-mckluskey · Staff ·

    Hey Tony,

    I’ve done some testing and I think the code you’re looking for is this:

    .category-the-bright-side .entry-header {
    display: none;
}

    Let me know if that helps.

  • Unknown's avatar
    tonymrobinson · Member ·

    Hi Oliwia,
    Thanks for your suggestion. I have tried it, but it also fails to work. It seems that the “entry-header” class refers to the block under my page header that contains the post title, the author, publication date, and category.

    If I again specify the class specific to the post…

    .postid-1264 .entry-header {
display: none;
}

    … then it works. However, if I change class “.postid-1264” to “category-the-bright-side” then it doesn’t work.

    What is the difference between these 2 classes that I’m not understanding correctly? On the face of it, it doesn’t make any sense why the code originally suggested by Jerry wouldn’t work. I’m clearly missing something.

    Regards,
    Tony

  • aleone89 · Staff ·

    Hello there,

    Ok I think I see the confusion here…

    then it works. However, if I change class “.postid-1264” to “category-the-bright-side” then it doesn’t work.

    What is the difference between these 2 classes that I’m not understanding correctly?

    .postid-1264 – … This will apply to the post individually – so, https://www.wmd-free.me/2021/11/03/the-bright-side-issue-1-nov-21/

    .category-the-bright-side – …This will apply to a category page – so, https://www.wmd-free.me/category/the-bright-side/

    Just to double check, are you looking to remove everything seen below on, https://www.wmd-free.me/2021/11/03/the-bright-side-issue-1-nov-21/ :

    ?

  • Unknown's avatar
    tonymrobinson · Member ·

    hello, yes, I’m looking to supress the header on every post with the category “The Bright Side”.
    I can do it on a post-by-post basis, but that means adding more specific CSS code every time I post.
    Is there a solution?
    I mean the class is there in the source. What am I not grasping?

    Thanks in advance.
    Tony

  • Unknown's avatar
    tonymrobinson · Member ·

    Hi Jerry,
    So now I see that on this page your code is working: https://www.wmd-free.me/category/the-bright-side/

    So it seems that the class “category-the-bright-side” can be identified by the CSS for a page, but not for a post.

    Does my problem have a solution, I wonder? Surely I’m not the only person in the world who would like a slightly different layout depending on the category of the post.

    I guess one solution would be to publish these articles as pages and not as posts.

  • Unknown's avatar
    helper-heroponriki · Member ·

    hello, yes, I’m looking to supress the header on every post with the category “The Bright Side”.
    I can do it on a post-by-post basis, but that means adding more specific CSS code every time I post.

    Since the category-specific CSS would only work on the category archive page as @aleone89 noted above, you would need to set the CSS for each individual post since you’re wanting to suppress the header.

    This is due to the CSS targeting the class set in the <body> tag on each post page since you’re trying to affect the display of the header section.

    For that specific post, the <body> tag references these classes:

    <body class="post-template-default single single-post postid-1264 single-format-standard wp-custom-logo wp-embed-responsive singular image-filters-enabled">

    Note how category-the-bright-side doesn’t exist there.

    For the category archive page, the classes listed are:

    <body class="archive category category-the-bright-side category-101 wp-custom-logo wp-embed-responsive hfeed image-filters-enabled">

    Therefore you would need to set that CSS for each individual article going forward using the specific Post ID. Good news is you would just need to add a new class to your existing CSS separated by a comma rather than needing a new CSS block.

    Example: edit .postid-1264 .entry-header { to .postid-1264 .entry-header, .postid-XXXX .entry-header {

    You could also explore the use of a plugin – this one came up in a quick search on WordPress.org – that might streamline your process. We haven’t tested or vetted this specific plugin, so make sure it’ll be compatible with your particular setup before installing.

    Hope that helps!

  • Unknown's avatar
    tonymrobinson · Member ·

    Eureka, I found it!!

    So, the problem is that by default the category doesn’t appear in the “<body class>” line in the source.

    In order to get my category into the body class, I had to update my functions.php file with this: 

    add_filter('body_class','add_category_to_single');
  function add_category_to_single($classes) {
    if (is_single() ) {
      global $post;
      foreach((get_the_category($post->ID)) as $category) {
        // add category slug to the $classes array
        $classes[] = $category->category_nicename;
      }
    }
    // return the $classes array
    return $classes;
  }

    Once I did that, the category is added to the <body class> list. Note: the name of the category is not prefixed with “category-”

    Now that the category is there, I can use the code I previously had, but modified:

    .the-bright-side .site-header {
display: none;
}

    Thank you, Jerry, Adam and Oliwia for your input. All of this helped me to understand what is going on and then find a solution.

  • Unknown's avatar
    helper-heroponriki · Member ·

    I should have thought of that – nice work! We all helped each other here, it seems. :)

    Glad we could help!

  • The topic ‘Suppress header on posts of a particular category’ is closed to new replies.