The WordPress admin bar can be a useful place to have shortcuts to the various sections or actions of your WordPress plugin. In this tutorial, I’ll show you how to add your own admin bar menu item and show you some various use cases for creating your own menu item. For completeness, I’ll also show you some cool tricks you can do with the admin bar.
Providing users with an easy-to-use interface and positive user experience is critical for any plugin developer. The admin bar is a prominent location in the WordPress admin, allowing quick access to a variety of options. For example, you can create new posts directly from the admin bar.
Pin itWebShareAdding a New Post is Easy Using the Admin Bar
If your plugin has settings that are commonly used, perhaps you should consider adding a custom menu to the admin bar. You can save users some steps or from having to dig through various admin setting options.
Here are some pros for creating an admin bar item.
Accessibility and discovery: a custom menu in the admin bar can provide quick and easy access to frequently used features of your plugin.
Branding: a custom menu is great for branding and providing extra visibility to your installed plugin.
Customization: you can choose which of your plugin’s features and shortcuts to highlight and can tailor the menu dynamically based on a user’s settings.
When adding a custom menu, you’ll need to keep the end user’s needs in mind. After all, it is their dashboard that is being affected when choosing to add the menu.
Tip: Add a way to disable the admin menu item
If you do choose to have a top-level admin bar item, I recommend having an option or filter to disable it.
While the opinion of whether or not to add something to the admin bar is subjective and depends on the scenario, try to make the admin bar useful for the end user.
Pin itWebShareEDD’s Admin Bar Item Isn’t All That Useful
Ultimately, the decision to add an admin bar item is up to you.
Let’s start with the basics. We’ll need to add an action for admin_bar_menu. Here’s how it would look.
<?php
/**
* Add a new admin bar menu item.
*
* @param WP_Admin_Bar $admin_bar Admin bar reference.
*/
function my_plugin_add_admin_bar_items( $admin_bar ) {
// Run admin bar code here.
}
add_action( 'admin_bar_menu', 'my_plugin_add_admin_bar_items', 50 );
From there, we can call methods on the $admin_bar object in order to add the items.
The admin bar can be shown on the frontend and backend
When adding items without an is_admin check, your menu item will show up in the admin and also on the frontend.
Let’s begin by creating a top-level admin bar item.
<?php
/**
* Add a new admin bar menu item.
*
* @param WP_Admin_Bar $admin_bar Admin bar reference.
*/
function my_plugin_add_admin_bar_items( $admin_bar ) {
// Run admin bar code here. Will run on both frontend and backend.
$admin_bar->add_menu(
array(
'id' => 'my-plugin-menu',
'title' => 'My Plugin',
'href' => false,
'meta' => array(
'class' => 'my-plugin-class',
'title' => 'My Plugin Menu',
),
)
);
}
add_action( 'admin_bar_menu', 'my_plugin_add_admin_bar_items', 50 );
Pin itWebShareCustom Admin Bar Menu Item
In this example, I’m calling method add_menu, which will add a top-level admin bar item. Let’s break down what each parameters mean and list some additional ones that are available.
Let’s use the previous example, but instead let’s add an SVG icon next to our title.
<?php
/**
* Add a new admin bar menu item.
*
* @param WP_Admin_Bar $admin_bar Admin bar reference.
*/
function my_plugin_add_admin_bar_items( $admin_bar ) {
// Run admin bar code here. Will run on both frontend and backend.
$svg_code = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16" style="vertical-align: middle; margin-right: 5px;"><path fill="#FFFFFF" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>';
$admin_bar->add_menu(
array(
'id' => 'my-plugin-menu',
'title' => $svg_code . 'My Plugin',
'href' => 'https://domain.com/wp-admin/admin.php?page=my-plugin',
'meta' => array(
'class' => 'my-plugin-class',
'title' => 'My Plugin Menu',
),
)
);
}
add_action( 'admin_bar_menu', 'my_plugin_add_admin_bar_items', 50 );
In the above example, I’ve used an SVG from FontAwesomeOpens in a new window to demonstrate that you can use an SVG as an icon and have it show up next to your menu item.
Let’s pivot and demonstrate how to add a node to an existing menu item, rather than creating your own.
First, you need to know the ID of the admin bar item. I recommend opening up your Inspect Element browser tools, and using the ID that is present in the HTML LI element.
In this tutorial, I explained the pros and cons of admin an admin bar menu. I showed how to add a top level item, adding an item to an existing parent, and how to remove menu bar items.
If you have any questions, please leave a comment below and I’ll be sure to respond.
