How to highlight blog page menu item for blog posts?

admin管理员组

文章数量:1122832

My site has a static front page and a separate blog page titled "Journal." The permalink structure is "/journal/%postname%." I want the "Journal" menu item to be highlighted for single posts; however, with this permalink structure, it doesn't get highlighted. But if I add the posts as sub-items to "Journal" in the menu, the menu item DOES get highlighted.

How can I get the "Journal" menu item to be highlighted for single posts without having them as actual menu items?

My site has a static front page and a separate blog page titled "Journal." The permalink structure is "/journal/%postname%." I want the "Journal" menu item to be highlighted for single posts; however, with this permalink structure, it doesn't get highlighted. But if I add the posts as sub-items to "Journal" in the menu, the menu item DOES get highlighted.

How can I get the "Journal" menu item to be highlighted for single posts without having them as actual menu items?

• menus

Share Improve this question asked Aug 26, 2024 at 15:02 HeatherFeuerHeatherFeuer 1 1

• If your Journal menu item has a link I would highly recommend against this because it causes UI and accessibility concerns. Highlighting the item when viewing single posts gives the visitor the sense that they are on that page (which they are not) and thus it may not appear to be an actionable link anymore (depending on your theme's CSS of course). It can cause confusion to the end user. I would recommend you only highlight menu items you are actively viewing or hovered/focused on. – WPExplorer Commented Aug 27, 2024 at 2:27

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

To ensure the "Journal" menu item is highlighted for single posts without adding individual posts as sub-items in the menu, you can use a WordPress filter and some custom CSS or JavaScript. Here's a solution that involves adding a bit of PHP to your theme's functions.php file to modify the menu classes.

Step 1: Add a Filter in functions.php

Add the following code to your theme's functions.php file. This code checks if the current page is a single post and then adds the current-menu-item class to the "Journal" menu item:

function highlight_journal_menu_item($classes, $item) {
    // Check if we're on a single post
    if (is_singular('post')) {
        // Get the ID of the "Journal" page
        $journal_page_id = get_option('page_for_posts');

        // If the current menu item matches the "Journal" page ID, add the 'current-menu-item' class
        if ($item->object_id == $journal_page_id) {
            $classes[] = 'current-menu-item';
        }
    }

    return $classes;
}
add_filter('nav_menu_css_class', 'highlight_journal_menu_item', 10, 2);

Step 2: Ensure Menu Items Have Proper Classes

WordPress typically adds classes like current-menu-item to the active menu item, which is why this filter works by adding that class to the "Journal" menu item when viewing a single post.

Explanation:

is_singular('post'): Checks if the current page is a single blog post. get_option('page_for_posts'): Retrieves the ID of the page assigned to display posts, in this case, your "Journal" page. $item->object_id == $journal_page_id: Compares the current menu item's ID with the "Journal" page ID and adds the current-menu-item class if they match.

Summary

This approach automatically highlights the "Journal" menu item whenever a single post is viewed without the need to add individual posts as sub-items. The PHP filter works dynamically and is a clean solution to keep your menu structure intact.

本文标签： How to highlight blog page menu item for blog posts