By default WordPress displays a toolbar on top of all pages to logged in users. You can take control of the WordPress admin bar, turn it off when viewing site, or even disable it for all users except administrators. However, this toolbar can be utilized in many ways, particularly if you run a busy website with multiple authors. In this article, we will show you how to add custom shortcut links to WordPress toolbar.
Why or When You Need to Add Custom Shortcut Links to WordPress Toolbar?
By default the toolbar shows useful links to WordPress adminstration screens, allowing users to quickly access different sections of their website.
However, everyone has links that they visit a lot when writing posts or working on their site. For example, links to an external resource, service, or website. These links can be added to WordPress toolbar as custom shortcut links allowing you and your users easy access to those locations directly from your site or the admin area.
Adding a Custom Shortcut Link to WordPress Toolbar
To add a custom shortcut link to the WordPress toolbar, you need to simply copy and paste the following code in your theme’s functions.php file or in a site-specific plugin.
// add a link to the WP Toolbar function custom_toolbar_link($wp_admin_bar) { $args = array( 'id' => 'wpbeginner', 'title' => 'Search WPBeginner', 'href' => 'https://www.google.com:443/cse/publicurl?cx=014650714884974928014:oga60h37xim', 'meta' => array( 'class' => 'wpbeginner', 'title' => 'Search WPBeginner Tutorials' ) ); $wp_admin_bar->add_node($args); } add_action('admin_bar_menu', 'custom_toolbar_link', 999);
This sample code adds a link to a Google Custom Search engine, which can be used to search for WordPress tutorials on WPBeginner. It uses the function add_node with the arguments described in the array. You need to replace the id, title, href, and meta items with values for your own custom link.
How to Add a Group of Custom Links in Toolbar
We showed you how to add a custom link to the toolbar, but what if you wanted to add multiple links and create a custom menu with handful shortcuts of your own? To do that you can group multiple shortcuts under one parent item. The child nodes under the parent link will appear when a user takes the mouse on the parent link. Here is an example of how to add a group of custom links in WordPress toolbar.
/* * add a group of links under a parent link */ // Add a parent shortcut link function custom_toolbar_link($wp_admin_bar) { $args = array( 'id' => 'wpbeginner', 'title' => 'WPBeginner', 'href' => 'https://www.wpbeginner.com', 'meta' => array( 'class' => 'wpbeginner', 'title' => 'Visit WPBeginner' ) ); $wp_admin_bar->add_node($args); // Add the first child link $args = array( 'id' => 'wpbeginner-guides', 'title' => 'WPBeginner Guides', 'href' => 'https://www.wpbeginner.com/category/beginners-guide/', 'parent' => 'wpbeginner', 'meta' => array( 'class' => 'wpbeginner-guides', 'title' => 'Visit WordPress Beginner Guides' ) ); $wp_admin_bar->add_node($args); // Add another child link $args = array( 'id' => 'wpbeginner-tutorials', 'title' => 'WPBeginner Tutorials', 'href' => 'https://www.wpbeginner.com/category/wp-tutorials/', 'parent' => 'wpbeginner', 'meta' => array( 'class' => 'wpbeginner-tutorials', 'title' => 'Visit WPBeginner Tutorials' ) ); $wp_admin_bar->add_node($args); // Add a child link to the child link $args = array( 'id' => 'wpbeginner-themes', 'title' => 'WPBeginner Themes', 'href' => 'https://www.wpbeginner.com/category/wp-themes/', 'parent' => 'wpbeginner-tutorials', 'meta' => array( 'class' => 'wpbeginner-themes', 'title' => 'Visit WordPress Themes Tutorials on WPBeginner' ) ); $wp_admin_bar->add_node($args); } add_action('admin_bar_menu', 'custom_toolbar_link', 999);
In this example code, first we added a custom shortcut link. Next, we added another custom link and made it a child of the first link. We added the parent link id by adding the argument 'parent' => 'wpbeginner'
. Then we repeated this to add another link under the same parent link. We have also used a child link as a parent link to show you how to add sub-items to a sub-item in the your custom links menu.
We hope this article helped you add custom link shortcuts to WordPress toolbar on your website. For questions and feedback please leave a comment comment.
What would you add as a custom shortcut link in your WordPress toolbar?
Why this code is not work for mobile view?
You may want to try disabling your other plugins to ensure there isn’t a plugin that is overriding the default bar on mobile.
Thanks.
You’re welcome
Hi
How can i add tool bar user menu in theme navigation?
And why i don’t receive email notification when i got reply? While i select (Replies to my comments).
Thanks
Hi Kashif,
We are not sure which toolbar user menu you want to add. Please see our guide on how to add navigation menus in WordPress may be that would help.
This works great, my question is, how do you add a second parent menu item to this code?
I don’t know if this is recommended but I was looking for a ‘new window’ solution (see Yassin’s comment). It didn’t work by itself but works fine when combined with ‘meta’:
add_action( ‘admin_bar_menu’, ‘toolbar_link_to_mypage’, 999 );
function toolbar_link_to_mypage( $wp_admin_bar ) {
$args = array(
‘id’ => ‘my_page’,
‘title’ => ‘PRODUCT MANAGEMENT’,
‘href’ => ‘http://www.mexample.com’,
‘meta’ => array( ‘class’ => ‘my-toolbar-page’, ‘target’ => ‘_blank’ )
);
$wp_admin_bar->add_node( $args );
}
Thanks!! This helped me out a ton!
Thanks! Very useful!
Great tip
How can we make these custom links open in new tab ?
I try to add ‘target’ => ‘_blank’ but didn’t work
To add a ‘target’ => ‘_blank’ you have to add it to the ‘meta’ => array()
This is awesome. Thanks. Although, I have added several custom menus and I want to center them all in a group using CSS, if possible? Please.
Is it possible to add a icon?
Cool! I think this is a cool feature for WordPress if you’re going to use this toolbar above your web pages. Thanks for sharing.
I was looking for something like this. Thanks for sharing this awesome tip.