WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

enter image description here

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

share|improve this question
up vote 2 down vote accepted

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

Example CSS

    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;
    position: relative !important;
    margin: 0px -6px !important;
    font-weight: normal !important;
    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;

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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.