WP Development

Adding one of those nifty WordPress admin menu notification number bubbles to your custom menu/submenu is quite easy.

The Basics

Just append the following snippet to your menu/submenu name and you’re good to go:

 $menu_title .= ' ' . $count . '';

Updating an Existing Menu

Adding a bubble to an existing menu/submenu is almost equally easy, and simply adds hooking into an action and identifying the menu item you wish to update. Lets say we want to add a notification bubble to the Users menu indicating the current number of Administrator users:

add_action( 'admin_menu', 'add_user_menu_bubble' );

function add_user_menu_bubble() {
  global $menu;

  $user_count = count_users();  // get whatever count you need
  $user_count = $user_count['avail_roles']['administrator'];

  if ( $user_count ) {

    foreach ( $menu as $key => $value ) {

      if ( $menu[$key][2] == 'users.php' ) {

        $menu[$key][0] .= ' ' . $user_count . '';

        return;
      }
    }
  }
}

Place the above code into your themes functions.php file, or into a custom plugin. The process is virtually the same for modifying submenu items, simply replace $menu above with $submenu and identify the submenu item to update.

Taking it Further

The above code is going to be executed with every admin page load, and perhaps your notification count involves some intensive database or network operation that you don’t want slowing down each and every admin page load (a good example of this is the plugin update check). If that’s the case, and it’s not critical that the count always be up-to-the-second fresh, you could make use of the WordPress Transients API to cache the value for some period of time, say 30 minutes. Just remember to add code to delete the transient after you perform whatever action the bubble is alerting you to.

Published by Nik McLaughlin

You can find Nik around the WP space, on LinkedIn, or on his personal blog.

8 Comments

  1. Hey, thanks for this tutorial.

    When I put your above code in my functions.php file, the backend won’t load.s. maybe it has some error?

    Also, I’ve spent some time trying to adapt this to my need, so far I did not succeed. I basically want to show the number of pending posts (of a custom post type) on its admin menu in a notification bubble like this.

    How would you go about doing that. Thanks a lot.

    • Hey Hassan, thanks for pointing that out, I’ve improved the sample code so it no longer breaks the admin. I guess you’d want to do something like:

      
      $count = wp_count_posts('custom-type-name');
      
      $pending_count = $count['pending'];
      
      
      • Thanks, justin. I managed to do it like this:

        // buuble notifications for custom posts with status pending

        add_action( 'admin_menu', 'add_pending_bubble' );

        function add_pending_bubble() {

        global $menu;

        $custom_post_count = wp_count_posts('custom-post-name');

        $custom_post_pending_count = $custom_post_count->pending;

        if ( $custom_post_pending_count ) {

        foreach ( $menu as $key => $value ) {

        if ( $menu[$key][2] == 'edit.php?post_type=custom-post-name' ) {

        $menu[$key][0] .= ' ' . $custom_post_pending_count . '';

        return;

        }

        }

        }

        }

        But how do I do it for each menu if I have multiple post types? My code will only count pending items of one post type.

  2. Hi Guys,

    I stumbled across this article looking to do something very similar for a client (bubble for pending cpt notification). Using the following per Justin’s suggestion causes everything to crash (white screen):

    `add_action( ‘admin_menu’, ‘add_pending_bubble’ );

    function add_pending_bubble() {
    global $menu;

    $count = wp_count_posts(‘testimonial’);
    $pending_count = $count[‘pending’];

    if ( $pending_count ) {
    foreach ( $menu as $key => $value ) {
    if ( $menu[$key][2] == ‘edit.php?post_type=testimonial’ ) {
    $menu[$key][0] .= ‘ ‘ . $pending_count . ”;
    return;
    }
    }
    }
    }`

    Using Hassan’s suggestion of:

    `add_action( ‘admin_menu’, ‘add_pending_bubble’ );

    function add_pending_bubble() {
    global $menu;

    $count = wp_count_posts(‘testimonial’);
    $pending_count = $count->pending;

    if ( $pending_count ) {
    foreach ( $menu as $key => $value ) {
    if ( $menu[$key][2] == ‘edit.php?post_type=testimonial’ ) {
    $menu[$key][0] .= ‘ ‘ . $pending_count . ”;
    return;
    }
    }
    }
    }`

    Does work as it adds the count number but it’s no longer small and no bubble is visible. Any further tips on getting this to work with pending notifications on cpt’s? Also curious about the multiple post types option Hassan mentioned above.

  3. Hey Justin, thanks for this snipet!
    Guys, if you want to format it as the ‘comments bubble’ you need to replace
    a) $menu[$key][0] .= ‘ ‘ . $custom_post_pending_count . ”;
    with
    b) $menu[$key][0] .= ‘ ‘ . $custom_post_pending_count . ”;

    That will do the trick.

  4. Hum.. its stripping the html code.. So I’ll add some spaces between , =, ” and /

    $menu[$key][0] .= ‘ ‘ . $custom_post_pending_count . ‘ ‘;

    Otherwise Justin you could probably add it to your post?
    Cheers

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.