9

I have a function that adds items to the WordPress toolbar. For example:

$args2 = array(
    'id'    => 'conversations_unread',
    'title' => $visitor['conversations_unread'] . ' &nbsp ',
    'href'  => XenForo_Application::get('options')->boardUrl . '/conversations'
);

How do I get an icon to the left of this new item?

I've tried to use the 'meta' but the icon doesn't show.

'meta' => array( 'class' => 'ib-icon' ),

I read a reference to adding the image to the 'title' but I'd like this icon to be like the comment bubble.

12

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 {
    content: '\f306';
    top: 3px;
}
2

to expand on kaiser's answer, you can also override the icon with a custom image URL and put the styles inline (or again separately if you like) eg. a 22px x 22px icon...

$iconurl = '/images/custom-icon.png';

$iconspan = '<span class="custom-icon" style="
    float:left; width:22px !important; height:22px !important;
    margin-left: 5px !important; margin-top: 5px !important;
    background-image:url(\''.$iconurl.'\');"></span>';

$title = __( 'Example', 'some-textdomain' ),

then use for the title value:

'title' => $iconspan.$title,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.