BuddyPress.org

Hey @osisis,

Glad to see you sorted it. This was my code:

function bptest_main_nav_notification_bubble( $items, $args ) {
    if( $args->theme_location == 'header-menu' ) { // In manage locations via WP Dash>Appearance>Menus
    	$items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) ) {
            $items_array[] = substr( $items, 0, $item_pos );
            $items = substr( $items, $item_pos );
        }
        $items_array[] = $items;
        array_splice( $items_array, 3, 0, '<li id="bubble">' . bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) . '</li>' ); // 0,0 1st position, 1,0 2nd, etc
        $items = implode( '', $items_array );
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'bptest_main_nav_notification_bubble', 10, 2 );

I gave it the ID ‘bubble’. You can obviously give it a class if you want too (class=”bubbles”).

Hi @mikee1001,

The code i used for inserting the bubble counters for notifications, unread messages and total friends is:

// Notification counter bubble
function bptest_main_nav_notification_bubble( $items, $args ) {
    if( $args->theme_location == 'header-menu' ) { // In manage locations via WP Dash>Appearance>Menus
    	$items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) ) {
            $items_array[] = substr( $items, 0, $item_pos );
            $items = substr( $items, $item_pos );
        }
        $items_array[] = $items;
        array_splice( $items_array, 3, 0, '<li class="bubble">' . bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) . '</li>' ); // 0,0 1st position, 1,0 2nd, etc
        $items = implode( '', $items_array );
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'bptest_main_nav_notification_bubble', 10, 2 );

// Unread message counter bubble 
function bptest_main_nav_message_bubble( $items, $args ) {
    if( $args->theme_location == 'header-menu' ) { // In manage locations via WP Dash>Appearance>Menus
        $items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) ) {
            $items_array[] = substr( $items, 0, $item_pos );
            $items = substr( $items, $item_pos );
        }
        $items_array[] = $items;
        array_splice( $items_array, 5, 0, '<li class="bubble">' . bp_get_total_unread_messages_count( bp_loggedin_user_id() ) . '</li>' ); // 0,0 1st position, 1,0 2nd, etc
        $items = implode( '', $items_array );
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'bptest_main_nav_message_bubble', 10, 2 );

// Total friends counter bubble
// Note, 'bp_friend_get_total_requests_count' will give the total connection request count if desired
function bptest_main_nav_friend_bubble( $items, $args ) {
    if( $args->theme_location == 'header-menu' ) { // In manage locations via WP Dash>Appearance>Menus
        $items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) ) {
            $items_array[] = substr( $items, 0, $item_pos );
            $items = substr( $items, $item_pos );
        }
        $items_array[] = $items;
		array_splice( $items_array, 7, 0, '<li class="bubble">' . friends_get_total_friend_count( bp_loggedin_user_id() ) . '</li>' ); // 0,0 1st position, 1,0 2nd, etc
        $items = implode( '', $items_array );
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'bptest_main_nav_friend_bubble', 10, 2 );

In each of the above you will want to change the theme_location == 'header-menu' to theme_location == 'INSERT YOUR HEADER MENU NAME HERE'. The name of your menu is found via your WP Dashboard > Appearance > Menus. The three functions above were inserted into bp-custom.php .

The positions of the bubbles will also need changing depending on where they should be in your menu. Do that by changing the numbers on the section array_splice( $items_array, 7, 0, '<li class="bubble">'. The comment alongside the line in the code should help you.

You’ll also need some CSS for the bubbles otherwise you probably won’t see them even if they are functioning. If you hit ctrl-A to select everything on your web page, they should show up somewhere in your menu (assuming the code has been implemented correctly of course).

As you can see in the functions above all the bubbles have been given a class called “bubble”. So put in your style.css (of your child theme) something like:

#main-navigation .main-nav ul li.bubble {
	transform: translate(0, 50%);
	width: 20px;
	height: 20px;	
	padding: 2px 6px; 
	border: 1px solid #000;
	border-radius: 50%;
	margin: 0 10px 0 0;
	background: #fff;
	color: #000;
	font-size: 11px;	
}

The selector (#main-navigation .main-nav ul li.bubble) may be different on your site because it will depend on your theme etc. So use the developer tools, F12 button, on your browser to find out the correct one. It will be the bit before the .bubble that is different.

Hopefully the above helps!

Hi mikee1001,

No worries :). I’m not familiar with that theme. But from your demo link (used the first of the three demos), the selector might be either:

.top-bar ul>li.bubble or .top-bar ul>li.has-dropdown.bubble .

This assumes that your live version of the theme is set up like their demo though. Note that I have added the .bubble. As a check if you remove that bit from the selector and add something like border= 1px solid red; you should see a change on your site. If not then the selector is wrong.

Have you got the bubbles appearing successfully somewhere on the page (even though you haven’t got the correct selector yet)? Check by pressing ctrl-A to select all, which highlights everything on your site in blue, then you can look for the numbers which are your notification counters etc. If you can’t see them then something may have been done wrongly and would need to be addressed prior to finding the correct CSS selectors.

If you manage to get them appearing and put a link to your site then I could tell you what the correct selector is.

Those selectors were based on the Themeforest demo site, so they may not match your actual site. Without seeing your site its not possible to say. So you’ll have to use f12 to find out if its correct.
Did you try ctrl-A without including any new bubble or top-menu CSS to see if anything was there?
Did you insert the correct name of your menu in the php code?

Hi @mikee1001,

Did you insert the php functions above into functions.php or bp-custom.php? The code works in both but it is preferable to put BuddyPress specific modifications in the bp-custom.php file (remember the <?php and ?> tags).

Do you have other functions in the same file where you are inserting this code which are working correctly even if the bubble functions aren’t?

Hi @aminipix ,

From the pic, your selector should be something like #footer-menu ul li.bubble. It may be slightly different to that (there maybe something between the #footer-menu and ul part) but without a link to that page of your site it is tricky to say. It could also be div#footer-menu #menu-app_footer ul li.bubble, like i said, tricky for me to say without hands on.

You are on the right track though looking at the pic. If the above doesn’t work you could try clicking on the li id=menu-item-1633... as your pic shows and look in the ‘Styles’ window. See what the selector path being used for that is and add the .bubble onto the end.

As for showing the wrong number, not sure what that’s about. Is there a code conflict with another function or plugin you are using?

Hi @aminipix,

This css should work:

#footer-menu ul li.bubble {
    transform: translate(0, 20%);
    min-width: 22px;
    height: 22px;
    padding: 4px;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 10px 0 0;
    background: #fff;
    color: #000;
    font-size: 11px;
    line-height: normal;
    text-align: center;
}

The problem seemed to be mainly caused by the line-height properties of your .tab class which is also being used by the text in your bubble. If you use the F12 button and locate the line ul id="menu-app-footer" class="footer-menu tabs tabs-icon-top" (its just above where the bubble is), then scroll down the Styles window to the .tabs selector, you will see what i mean about the line-height (set to be 49px).

The php code shows the notification count for the logged in user, so check that what is being displayed for a user is actually the correct number of notifications. If viewing the profile page of another user for example, the numbers will stay the same since the logged in user is the same. If the numbers are changing, then maybe there is a conflict with another function or plugin. As for when you are logged out, do you even need to see the notification bubbles? If not then maybe just prevent them being visible from anyone who is not logged in.