Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Custom Shortcut Links to WordPress Toolbar

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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' => '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.

Adding a custom shortcut link in WordPress toolbar

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' => 'http://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' => 'http://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' => 'http://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);

Adding a menu or group of custom links in WordPress toolbar

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?


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Small Details says:

    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 );
    }

  2. Mel says:

    Thanks!! This helped me out a ton!

  3. Frederic says:

    Thanks! Very useful!

  4. Yassin says:

    Great tip
    How can we make these custom links open in new tab ?
    I try to add ‘target’ => ‘_blank’ but didn’t work

  5. Gary Cook says:

    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.

  6. Marc says:

    Is it possible to add a icon?

  7. Rosendo Cuyasen says:

    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.

  8. adolf witzeling says:

    I was looking for something like this. Thanks for sharing this awesome tip.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.