How to add bubble count in WordPress wp_nav_menu menu?

Question

I have to add a bubble notification in WordPress wp_nav_menu like the following code.

<ul>           
      <li> Tickets <span class="unread">2</span></li>

        <li> Log-out</li>
</ul>

Here I have to add this part in it.

<span class="unread">2</span>

I have seen this one and tried it.

add_action( 'walker_nav_menu_start_el', 'wpse_10042_nav_menu_post_count', 10, 4 );

 function wpse_10042_nav_menu_post_count( $output, $item, $depth, $args ) {

    $output .= '<span class="unread">'.my_function_here().'</span>';

    return $output;
}

And get it from here How to add post count to wp_nav_menu?

But the problem is its adding to every menu link. I want to add it to only one menu item. Not everyone in the list.

Answer 1

For flexibility, you could assign the CSS bubblecount class to the corresponding menu item:

and then target it with:

if( in_array( 'bubblecount', (array) $item->classes ) )
    $output .= '<span class="unread">'.my_function_here().'</span>';

in your code snippet above.

Answer 2

How about just

function add_bubble_to_nav( $items, $args ) {
    $items .= '<span class="unread">stuff</span>';
    return $items;
}
add_filter( 'wp_nav_menu_items', 'add_bubble_to_nav', 10, 2 );

No need to use walker here, just go for the filter I think.

This adds it to the end of the menu. If you need it in a specific position you could go for strpos to find the position and then substr_replace to put it in there or something.