How to Enable Developer Information in the WordPress Admin Bar

Created with:

Visibility:

public

June 20, 2023

As a WordPress developer, you may find yourself frequently needing access to information about the current page or post you’re working on. This can include details like the current template being used, which menu is being displayed, or even just the current page ID. The WP Admin Bar is a helpful feature that provides quick access to many of these details, but did you know that there are also ways to add additional developer-specific information to the bar? In this article, we’ll explore some of the ways you can customize the WP Admin Bar to make your development workflow even more efficient.

					function wpturbo_add_dev_info_to_admin_bar( $wp_admin_bar ) {
    $wp_admin_bar->add_menu( array(
        'id' => 'wpturbo-dev-info',
        'title' => '<span class="ab-icon"></span><span class="ab-label">' . __( 'Dev Info', 'wpturbo' ) . '</span>',
        'href' => false,
    ) );

    $wp_admin_bar->add_menu( array(
        'parent' => 'wpturbo-dev-info',
        'id' => 'wpturbo-dev-theme',
        'title' => __( 'Theme: ', 'wpturbo' ) . wp_get_theme()->get( 'Name' ),
        'href' => false,
    ) );

    $wp_admin_bar->add_menu( array(
        'parent' => 'wpturbo-dev-info',
        'id' => 'wpturbo-dev-plugins',
        'title' => __( 'Plugins: ', 'wpturbo' ) . count( get_plugins() ),
        'href' => false,
    ) );

    $wp_admin_bar->add_menu( array(
        'parent' => 'wpturbo-dev-info',
        'id' => 'wpturbo-dev-user',
        'title' => __( 'User: ', 'wpturbo' ) . wp_get_current_user()->user_login,
        'href' => false,
    ) );
}
add_action( 'admin_bar_menu', 'wpturbo_add_dev_info_to_admin_bar', 999 );

Have you ever needed to quickly access your WordPress theme, plugin or user information while working on development or debugging your WordPress site? With this code snippet, you can add a custom menu to the admin bar with relevant information for developers.

Let’s take a look at the code. First, we define a function called wpturbo_add_dev_info_to_admin_bar() which takes the $wp_admin_bar parameter as an argument. This argument refers to the WordPress admin bar.

In this function, we create and add four menus to the $wp_admin_bar, which will hold our developer information.

$wp_admin_bar->add_menu( array(
    'id' => 'wpturbo-dev-info',
    'title' => '<span class="ab-icon"></span><span class="ab-label">' . __( 'Dev Info', 'wpturbo' ) . '</span>',
    'href' => false,
) );

We start by creating the main menu item called 'wpturbo-dev-info'. The id is a unique identifier for our menu. The title is the text displayed on the menu. We are using two span elements, one for an icon and one for the label text. The href attribute is set to false, so clicking on this menu won’t take the user anywhere.

$wp_admin_bar->add_menu( array(
    'parent' => 'wpturbo-dev-info',
    'id' => 'wpturbo-dev-theme',
    'title' => __( 'Theme: ', 'wpturbo' ) . wp_get_theme()->get( 'Name' ),
    'href' => false,
) );

Next, we add the theme information by creating a new menu item under the 'wpturbo-dev-info' menu. We set the parent attribute to ‘wpturbo-dev-info’, and the id to 'wpturbo-dev-theme'. The title is set to 'Theme: ' and the current theme name is added using wp_get_theme()->get( 'Name' ). Like before, the href attribute is set to false.

$wp_admin_bar->add_menu( array(
    'parent' => 'wpturbo-dev-info',
    'id' => 'wpturbo-dev-plugins',
    'title' => __( 'Plugins: ', 'wpturbo' ) . count( get_plugins() ),
    'href' => false,
) );

Next, we add the number of plugins installed by adding the number of get_plugins() to the 'wpturbo-dev-info' menu. The id is set to 'wpturbo-dev-plugins'. The title is set to 'Plugins: ' and the amount of installed plugins is added using the count() function. The href attribute is once again set to false.

$wp_admin_bar->add_menu( array(
    'parent' => 'wpturbo-dev-info',
    'id' => 'wpturbo-dev-user',
    'title' => __( 'User: ', 'wpturbo' ) . wp_get_current_user()->user_login,
    'href' => false,
) );

Finally, we add user information by adding the current user’s login name under the 'wpturbo-dev-info' menu. The id is set to 'wpturbo-dev-user'. The title is set to 'User: ' and the current user’s login name is added using wp_get_current_user()->user_login. The href attribute is set to false.

Lastly, we hook wpturbo_add_dev_info_to_admin_bar() function into the admin_bar_menu using add_action(). The last argument 999 sets the priority of the action to be loaded after any other action added to the hook.

How to Enable Developer Information in the WordPress Admin Bar

Add Snippet To Project