No products in the cart.
tutorials
How to Add Custom Shortcut Links to WordPress Toolbar
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’ => ‘pluginthemehub’,
‘title’ => ‘Search pluginthemehub’,
‘href’ => ‘https://www.google.com:443/cse/publicurl?cx=014650714884974928014:oga60h37xim’,
‘meta’ => array(
‘class’ => ‘pluginthemehub’,
‘title’ => ‘Search pluginthemehub Tutorials’
)
);
$wp_admin_bar->add_node($args);
}
add_action(‘admin_bar_menu’, ‘custom_toolbar_link’, 999);
function custom_toolbar_link($wp_admin_bar) {
$args = array(
‘id’ => ‘pluginthemehub’,
‘title’ => ‘Search pluginthemehub’,
‘href’ => ‘https://www.google.com:443/cse/publicurl?cx=014650714884974928014:oga60h37xim’,
‘meta’ => array(
‘class’ => ‘pluginthemehub’,
‘title’ => ‘Search pluginthemehub 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 Pluginthemehub. 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’ => ‘pluginthemehub’,
‘title’ => ‘pluginthemehub’,
‘href’ => ‘https://www.pluginthemehub.com’,
‘meta’ => array(
‘class’ => ‘pluginthemehub’,
‘title’ => ‘Visit pluginthemehub’
)
);
$wp_admin_bar->add_node($args);
// Add the first child link
$args = array(
‘id’ => ‘pluginthemehub-guides’,
‘title’ => ‘pluginthemehub Guides’,
‘href’ => ‘https://www.pluginthemehub.com/category/beginners-guide/’,
‘parent’ => ‘pluginthemehub’,
‘meta’ => array(
‘class’ => ‘pluginthemehub-guides’,
‘title’ => ‘Visit WordPress pluginthemehub Guides’
)
);
$wp_admin_bar->add_node($args);
// Add another child link
$args = array(
‘id’ => ‘pluginthemehub-tutorials’,
‘title’ => ‘pluginthemehub Tutorials’,
‘href’ => ‘https://www.pluginthemehub.com/category/wp-tutorials/’,
‘parent’ => ‘pluginthemehub’,
‘meta’ => array(
‘class’ => ‘pluginthemehub-tutorials’,
‘title’ => ‘Visit pluginthemehub Tutorials’
)
);
$wp_admin_bar->add_node($args);
// Add a child link to the child link
$args = array(
‘id’ => ‘pluginthemehub-themes’,
‘title’ => ‘pluginthemehub Themes’,
‘href’ => ‘https://www.pluginthemehub.com/category/wp-themes/’,
‘parent’ => ‘pluginthemehub-tutorials’,
‘meta’ => array(
‘class’ => ‘pluginthemehub-themes’,
‘title’ => ‘Visit WordPress Themes Tutorials on pluginthemehub’
)
);
$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’ => ‘pluginthemehub’. 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?
