Detlus Knowledge Base

Wordpress: Add Admin Bar Menu With Icon

In this article you will see how can we add an admin bar menu with dashicon. Admin bar is what appear on top of page with black background. On default Wordpress installations, it will appear on all pages once logged in. We can add menu items there to help users to reach pages they frequently access.

admin_bar_menu is the hook we need to register to act adding items to admin bar. We can register for it as soon as our plugin in loaded as shown below.

function myplugin_admin_bar_menu() {
    // Add admin bar items.
}
add_action( 'admin_bar_menu', 'myplugin_admin_bar_menu' );

Add Menu

In this section I show how can we add a menu to admin bar. It is accomplished by calling add_menu() method of $wp_admin_bar global object.

function myplugin_admin_bar_menu() {
    if ( current_user_can( 'manage_options' ) ) {
        global $wp_admin_bar;
        $wp_admin_bar->add_menu( array(
            'id'    => 'photo-printing',
            'title' => _( 'My Plugin' ),
            'href'  => get_admin_url( NULL, 'admin.php?page=myplugin-page' ),
        ) );
    }
}
add_action( 'admin_bar_menu', 'myplugin_admin_bar_menu' );

Add Dashicon

Wordpress comes with an icon font which is being used in admin area. You can see all icons available in that icon font here: Developer Resources: Dashicons.

Here in this section, I show how we can use any of icon from above mentioned list in our menu in admin bar. Please see the example below:

function myplugin_admin_bar_menu() {
    if ( current_user_can( 'manage_options' ) ) {
        global $wp_admin_bar;
        $wp_admin_bar->add_menu( array(
            'id'    => 'photo-printing',
            'title' => '<span class="ab-icon dashicons dashicons-carrot"></span>' . _( 'My Plugin' ),
            'href'  => get_admin_url( NULL, 'admin.php?page=myplugin-page' ),
        ) );
    }
}
add_action( 'admin_bar_menu', 'myplugin_admin_bar_menu' );

In above example, menu title got prepended with a span tag having certain CSS classes, out of them dashicons-carrot represents a carrot icon in icon font. We have to use ab-icon and dashicons CSS classes as well for that span. It will work without dashicons class, however it is good to keep there.

You can use any icon class from Developer Resources: Dashicons as you want.

Add Child Menu Item

We can add as much as child menu items under our top menu like shown in below example. Just need to specify the parent id of that item.

function myplugin_admin_bar_menu() {
    if ( current_user_can( 'manage_options' ) ) {
        global $wp_admin_bar;
        $wp_admin_bar->add_menu( array(
            'id'    => 'myplugin-page',
            'title' => '<span class="ab-icon dashicons dashicons-carrot"></span>' . _( 'My Plugin' ),
            'href'  => get_admin_url( NULL, 'admin.php?page=myplugin-page' ),
        ) );
        $wp_admin_bar->add_menu( array(
            'parent' => 'myplugin-page',
            'id'     => 'myplugin-page-items',
            'title'  => __( 'Items' ),
            'href'  => get_admin_url(NULL, 'admin.php?page=myplugin-page-items'),
        ) );
    }
}
add_action( 'admin_bar_menu', 'myplugin_admin_bar_menu' );

You may add icon to child menu items as well like we did for parent menu.