Search code examples
colorsnotificationsbuddypress

I try to add CSS class (color) for the “unread” notifications count


I'm trying to get a different color for “new” unread notifications, while i've managed to style the notifications as a whole i'm somehow not able to do the same for the unread ones in terms of giving the unread count an extra css class.

Asked already in the BP community support forum to get some tips but it seems the community struggles with emptyness.

Could anyone help here please?

My actual code in my themes functions.php (WP):

//notification alert
function my_nav_menu_notif_counter($menu) {      
        if (!is_user_logged_in())
                return $menu;
        else
                $notif = '<a class="notices" href="' . bp_get_notifications_unread_permalink() . '"><span class="noticecount"><i class="noticecounttitle">Notifications</i>'. bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</span></a>';
                $menu = $menu . $notif;
                return $menu;
}
add_filter( 'wp_nav_menu_items', 'my_nav_menu_notif_counter' );

Update: big thanks to thunderfury,


Solution

  • //notification alerts for posts
    function my_nav_menu_notif_counter($menu) {      
            if (!is_user_logged_in())
                    return $menu;
            else
                    $countntf = bp_notifications_get_unread_notification_count( bp_loggedin_user_id() );
                    $notif = '<a class="notices" href="' . bp_get_notifications_unread_permalink() . '"><span class="noticecount'. (($countntf>0) ? ' NEW CLASS HERE':'') .'"><i class="noticecounttitle">Notifications</i>'. $countntf .'</span></a>';
                    $menu = $menu . $notif;
                    return $menu;
    }
    

    your bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ); function returns unread counts, you can can keep it in a variable like $countntf.

    Above example checks returned value if greater than 0, its print your class name in span element. Also you can change class element span to link element like;

    <a class="notices'. (($countntf>0) ? ' NEW CLASS HERE':'') .'"