Adding notification bubble to menu

It keeps cutting it out 🙁

Hey kieran, probably not. I’m just trying to get my site launched at this point. I’m under a deadline and sorting out all the issues with this theme is my main priority. Sorry, man.

Kieran,

Just put it in your child’s functions.php. Super simple man. Let me know if you need help.

THIS IS OLD INFORMATION. THE NOTIFICATION BUBBLE IS NOW IN KLEO. DO NOT USE THIS CODE

You should read up on child theme’s. They are important.

Basically a child them lets you override settings of the main theme and keep those changes safe from theme updates. If you were to put my hack in the main theme function.php file, you’d lose it when you apply an update.

In the zip file you downloaded for the theme, there should be two theme zip files in the wordpress folder. You should have installed kelo.zip first. Then if you installed kleo-child.zip and activated that as your theme, you’d have a child theme to put your hacks in. (simple terms… install both themes and activate the child theme.)

Once you’ve done that, you can add your hacks. In the admin, go to Appearance -> Editor. On the right hand side, click on Theme Functions (functions.php). Below the ‘add custom code below’ put this: (NOTE: If you dont see ‘Kelo Child’ selected in the upper right hand corner where it says ‘Select theme to edit’ then stop. You probably dont have the child them active. Go back to the beginning.)

/**
* notifications
**/
add_filter('wp_nav_menu_items','add_notification_to_custom_menu', 2, 2);

function add_notification_to_custom_menu( $items, $args ) {
	$notifications = bp_notifications_get_notifications_for_user( bp_loggedin_user_id() );
	$count         = ! empty( $notifications ) ? count( $notifications ) : 0;
	if ($count > 0 ) {
		$alert = 'alert';
		$pending = 'pending-count';
	} else {
		$alert = 'no-alert';
		$pending = 'count';
	}
	return $items."<li id='menu-bp-notifications' class='menupop'><a href='".bp_loggedin_user_domain()."notifications/'><span id='ab-pending-notifications' class='" . $pending . " " . $alert . "'>".$count."</a></li>";
    
	return $items;
}

Click ‘Update File’

Now, to style the bubble, click on ‘Stylesheet’ on the right hand side.

Put this in there.

#ab-pending-notifications {
    background: none repeat scroll 0 0 #ddd;
    border-radius: 10px;
    color: #FFFFFF;
    display: inline;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    text-shadow: none;
}

#ab-pending-notifications.alert {
    background-color: #1FB3DD;
    color: #FFFFFF;
}

Click ‘Update File’.

That should do it. Now, you may have to change the colors of the bubble to suit your site. These will not change automatically using the Theme setting editor. The two colors you’ll have to adjust in the CSS are ‘#ddd’ (no notification) and #1fb3dd (has notification).

This should work, though this code alone will not live update the notification bubble. That’s a bit more advanced. It will however update the notification count on each page refresh. Mine live updates, so let me know if these doesnt work for you without the live update code.

Good luck my friend and do yourself a favor and read up on child themes.

I finally figured that out 🙂 Thank you!

Looks like you copied the code from the start of the thread where I was using the code wrapper ad it was removing some of the code. Here it is again

add_filter('wp_nav_menu_items','add_notification_to_custom_menu', 2, 2);

function add_notification_to_custom_menu( $items, $args ) {
	$notifications = bp_notifications_get_notifications_for_user( bp_loggedin_user_id() );
	$count         = ! empty( $notifications ) ? count( $notifications ) : 0;
	if ($count > 0 ) {
		$alert = 'alert';
		$pending = 'pending-count';
	} else {
		$alert = 'no-alert';
		$pending = 'count';
	}
	return $items."<li id='menu-bp-notifications' class='menupop'><a href='".bp_loggedin_user_domain()."notifications/'><span id='ab-pending-notifications' class='" . $pending . " " . $alert . "'>".$count."</a></li>";
    
	return $items;
}

EDIT: The code is still getting cut off. Make sure you have a closing li at the end of the long $items var.

You’re not annoying, but I was just sharing what I did. I’m under a deadline to launch this site so unfortunately dont have time to sort that out for you.

Do a search for a way to determine which menu is being displayed by the name you’ve given it and add that condition to the code.

I’m pretty sure that theme_location is looking for the LOCATION of the menu, not the name. When you set up the menu, at the bottom you can specify “Primary Menu” or “Top Menu”. If you look at the html for those radio buttons, they are either ‘top’ or ‘primary’. Try it with just “top” instead of “top-menu”. This is just a guess man. Good luck.

edit: this is why i think this will work: http://pixert.com/blog/wordpress-conditional-tag-to-check-specific-menu/