I tried all sorts of things on this topic today, I ended up with something that looks like it’s working. Maybe you can try it:
// filter to target only main menu
add_filter('wp_nav_menu_items','my_nav_menu_notif_counter', 10, 2);
function my_nav_menu_notif_counter($menu, $args) {
$url = bp_core_get_user_domain(bp_loggedin_user_id()) .'notifications/';
// counter to target unread notifications = 0 or 1+
$bpnotifcount = bp_notifications_get_unread_notification_count( bp_loggedin_user_id() );
// condition: user must be loggedin
if (!is_user_logged_in())
return $menu;
else
// condition: only main nav
if( $args->theme_location == 'primary' ) {
// condition: 0 unread notifications
if($bpnotifcount == 0) {
$notif = '<li><a href=" ' .$url. ' ">Notifications <span class="notifmenucount">'. bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</span></a></li>';
} else {
$notif = '<li><a href=" ' .$url. ' ">Notifications <span class="notifmenucount countnot0">'. bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</span></a></li>';
}
$menu = $menu . $notif;
return $menu;
}
else
return $menu;
}
And CSS:
/*Notifications counter in menu*/
.notifmenucount {
border-radius: 25%;
border: 1px solid #ccc;
color: #888;
display: inline;
margin-left: 1px;
padding: 2px 6px;
text-align: center;
vertical-align: center;
font-size: small;
}
.countnot0 {
color: #ffff00;
background: #ff0000;
border: 1px solid transparent;
}
I hope it helps!
Florian, this is a great help for me. I was able to get the little circle with the number of notifications to show up on my header but is it possible to have the text “Notifications” next to it so people know what the number is for? thanks!
Hi,
The term “Notifications” is included in the output of the $notif variable, as you can see here:
// condition: 0 unread notifications
if($bpnotifcount == 0) {
$notif = '<li><a href=" ' .$url. ' ">Notifications <span class="notifmenucount">'. bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</span></a></li>';
} else {
$notif = '<li><a href=" ' .$url. ' ">Notifications <span class="notifmenucount countnot0">'. bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</span></a></li>';
}
There must be something in your WP theme preventing it to display, which you should modify.
Alternatively you may surround the “Notifications” mention in the function $notif with <span></span> tags, to which you can add your own css class or style, like this:
// condition: 0 unread notifications
if($bpnotifcount == 0) {
$notif = '<li><a href=" ' .$url. ' "><span class="your-notif-style">Notifications</span> <span class="notifmenucount">'. bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</span></a></li>';
} else {
$notif = '<li><a href=" ' .$url. ' "><span class="your-notif-style">Notifications</span> <span class="notifmenucount countnot0">'. bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</span></a></li>';
}