Add Notification Bubbles to WordPress Custom Post Types

Home
Blog
How to Add Notification Bubbles in WordPress Custom Post Types

Quick Summary:

This guide demonstrates how to add notification bubbles to WordPress admin menus, enhancing usability for custom post types (CPTs) like products, reviews, or events. It covers adding bubbles for parent and child menu items using WordPress hooks, tracking key stats like pending posts, tasks, or notifications. With code examples, styling tips, and advanced role-based implementations, this step-by-step tutorial helps streamline admin workflows and improve content management efficiency in WordPress.

Introduction

Notification bubbles in WordPress admin menus are powerful visual indicators used to highlight counts like pending tasks, new updates, or unread messages. These small counter bubbles are not only useful for default WordPress menus like Dashboard, Media, and Users but can also be customized for WordPress custom post types to enhance admin user experience.

If you’re looking for tailored solutions like these, partnering with a WordPress development company can help streamline your admin workflows. This guide will show you how to add notification counter bubbles for both parent and child menu items, including custom post types, with practical examples and use cases.

Read More: What is WordPress

What Are Notification Bubbles in WordPress?

Notification bubbles (or counter bubbles) are small badges that appear next to WordPress admin menu items. They are commonly seen next to Plugins, Comments, or Updates menus, showing counts like available updates or pending comments. You can create these for your custom needs, such as:

Highlighting the number of pending posts in a custom post type (CPT).
Showing total media files or unread messages.
Tracking tasks or custom admin notifications.

Why Use Notification Bubbles for Custom Post Types?

Custom post types often manage specific types of content, such as products, reviews, or listings. Adding notification bubbles to WordPress custom post types can help admins track key stats at a glance, like:

Pending or draft content in a CPT (e.g., events).
Tasks assigned to specific roles.
Notifications for CPT submissions needing review.

Using notification bubbles for custom post types not only improves usability but also ensures admins can prioritize actions efficiently.

How to Add Notification Counter Bubbles

WordPress provides hooks like admin_menu to modify the admin menu. You can use the following methods to add notification bubbles for parent and child menu items.

We are going to modify the text of a menu item with a element using one of the classes below:

5
12

1. Adding Notification Bubble to Parent Menu Item

Let’s start by adding a bubble to a parent menu item, such as the Dashboard or a custom post type. Here’s an example of the Dashboard menu:

add_action('admin_menu', function() {
    global $menu;
    $count = 10; // Example count.
    $menu[2][0] = 'Dashboard <span class="awaiting-mod">' . $count . '</span>'; // Add bubble.
});

And the result:

Logic:

$menu is a global variable storing all admin menu items.
2 is the index for the Dashboard menu.
The element with the class awaiting-mod creates the red bubble.

2. Adding Notification Bubble for a Custom Post Type

To add a bubble to a WordPress custom post type like an award, showing pending posts:

add_action('admin_menu', function() {
    global $menu;
    $pending_count = wp_count_posts('award')->pending; // Get pending posts count.
    foreach ($menu as $key => $value) {
        if ($menu[$key][2] == 'edit.php?post_type=award') { // Find the CPT menu.
            $menu[$key][0] .= ' <span class="awaiting-mod">' . $pending_count . '</span>'; // Add bubble.
            return;
        }
    }
});

And the result:

Scenario:

Useful for CPTs where admins need to track pending or draft posts.
The logic checks the menu slug (edit.php?post_type=award) to ensure it targets the correct menu.

3. Adding Notification Bubble for a Child Menu Item

Child menu items can also have notification bubbles. For example, let’s say the Media Library has a submenu like “Add New.” You can add a bubble like this:

add_action('admin_menu', function() {
    global $submenu;
    $media_count = array_sum( (array) wp_count_attachments( $mime_type = 'image' ) );
    if (isset($submenu['upload.php'])) { // Check Media submenu exists.
        $submenu['upload.php'][10][0] .= ' <span class="awaiting-mod">' . $media_count . '</span>'; // Add bubble to "Add New".
    }
});

And the result:

Logic:

$submenu holds submenus for parent menu items.
upload.php is the parent slug for Media.
[10][0] targets the child menu item (position 10, “Add New”).

4. Advanced: Role-Specific Notification Bubble for Users Menu

Add a bubble showing the number of administrators only:

add_action('admin_menu', function() {
    global $menu;
    $user_count  = count_users();
    $admin_count = $user_count['avail_roles']['administrator']; // Get admin count.
    foreach ($menu as $key => $value) {
        if ($menu[$key][2] == 'users.php') { // Find Users menu.
            $menu[$key][0] .= ' <span class="awaiting-mod">' . $admin_count . '</span>'; // Add bubble.
            return;
        }
    }
});

And the result:

5. Styling Notification Bubbles

WordPress uses built-in classes for bubbles like awaiting-mod or update-plugins. You can also customize the styling:

.awaiting-mod {
    background-color: #ff22d5b0;
    color: #FFF;
    padding: 0px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

And the result:

Conclusion

Notification bubbles in the WordPress admin menu, especially for WordPress custom post types, are a fantastic way to enhance admin workflows. Whether you’re tracking pending posts, unread messages, or other tasks, adding these small but impactful visual cues improves usability and ensures admins stay on top of their work.

If you’re unsure where to start, consider reaching out to a WordPress development company who can implement these features seamlessly for your specific requirements. Try implementing these examples for your own admin menus and custom post types today to create a more intuitive WordPress experience!

FAQs

What are notification bubbles in WordPress?

Notification bubbles are small counter badges displayed next to admin menu items. They are commonly used to show counts for tasks like pending posts, plugin updates, or comments.

Can I add notification bubbles for custom post types?

Yes, you can add bubbles to custom post types by modifying the $menu global variable using the admin_menu hook. This allows you to display counts like pending posts for your custom post type.

Can I add notification bubbles for child menu items?

Yes, child menu items can have notification bubbles by modifying the $submenu global variable. For example, you can display total media counts under the “Add New” submenu in the Media menu.

How can notification bubbles display dynamic data?

You can fetch data dynamically from the database, like the number of administrators or unread messages, and display it as a notification bubble using custom logic.