---
title: "Admin Bar"
description: "Add version details to the WordPress admin bar for instant visibility while navigating any page in WP-Admin."
url: "https://docs.versioninfoplugin.com/display-locations-admin-bar/"
---
Add version details to the WordPress admin bar for instant visibility while navigating any page in WP-Admin.

# Admin Bar

The Admin Bar integration adds version information nodes to the WordPress top bar, giving you instant access to your technical stack without scrolling to the footer.

### What It Displays

When enabled, a "Version Info" node is added to the right side of the admin bar (the `top-secondary` group). Hovering or clicking the node reveals sub-nodes for:

*   **WordPress** version
*   **PHP** version
*   **MySQL** version
*   **Web Server** software

### Enabling / Disabling

The Admin Bar display is **disabled by default**. To enable it:

1.  Navigate to **Settings > Version Info > General**.
2.  Check **Show in Admin Bar**.
3.  Click **Save Changes**.

### Customizing Admin Bar Nodes

Developers can modify the admin bar nodes using the `version_info_admin_bar_nodes` filter. This allows you to add, remove, or reorder the nodes displayed:

`add_filter( 'version_info_admin_bar_nodes', 'customize_admin_bar_nodes' );  function customize_admin_bar_nodes( array $nodes ): array {     // Add a custom node     $nodes[] = [         'id'    => 'custom-server-info',         'title' => 'Hostname: ' . gethostname(),     ];     return $nodes; }`

When using the PRO plan's **Environment Indicators** feature, the admin bar can also display a color-coded environment badge and an optional colored top border to indicate whether you're on a Production, Staging, or Development site. See the Environment Indicators documentation for details.

[environment-indicators.md](/pro-features-environment-indicators/)

[hooks-and-filters.md](/advanced-configuration-hooks-and-filters/)