How to Add Admin Bar and Admin Menu or Submenu Notification Bubbles?

2 comments

1. You just create the bubble (circle) with CSS, and have text site on top of it.

   Example CSS

   span.mbe-update-bubble{
       position: absolute !important;
       top: 6px !important;
       left: 6px !important;
       -webkit-border-radius: 10px !important;
       -khtml-border-radius: 10px !important;
       -moz-border-radius: 10px !important;
       border-radius: 10px !important;
       background: #ccc !important;
       color: #464646 !important;
       width: 10px !important;
       height: 10px !important;
       padding: 3px !important;
       font-size: 11px !important;
       line-height: 10px !important;
       display: inline-block !important;
       text-align: center !important;
       text-shadow: none !important;
       font-weight: bold !important;
   }
   span.mbe-ab-text{
       position: relative !important;
       margin: 0px -6px !important;
       font-weight: normal !important;
   }
   span.mbe-ab-text-active{
       position: relative !important;
       margin-left: 14px !important;
       color: #91b1c6 !important;
       font-weight: bold !important;
       text-shadow: 0px 0px 1px #000 !important;
   }
   

   Adding a pending posts function:

   function admin_tool_bar($wp_admin_bar){
       global $wp_admin_bar;
       $post_type = 'testimonial';
       $count = wp_count_posts($post_type);
       $args = array(
           'id' => 'mbe_testimonials_pending',
           'href' => admin_url('/edit.php?post_status=pending&post_type='.$post_type, 'http'),
           'parent' => 'top-secondary'
       );
       if($count->pending == 1){
           $title = ' Testimonial Awaiting Moderation';
       } else{
           $title = ' Testimonials Awaiting Moderation';
       }
       $args['meta']['title'] = $title;
       if($count->pending == 0){
           $display = '<span class="mbe-ab-text">'.$count->pending.' '.$title.'</span>';
       } else{
           $display = '<span class="mbe-update-bubble">'.$count->pending.'</span><span class="mbe-ab-text-active">'.$title.'</span>';
       }
       $args['title'] = $display;
       $wp_admin_bar->add_node($args);
   }
   

   And in order for the admin bar item to be added, fire the hook:
   add_action('wp_before_admin_bar_render', 'admin_tool_bar', 999);

   Example Screenshot:

   

   Log in to Reply

2. I don’t have an answer for the admin bar bubble but here is how you can add it to a NEW admin menu item like this:

   (NOTE: Here I’m getting the count for a group of Gravity Form fields, but you can change where you get the count.. displaying it is still the same)

   function register_my_custom_menu_page() {
       $search_criteria = array(
           'status'     => 'active', //Active forms 
           'field_filters' => array( //which fields to search
               array(
                   'key' => 'is_read', 'value' => false, // let's just get the count for entries that we haven't read yet.
               )
             )
           );
   
       // Add the form IDs to the array below, the parent menu will show ALL unread entries for these forms
       $notification_count = GFAPI::count_entries( array(1,4,5,6,11,13), $search_criteria );
       
       add_menu_page(
           'Full Quote Form submissions', // Page Title
           // here we're going to use the var $notification_count to get ALL the form IDS and their counts... just for the parent menu item
           $notification_count ? sprintf( 'Quotes <span class="awaiting-mod">%d</span>', $notification_count ) : 'View Quotes',
           'manage_options', // Capabilities 
           'admin.php?page=gf_entries&id=13', // menu slug
           '', // callback function
           'dashicons-format-aside', // icon URL
           6 // position
       );
   }
   add_action( 'admin_menu', 'register_my_custom_menu_page' );
   

   Log in to Reply