Add a Custom Notification Bubble to the WordPress Admin Toolbar

In the previous article I showed how to display pending counts inside the WordPress admin menu. The same idea also works in the admin toolbar, which is often even more visible because it sits at the very top of every back-end screen.

In this example we add a menu item called New Messages on the right side of the toolbar and place a red bubble with the message count in front of the label.

Admin toolbar notification bubble example

Create the toolbar item

The toolbar menu can be extended with the admin_bar_menu action. Add a new node under the built-in top-secondary parent so it appears near the current user menu.

function create_private_messages_bubble_item_on_toolbar($wp_admin_bar) {
    $args = array(
        'id'     => 'private-message',
        'parent' => 'top-secondary',
        'title'  => '<span class="custom-bubble-numbers">12</span><span class="private-messages-label">New Messages</span>',
        'href'   => admin_url('admin.php?page=private-messages'),
        'meta'   => array(
            'class' => 'private-messages-on-toolbar',
            'html'  => ''
        )
    );

    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'create_private_messages_bubble_item_on_toolbar', 999);
  • id identifies the toolbar node and becomes part of the generated CSS class name.
  • parent controls where the node appears. top-secondary places it on the right side of the toolbar.
  • title is the actual label HTML shown to the user.
  • meta holds extra attributes and custom classes.

Style the notification badge

After the node exists, add a few CSS rules so the count looks like WordPress’ built-in update bubbles.

#wpadminbar .private-messages-on-toolbar .custom-bubble-numbers {
    display: inline-block;
    border-radius: 10px;
    color: #fff;
    background: #d54e21;
    padding: 5px;
    font-size: 11px;
    line-height: 10px;
    font-weight: bold;
    margin-right: 6px;
}

You can enqueue the style in the admin area or print it inline if the feature belongs to a small plugin. Once the count is dynamic, the same pattern works for unread messages, support tickets, pending tasks, or any custom notification source.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *