Skip to:

Styling Message Counter Menu Elements

  • metalhead


    I’ve gathered information from several posts, and used it to create a nifty menu item called “Messages.” It includes an unread counter, and more. Here’s what it does:

    1) Checks to see if user is online before proceeding
    2) Checks to see if user is at appropriate menu before proceeding
    3) Gives you control over where the new menu item is positioned in the menu
    4) Adds the menu item as the user’s name, followed by # of unread messages ex: Steve (1)
    5) When clicked, it links to the user’s messages

    While this function may sound great, and I hope it’s useful to some people who read this message, I’m lacking the ability to customize the menu with CSS. I just can’t figure out how to assign a class to it, whatsoever. If anyone can help me with that, please let me know.

    Here’s how this baby works:

    // Adds Messages menu item with counter to header menu, item is named by name of user
    function my_nav_menu_positioned_notif_counter( $menu, $args ) {
    $msg_url = bp_core_get_user_domain(bp_loggedin_user_id()) .'messages/';
    if (!is_user_logged_in())
            return $menu;
    $int = bp_get_total_unread_messages_count();
        if( $args->theme_location == 'Header Menu' ) // only for primary menu
            $menu_array = array();
            while ( false !== ( $item_pos = strpos ( $menu, '<li', 3) ) )
                $menu_array[] = substr($menu, 0, $item_pos);
                $menu = substr($menu, $item_pos);
            $menu_array[] = $menu;
            array_splice($menu_array, 0, 0, '<li><a href=" ' .$msg_url. ' ">('.bp_get_total_unread_messages_count( bp_loggedin_user_id()).') '.$name.'</a></li>'); // 0,0 is first position, 1,0 is second, etc
            $menu = implode('', $menu_array);
        return $menu;
    add_filter('wp_nav_menu_items','my_nav_menu_positioned_notif_counter', 10, 2);

    — So, I’m trying to figure out how to add style to the first part, which is .bp_get_total_unread_messages_count( bp_loggedin_user_id()) and then I want to add style to the second part, which is .$name

    I’ve played around with it, but can’t figure it out. I try to stick <span class=”partone”> and </span> around the first part, but then when I add it to my stylesheet, the style doesn’t reflect. I assume there’s some trick to styling sub-elements, within an array?

Viewing 1 replies (of 1 total)

  • metalhead



    There’s no trick. I was putting the <span in the wrong place. It has to go before the single quote. (And of course /span after the other single quote.)

    Then, I did the same thing for the other element.

    So there you have it – an awesome way to show unread messages in a menu item. The only thing missing now is a way to automatically update the count when the user gets a new message. Any suggestions on that?

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.
Skip to toolbar