The snippets works as expected and show the counters to LOGGED-IN user.
Check the source code of the items.
You should have something like this while looged-in:
<li><a href="..../messages/ ">Messages (0)</a></li>
<li><a href="..../notifications/ ">Notifications (3)</a></li>
The count is in brackets.
If you want a real bubble, you have to style it yourself with css. To do so, you need to add a span around the counter. Exactly like this:
Notifications<span class="my_bubble">('. bp...blah... .')</span></a>
@danbp Okey! I will try later. 😉
@danbp Does not work, please, send me the full code for to show bubbles (span count) (the css I know, is the same for the Native bubbles)
RESOLVED! Thanks @sbrajesh
CODE :::::::: Put this Code Inside your function.php ChildTheme
//Add Count Near Nav Menu With Bubble
function my_counter_nav_menu($menu) {
if ( ! is_user_logged_in() ) {
return $menu;
}
$user_id = bp_loggedin_user_id();
$user_url = bp_loggedin_user_domain();
$msg_url = $user_url . bp_get_messages_slug() . '/';
$notify_url = $user_url . bp_get_notifications_slug() . '/';
ob_start();
?>
<li><a>">Messages <span class="my_bubble_notify"><?php echo bp_get_total_unread_messages_count( $user_id );?></span> </a></li>
<li><a>">Notifications <span class="my_bubble_notify"> <?php echo bp_notifications_get_unread_notification_count( $user_id );?></span> </a></li>
<?php
$menu_items = ob_get_clean();
$menu = $menu . $menu_items;
return $menu;
}
add_filter( 'wp_nav_menu_items', 'my_counter_nav_menu' );
––––––––––––
CSS::::: Put this Code Inside your style.css ChildTheme
.my_bubble_notify {
border-radius: 25%;
border: 1px solid #ccc;
background: #eee;
color: #6c6c6c;
display: inline;
margin-left: 1px;
padding: 2px 6px;
text-align: center;
vertical-align: center;
font-size: small;
}
And thanks too @danbp 😉
I think that is a partial Solution because Bp Develps. Need to put this code inside Bp Core! So, What is the problem? @djpaul
Such snippet is usually working when added to bp-custom.php
bp-custom.php
Hi @danp
Yes, now and trying:
$notif = '
<li><a id="menu-item-154" href=" ' .$msg_url. ' "><span class="my_bubble">'. bp_get_total_unread_messages_count ( bp_loggedin_user_id() ) .'</span></a></li> ';
But I have two problems… 1) the item (Message) and the count (0) are separates. When you put the cursor over Message (I need to integrate… but how? )
2) For 400px Screen (iPhone, etc.) the bubble disappear, is down…. Help me!
Hi @danbp
Me again.
First look at this:
// Add Count Near Nav Menu
function my_counter_nav_menu($menu) {
if ( ! is_user_logged_in() ) {
return $menu;
}
$user_id = bp_loggedin_user_id();
$user_url = bp_loggedin_user_domain();
$notify_url = $user_url . bp_get_notifications_slug() . '/';
ob_start();
?>
<li><a href="<?php echo $notify_url ?>">Notificaciones <span class="my_bubble"> <?php echo bp_notifications_get_unread_notification_count( $user_id );?></span> </a></li>
<?php
$menu_items = ob_get_clean();
$menu = $menu . $menu_items;
return $menu;
}
add_filter( 'wp_nav_menu_items', 'my_counter_nav_menu' );
This is a modification of your code for show notifications bubbles in Main Menu.
Okey, it works but, I dont want this line: <?php echo $notify_url ?>”>Notificaciones
I want to get bubbles for Buddypress-Nav-Menu. You know, Dashboard / Menus / Buddypress. Here you have buddypress links: profile, messages, etc. but, if you add “messages”, appear without counter. So, I want counter for these…
