[Support request] Different sidebar for a particular post category

Home Forums Support [Support request] Different sidebar for a particular post category

Home Forums Support Different sidebar for a particular post category

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2373952
    Gillian

    Is it possible to have a different sidebar for just one category of posts? I have my main navigation menu set as the Primary Menu which appears in my right sidebar and I want to have a different menu in different colours when the user is looking at just one category of posts.

    #2373976
    Ying
    Staff
    Customer Support

    Hi Gillian,

    You can use a plugin like conditional menus.

    But you will need custom CSS to set different menu colors for that category.

    #2374088
    Gillian

    Hi Ying

    Tried to use the conditional menus plugin and it didn’t have any effect. I also tried Content Aware Sidebar and no matter how I set it I got the second menu appearing with the main menu on all pages and posts.

    The site is 3churches.uk and the post I am trying to add a different menu to is https://3churches.uk/pcc-church-community-contacts-flitton/ which has category set to flitton and I chose category flitton for the conditional menu.

    My primary menu is called Main Menu, and the one I want to show with the post is called Flitton Menu

    #2374255
    David
    Staff
    Customer Support

    Hi there,

    can i see a post where you want to make the menu change ?

    #2374259
    Gillian

    This is a post with category flitton and it is showing the main menu, not the flitton menu which should only have 2 items on it.

    https://3churches.uk/pcc-church-community-contacts-flitton/

    #2374272
    David
    Staff
    Customer Support

    Try adding this PHP Snippet to your site:

    
    add_filter( 'wp_nav_menu_args', function ( $args ) {
        if ( 'primary' === $args['theme_location'] ) {
            if ( in_category('your post category') ) {
                $args['menu'] = 'Name of category specific menu';
            }
        }
        return $args;
    } );

    You need to update:

    your post category to match the name of the category you want to make the change on.
    Name of category specific menu to match the name of the category specific menu

    #2374322
    Gillian

    That’s worked – thank you for such a quick response.

    I’ve tried it with adding a second category which also needs a different menu and repeated the whole Snippet with the second set of information and that has worked fine as well.

    I need to alter the colours of the alternative menus.

    I’ve set the primary navigation menu colours in the Customiser and then used the following code to get the button effect.

    /* -------------------- SECTION 3 - NAVIGATION ----------------------------------- */
    
    /* MAIN NAVIGATION IS SET TO SHOW IN SIDE BAR VIA GENERATEPRESS
    This gives the main nav the appearance of buttons */
    .main-nav a { 
       margin-bottom: 10% !important;
       text-align: center !important;
       border:solid #6600cc 2px;
       border-radius: 26px;
       background-color: #f2e6ff;
      }
    
    /* This reduces the spacing between lines in the buttons when the wording is wrapped */
    .main-navigation .main-nav li a {
        line-height: normal !important;
    }
    
    /* --------- End ----------- */
    

    and this is working on both the Main Menu and the Flitton Menu. What would my selector be for the Flitton Menu so I can over-ride the colours set in the customiser?

    Or would I be better off not setting the main colours in the Customiser but setting them with some CSS for each menu?

    (This is all a temporary fix until I can redo the whole site – I’m hoping to use GenerateBlocks and drop Elementor, but I have to get up to speed on how to use blocks)

    #2375036
    David
    Staff
    Customer Support

    So on the example page, where we see the new category specific menu. Will ALL the menu items be a different color ? Or will it just be some of those items?

    In the meantime:

    1. Keep your colors in the customizer, we can use CSS to overwrite those category specific menu items.

    2. add this PHP Snippet to your site:

    
    add_filter( 'body_class', function( $classes ) {
        if ( is_single() ) {
            global $post;
    
            foreach( ( get_the_category( $post->ID ) ) as $category ) {
                $classes[] = 'category-' . $category->category_nicename;
            }
        }
    
        return $classes;
    } );

    This will add a category-{term} class to the body tag of all single posts.
    This we can then use to write CSS specifically for posts of particular category.

    #2375056
    Gillian

    Hi David

    Basically, I have 4 colour combinations.

    The default colours for the sidebar menu will be the purple/light purple colours you are currently seeing.

    For posts that are category flitton, all the menu items in the sidebar will be two shades of blue

    I’ve got 2 more post categories to deal with. For category silsoe all the menu items will be 2 shades of red and for category pulloxhill all the menu items will be 2 shades of green (you can see the colour combos on the buttons in the header)

    You’re being very helpful – many thanks.

    #2375175
    David
    Staff
    Customer Support

    OK, so if you can add the snippet i provided here:

    https://generatepress.com/forums/topic/different-sidebar-for-a-particular-post-category/#post-2375036

    Then we will have the category body class we need.
    So if you’re happy overriding the menu colors using CSS then:

    1. Add this CSS:

    .main-navigation {
        --nav-color-one: #6600cc;
        --nav-color-two: #f2e6ff;
    }
    
    .main-navigation .main-nav ul li a {
        color: var(--nav-color-one);
    }
    
    .main-nav a {
        border: solid var(--nav-color-one) 2px;
        background-color: var(--nav-color-two);
    }
    
    .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        color: var(--nav-color-two);
        background-color: var(--nav-color-one);
    }

    In doing so you should see no change to your current menu colors.

    The clever part here is this part of this CSS:

    .main-navigation {
        --nav-color-one: #6600cc;
        --nav-color-two: #f2e6ff;
    }

    If in the future you want to change your menu colors you will change those two hex colors.
    What we are doing here is storing your hex colors as CSS Variables.

    2. Now we can change the color variables values based on our category class eg.

    
    .category-flitton .main-navigation {
        --nav-color-one: #ff0000;
        --nav-color-two: #00ff00;
    }

    So any post that has the category-flitton will load new colors.

    you can then add multiple CSS rule for each different style you want eg.

    
    .category-another-category .main-navigation {
        --nav-color-one: #0000ff;
        --nav-color-two: #00ff00;
    }
    #2375193
    Gillian

    Thank you so much – that works. I’ve just got to tweak the first bit of CSS because the active flitton page is shows up in the purple colours.

    #2375360
    David
    Staff
    Customer Support

    Doh – i missed that.
    I updated the CSS above, the change being this rule:

    
    .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a {
        color: var(--nav-color-two);
        background-color: var(--nav-color-one);
    }

    is changed to:

    
    .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        color: var(--nav-color-two);
        background-color: var(--nav-color-one);
    }
    
    
    #2375368
    Gillian

    I’m a very happy bunny – works a treat. Thank you. I’ve updated my GeneratePress review – just to say that 5 years on support is still 5*

    #2375403
    David
    Staff
    Customer Support

    Thank you – it means a lot – very happy to have helped 🙂

    #2543131
    Heinrich

    hi david, a really cool solution. i need this thing not for posts, instead for pages. how can i adress the pages, because there are no categories?

    would you add a custom taxonomie or or better another way?

    tks in advance

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.