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

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:

enter image description here

Leave a Comment