How to Add a Notification Bubble to WordPress Left Menu

While developing plugins for our clients I sometimes find myself needing a way to draw attention to that particular section of the administration area. WordPress unfortunetly doesn’t support a way to easily add notifications so I created a quick snippet of code that will do just that. I hope you find it useful in your development.

function draw_bubble(){
	$target_menu = "toplevel_page_sam-list";
	$bubble_msg = '5';
	$bg_color = '#464646';

	?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			jQuery('li#<?php echo $target_menu ?> a.wp-has-submenu').append('<span class="update-plugins" style="background-color: <?php echo $bg_color ?>"><span><?php echo $bubble_msg ?></span></span>');
		});
	</script>
	<?php

}

add_action('admin_print_scripts','draw_bubble',10000);

All you have to do is add this to your plugin or functions.php file and you’re ready to go. There are three parameters that need to be set:

1. target_menu: this is the menu you want to target, just inspect your admin screen with Firebug and you need to grab the ID of the LI menu LI element
2. bubble_msg: this is the actual message you want to display, you can use a number or string. This would work more on case by case basis so you could write a query that returns a number of recently commented on posts or number of posts waiting to be approved for publishing.
3. bg_color: this is the color that you want the bubble background to be.

Let me know if you run into any issues but I hope you can find a use for this code.