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

Question

What would you recommend to use as far as manipulating the admin bar goes? I was thinking to just add a new admin bar node, and with CSS set a background image for the icon. Then in the node, just output the count.

I have no idea how to add bubble notifications on the admin menus or admin submenus though. Any advice?

Answer 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:

Answer 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' );