Skip to:

Change Colors on Buddypress Notifications !

  • antoinegdln4


    Hi Everyone !
    One year ago, i try to put the notifications of the Buddypress bar into my header.
    And, thanks to the members of this forum, it works succesfully.
    I have now a new item on my menu, and it’s a count of the notifications.

    But i want to see immediatly when there is a new notification !
    I would like to change the color of the notification bubble only when there is a new (ou more) notification !
    Can you help me ? :/

    There is my actual php code, on the bp-custom.php

    function my_nav_menu_notif_counter($menu) {      
            if (!is_user_logged_in())
                    return $menu;
                    $notif = '<li ><a class="ab-item" href="' . bp_core_get_user_domain(bp_loggedin_user_id() ) . 'notifications/">'. __('').'<span id="ab-pending-notifications" class="pending-count alert">'. __(''). bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) .'</span> </a></li>';
                    $menu = $menu . $notif;
                    return $menu;
    add_filter( 'wp_nav_menu_items', 'my_nav_menu_notif_counter' );
    add_filter( 'show_admin_bar', '__return_false' );

    Sorry if my english is bad, i’m french
    I have bad knowledges in Php, but i can try to understand the code

    WP 4.4.5
    BP 2.6.2

Viewing 4 replies - 1 through 4 (of 4 total)

  • antoinegdln4


    My question is “How can i include this code

    $notifications = bp_core_get_notifications_for_user( bp_loggedin_user_id(), ‘object’ );
    $count = !empty( $notifications ) ? count( $notifications ) : 0;
    $alert_class = (int) $count > 0 ? ‘pending-count alert’ : ‘count no-alert’;
    $menu_title = ‘‘ . $count . ‘‘;

    (who can get the class [and color] i want) to my previous code…. ”
    Thanks !



    That method also adds notifications in all the menus in the site. Anyone knows how to show only in certain menu?



    I only know the method to put the notifications in the main menu… :/
    By the way, this topic is solved, i got the answer on overflostacks…

    Florian Bansac


    If there are still people looking for help, I have been trying different things today to:
    -add the notifications counter in menu
    -style differently if 0 notifications or 1+
    -target only the main

    It works for me, maybe you can check from here:

    // 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;
                    // 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;
    			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;


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