Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] Position Notification Counter Bubble after Specific Navigation Tab ID


  • @mcuk
    Participant

    @mcuk

    Hi all,

    I am trying to insert a notification counter bubble within my main navigation menu after one specific ‘menu item li id’. Using the code below I have managed to display the counter correctly on the page but am unable to work out how to place it where I want after the desired menu item. Can anyone offer any pointers?

    I already have the code to display the notification counter:

    echo bp_notifications_get_unread_notification_count( bp_loggedin_user_id() );

    I then added it to my theme’s child header.php within the main menu container div and gave it it’s own div & id to enable styling:

    <div id="testid"><?php echo bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ); ?></div>

    (Putting it here was just a test to see if the echo and CSS were correct).

    The CSS which makes it appear correctly:

    #testid {
    	background: #eee;
    	border-radius: 50%;
    	border: 1px solid #ccc;
    	color: #000;
    	display: inline;
    	font-size: 70%;
    	margin-left: 2px;
    	padding: 3px 6px;
    	text-align: center;
    	vertical-align: middle;
    }

    I ran a search for ‘notification counter’ along with a few other things but didn’t come across a recognisable solution.

    Thanks

Viewing 25 replies - 1 through 25 (of 43 total)

  • danbp
    Moderator

    @danbp


    @mcuk
    Participant

    @mcuk

    hi @danbp,

    I saw it, didn’t take anything from the code in the last post. Am i missing something?

    Or are you referring to the guy who said to build the menu manually?


    danbp
    Moderator

    @danbp

    The topic shows an example of code to get a correct notification counter. The snippet shows also how you can use already existing CSS. There is no need to reinvent the whell for just adding a notif’ counter, even if it’s a custom one.

    Can you give more details about the menu code you’re using.
    Which menu is concerned ? Or a screenshot of what/where your custom function is acting ?


    @mcuk
    Participant

    @mcuk

    All the code I’ve used is in the post above. Not required any custom functions.

    The function: bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) was mentioned here:

    https://buddypress.org/support/topic/how-to-get-notification-count-code/

    Just echoing that function in my child header.php gives me exactly what i needed (along with the CSS i posted). Everything works fine.

    The only issue is to locate it within the menu itself in the correct location after the Notification tab, which i cannot do in the header file. At the moment I am only able to locate it within the container that holds the menu.

    The menu I am using I have created via WP > Appearance > Menus. Just a bog standard menu in the header of the page.


    danbp
    Moderator

    @danbp

    Two snippets to do this (hopefully). The first has a fixed position (latest by default), the second let’s you choose the position.

    function my_nav_menu_notif_counter($menu) {      
            if (!is_user_logged_in())
                    return $menu;
            else
                    $notif = '<li>Notif '. bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</li>';
                    $menu = $menu . $notif;
                    return $menu;
    }
    add_filter( 'wp_nav_menu_items', 'my_nav_menu_notif_counter' );
    
    See comment how to apply a position
    function my_nav_menu_positioned_notif_counter( $items, $args ) 
    {
        if( $args->theme_location == 'primary' ) // only for primary menu
        {
            $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, 0, 0, '<li>Notif '. bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</li>'); // 0,0 is first position, 1,0 is second, etc
    
            $items = implode('', $items_array);
        }
        return $items;
    }
    add_filter('wp_nav_menu_items','my_nav_menu_positioned_notif_counter', 10, 2);

    Reference: https://developer.wordpress.org/reference/hooks/wp_nav_menu_items/


    @mcuk
    Participant

    @mcuk

    Thanks @danbp, exactly what i needed to position the counter bubbles! Both snippets worked great.
    I updated the theme_location arg in the second to get it to work with my menu and added an ID to allow the CSS. Thanks again!

    For anyone looking to do the same with the messages and friends request counters, replace the:

    bp_notifications_get_unread_notification_count

    with

    bp_get_total_unread_messages_count or bp_friend_get_total_requests_count as needed.


    Osisis
    Participant

    @osisis

    @mcUK Can you tell me where you added the ID to allow for the CSS?


    Osisis
    Participant

    @osisis

    PLEASE DISREGARD

    Reading is fundamental and after I carefully read through the code I figured out where the ID went. My apologies. Only thing I changed was the CSS adding a negative margin so it overlapped my menu border.

    @danbp many thanks!


    @mcuk
    Participant

    @mcuk

    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”).


    mikee1001
    Participant

    @mikee1001

    Hi @mcuk , I’ve added Buddypress menu items (e.g. messages, notifications etc.) in my main WordPress menu, together with WordPress menu items (e.g. home). I also want to have the notification counters next to each of the Buddypress items, but am struggling to get your solution to work for me (doesn’t help I’m not that proficient in coding)! Should I add the code above to the functions.php of my child theme, and is it only that one file I need to edit?

    Many thanks.


    @mcuk
    Participant

    @mcuk

    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!


    mikee1001
    Participant

    @mikee1001

    Thanks so much for your step by step guide @mcUK. I’ve followed your instructions, but am stuck on changing the CSS Selector. The theme I’m using is (http://themeforest.net/item/sweet-date-more-than-a-wordpress-dating-theme/full_screen_preview/4994573), I’m trying to put the notifications in the top menu (Welcome/Features/Forums… on the demo, but I’ve added Buddypress menu items there). Do you know which selector I would need to use for that? Many thanks.


    @mcuk
    Participant

    @mcuk

    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.


    mikee1001
    Participant

    @mikee1001

    Thanks again @mcUK, I still cant get it to show correctly 🙁 If I use .top-bar ul>li.bubble or .top-bar ul>li.has-dropdown.bubble I don’t see any bubbles, but when I remove the ‘bubble’ I see the top menu squashed up with lots of empty bubbles (with .top-bar ul>li), and a bubble next to the one dropdown item of my main menu (.top-bar ul>li.has-dropdown). I don’t see any numbers in the bubbles though, they are empty. Any ideas?


    @mcuk
    Participant

    @mcuk

    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?


    mikee1001
    Participant

    @mikee1001

    I inserted the correct name of the menu into the php code, and tried ctrl-A, but couldn’t see anything. I’m going to see if anything else I have missed or that could have gone wrong.


    @mcuk
    Participant

    @mcuk

    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?


    mikee1001
    Participant

    @mikee1001

    Hi @mcUK, sorry for the delay. I did put the code into bp-custom.php, and included the opening & closing php tags, I can only think it’s clashing with something else, but I’m trying to see if that is the case right now…


    mikee1001
    Participant

    @mikee1001

    I got this working in the end… I had to change the first letter of ‘Primary’ menu to lowercase! Is there code I can add to not display ‘0’ after messages, for instance if there are no new messages, then ‘0’ is not displayed?

    I’ve got another plugin for Buddypress called ‘Compliments’ which also has a notification counter, is there a way to clear the reset counter of those notifications, once a person has viewed that particular page?

    Many thanks.


    @mcuk
    Participant

    @mcuk

    Ouch! At least you got there in the end.

    There is probably a way via php using an if statement. Javascript may also be an avenue using getElementsByClassName("bubble").innerHTML. Tried a few out but no success at moment.

    Not used Compliments myself, but maybe someone on their support can help with that.


    mikee1001
    Participant

    @mikee1001

    Ok, thanks @mcUK


    aminipix
    Participant

    @aminipix

    Hi!
    @mcUK, I am really struggeling with the class selector! I cant figure out where to find my themes selector for #main-navigation .main-nav ul li.bubble {
    Pressing f12, what should I be looking for? See the picture below.
    Picture

    Also, when not logged in, I get the number “13” instead of “0”…
    Please advice….

    best regards!


    @mcuk
    Participant

    @mcuk

    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?


    aminipix
    Participant

    @aminipix

    Thanks ALOT for the response @mcuk .

    With the #footer-menu ul li.bubble I did manage to get a white bubble, however it was placed above the number. The number is also appearing below the bubble and not inside…

    The website is at this link.

    Also it shows a number even though I am not logged in, one time it was 13 and one time it was 2. Any clue? I was expecting it to show 0, with the conversation I have seen above…


    @mcuk
    Participant

    @mcuk

    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.

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