How do I add an icon to a new admin bar item?

by

Full example

A quick (mu-)plugin as example:

<?php
/** Plugin Name: Add Admin Bar Icon */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'parent' => null,
        'group'  => null,
        'title'  => __( 'Example', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Hello', 'some-textdomain' ),
            'html'     => '<p>Hello</p>',
            'class'    => 'wpse--item',
            'rel'      => 'friend',
            'onclick'  => "alert('Hello');",
            'tabindex' => PHP_INT_MAX,
        ),
    ) );
} );

Which renders the following HTML as first element (and therefore also renders our admin bar useless, but that’s not the point of this example):

<li id="wp-admin-bar-wpse" class="wpse--item">
    <a class="ab-item" tabindex="9223372036854775807" href="http://astro.dev/wp-admin/profile.php" onclick="alert(\'Hello\');" target="_self" title="Hello" rel="friend">Example</a>
    <p>Hello</p>
</li>

Now that we got a base, we can care about…

Adding Icons

The sad news: There is no easy way to do it. At least not without adding your own stylesheet. As you can read (in the code), there are some things happening: I prepended the HTML needed to wrap a Dashicon before the actual item. Then I added a very high integer as last number to the action – that’s what decides the position of the item in the admin bar.

<?php
/** Plugin Name: Add Admin Bar Icon */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'title'  => '<span class="ab-icon"></span>'.__( 'Example', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Ahoi!', 'some-textdomain' ),
            'html'     => '<!-- Custom HTML that goes below the item -->',
        ),
    ) );
}, 210 ); // <-- THIS INTEGER DECIDES WHERE THE ITEM GETS ADDED (Low = left, High = right)

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_style( /* register your stylesheet */ );
}

Finally you will need to add some CSS rules in your own stylesheet. The only moving part is the wpse in the #/id. The rest is constant and equal for all admin bar items/nodes. You might also need to adjust the top position to fit the Dashicon. Just choose a Dashicon from their site and add the fXXX code in the CSS below.

#wpadminbar #wp-admin-bar-wpse .ab-icon:before {
    font: normal 20px/1 dashicons;
    content: '\f306';
    position: relative;
    float: left;
    speak: never;
    padding: 4px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: none !important;
    margin-right: 6px;
}

Leave a Comment