Adding notification bubble to menu

[sharmstr]

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

If anyone is interested, here’s how I added a notification bubble to the top menu. I did this because I hate the admin bar and disable it on all of my sites. It adds a bubble between your last menu item and the search icon. The css sets it to gray if there are no notifications and teal if there are. You can change that to match your site’s style.

In your child theme’s function.php file

COPY CODE

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."</li>";
    
	return $items;
}

In your child theme’s style.css file, add

COPY CODE

#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;
}

The code is a bit bloated because I have it working with the bp live notification plugin so the bubble count updates without page loads.

Obviously, use at your own risk and don’t bug the nice people here if you have problems with it.

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Blake]

Awesome – thanks for this!

I added a link to the notifications page too

COPY CODE

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."</span></a>";

Blake

[sharmstr]

Hey Blake,

I actually had that in my code, but when I pasted it and submitted, it cleared it out. Lets try that again 🙂

return $items."<li id='menu-bp-notifications' class='menupop'><span id='ab-pending-notifications' class='" . $pending . " " . $alert . "'>".$count."";

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

It keeps cutting it out 🙁

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Blake]

I used pre> rather than and I pasted the "<" withd &amplt;

[Blake]

Awesome hack anyway!!!

[Kieran]

Hey,

I know this is a real long shot, but is there any chance you can turn this into a plugin?…

[sharmstr]

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.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Kieran]

Okay thanks – it was a long shot.

I don’t suppose you would care to add this functionality Abe? 🙂 Pretty pretty please, I think it would make the theme stand out even more.

[sharmstr]

Kieran,

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

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Kieran]

Ok if you’re willing to talk me through it?

I have no idea how to make the child theme, nor any clue on where to place it within the functions file

[sharmstr]

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

COPY CODE

/**
* 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.

COPY CODE

#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.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abe]

Hi sharmstr. Thanks for sharing this. You should put the code in pre tags to show nicely

Thanks again

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[sharmstr]

I finally figured that out 🙂 Thank you!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[DaveKinetic]

I really want to use this addition, but when I use it i get the following error:

Parse error: syntax error, unexpected T_STRING in ../wp-content/themes/kleo-child/functions.php on line 29

The code on that line is return $items."<li id='menu-bp-notifications' class='menupop'><span id='ab-pending-notifications' class='" . $pending . " " . $alert . "'>".$count."";

[sharmstr]

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

COPY CODE

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.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

arrggg.

Here’s the code: https://github.com/colabsadmin/Kleo-Hacks/blob/master/NotificationBubble

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[DaveKinetic]

Thank you sir! 🙂

[Kieran]

Finally got around to trying this out, works a treat, thank you very much!

[Kieran]

Actually I’ve had a thought just to polish it off, is it possible to wrap this in some kind of ‘if user not logged in’ as it’s visible to logged out users.

Thanks

[sharmstr]

Yeah, that’s a good idea. I’m building a private site, so I never think about those things. Wrap it in a

COPY CODE

if ( is_user_logged_in() ) { my code here } 

Haven’t tested it but should work.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Kieran]

Legend, thank you 🙂

[DaveKinetic]

Sorry to be annoying. Anyway to exclude it from the main menu and only show it in the top menu?

[sharmstr]

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.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[DaveKinetic]

I found a tutorial here. My menu is called top-menu

Copied his code (I think) and came up with this:

COPY CODE

if ( is_user_logged_in() && $args->theme_location == 'top-menu')  {  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;
}
}

That removes the bubble from both though. I know sharmstr is busy, so maybe someone else can see where I am going wrong.

[sharmstr]

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/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[DaveKinetic]

I shall give this another go tomorrow. Thanks for the link.

[Kieran]

Been tinkering trying to make another to appear alongside for message notifications – but with little success. Does anyone have any thoughts on achieving this?

[sharmstr]

If you’re a bit more specific about where you’re getting stuck, I might be able to help.

If you want to get the unread message count, you’ll have to use messages_get_unread_count instead of bp_notifications_get_notifications_for_user( bp_loggedin_user_id() )

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Kieran]

Hey,

So this is as far as I have got, no longer getting array or blank webpage, but notifications and messages are being displayed under one leaving the second blank. [ screenshot below shows a message and a notification under one, and not the two 🙁 ]

http://postimg.org/image/c7taiek97/

Pastebin of code used

http://pastebin.com/arp7BEKA

[sharmstr]

Hey Kieran,

If you look at your code, you are setting $notifications to messages_get_uread_count. But then below that, you are setting $count to the value of $messages (instead of $notifications), which isn’t defined, so it will always return ‘0’. Furthermore, messages_get_unread_count will return a number, including 0, so you dont need the $count line anyways.

Anyhow, replace

COPY CODE

$notifications = messages_get_unread_count( bp_loggedin_user_id() );
$count         = ! empty( $messages ) ? count( $messages ) : 0;

with

COPY CODE

$count = messages_get_unread_count( );

And you should be all set.

Side note. Instead of calling

COPY CODE

if ( is_user_logged_in() ) {

twice, just wrap both menu functions within one.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Kieran]

Hi @sharmstr ,

I wanted to thank you for all of your invaluable help on this. I have now achieved what I was hoping to produce – thank you muchly!

Attached screenshot.

http://postimg.org/image/nxj0fmlxp/

[sharmstr]

Good job Kieran. I just uploaded my live site so I’ve been a bit busy, but soon I’m going to try to make a plugin out of this that auto updates the notifications without a screen refresh. I have it working on my site flawlessly, but its a pain to configure. And if I have enough time, I’m going to make it a drop down so you can see what the notifications are, link to them and clear them all.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Kieran]

That sounds superb, please do let me know if you find some time for that.

[giorgos]

Kieran,

Looks perfect. If you want can you please share your code (including icons,css) for achieving this. http://postimg.org/image/nxj0fmlxp/

Thanks,
Giorgos

[Kieran]

It’s a total hack job, but here you go.

http://pastebin.com/y1c7bGgD

Images are not included and you’ll require 16×16, a quick google will find you thousands of free to use web icon packs.

[giorgos]

Thanks Kieran!. Works fine. Hope it gets officially released as theme option 😉

[Abe]

Thanks guys, we might just include it with some admin customizations

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[JoYagusa]

this is for notification bubble when i receive friends requests etc etc?

isnt that build in , in version 1.3 ?

in Buddypress setting i have “notifications” enabled
(Notify members of relevant activity with a toolbar bubble and/or via email, and allow them to customize their notification settings.) … but when i had a friend request i received only a notification mail and not a visual toolbar bubble..

is something i miss or i have to add the code above?

thanks 🙂

[Kieran]

This feature replicates, in a way, the notification area in Facebook. It’s main use would be where you do not have the WP/BP toolbar in use (hidden).

If you wished to use this feature you would have to add the code to your the kleo child theme. ( see post https://archived.seventhqueen.com/forums/topic/adding-notification-bubble-to-menu/#post-11914 )

As per the post previous to yours Abe suggested he might add this to the theme, so if you’re not confident in achieving this you could wait for a future release.

[Author]

Posts