Add a Custom Link to the WordPress Admin Bar

To add a custom link to the WordPress admin bar you only need the admin_bar_menu hook. A screen you open every day, often hidden two or three clicks deep, is then one click away from anywhere in wp-admin and on the front end.

This snippet adds one link, shows it only to users who are allowed to open its destination, and can highlight it in a colour so it stands out in the bar.

The snippet

<?php
/**
 * One custom link in the WordPress admin bar, with an optional highlight colour.
 * Edit the values in dpc_admin_bar_link_settings().
 */
function dpc_admin_bar_link_settings(): array {
	return array(
		'capability' => 'edit_pages',
		'title'      => __( 'All Pages', 'dpc' ),
		'url'        => admin_url( 'edit.php?post_type=page' ),
		'background' => '#ffea00', // Empty string = no highlight.
		'color'      => '#1d2327',
	);
}

add_action( 'admin_bar_menu', 'dpc_admin_bar_link', 100 );

function dpc_admin_bar_link( WP_Admin_Bar $admin_bar ): void {
	$link = dpc_admin_bar_link_settings();
	if ( ! current_user_can( $link['capability'] ) ) {
		return;
	}

	$admin_bar->add_node(
		array(
			'id'    => 'dpc-custom-link',
			'title' => esc_html( $link['title'] ), // Node titles are printed as HTML.
			'href'  => $link['url'], // The admin bar escapes href itself.
		)
	);
}

// The admin bar shows on the front end and in wp-admin, so print the colour in both.
add_action( 'wp_enqueue_scripts', 'dpc_admin_bar_link_style' );
add_action( 'admin_enqueue_scripts', 'dpc_admin_bar_link_style' );

function dpc_admin_bar_link_style(): void {
	$link       = dpc_admin_bar_link_settings();
	$background = sanitize_hex_color( $link['background'] );
	$color      = sanitize_hex_color( $link['color'] );
	if ( ! $background || ! is_admin_bar_showing() || ! current_user_can( $link['capability'] ) ) {
		return;
	}

	$css = sprintf(
		'#wpadminbar #wp-admin-bar-dpc-custom-link > .ab-item,#wpadminbar #wp-admin-bar-dpc-custom-link:hover > .ab-item,#wpadminbar #wp-admin-bar-dpc-custom-link > .ab-item:focus{background:%1$s;color:%2$s}',
		$background,
		$color ? $color : 'inherit'
	);
	wp_add_inline_style( 'admin-bar', $css );
}

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Everywhere, tick PHP under Script location, paste the code into the PHP editor and publish. Leave Action/Hook empty.

The admin bar shows on the front end as well as in wp-admin, so Admin only would hide the link and its colour on the site itself. current_user_can() and admin_url() are only called inside hooked callbacks, after WordPress has loaded the current user.

The same code also works unchanged in a small plugin or an mu-plugin.

How it works

  • dpc_admin_bar_link_settings() holds everything you change: the capability, the title, the URL and the two colours.
  • admin_bar_menu passes the WP_Admin_Bar object. Priority 100 puts the link after the core items. The title is escaped with esc_html() because the admin bar prints node titles as HTML; it escapes href itself.
  • The capability check runs first, so users who can’t open the screen never see the link. The example uses edit_pages for the Pages list.
  • The colour is added with wp_add_inline_style() to the core admin-bar stylesheet, on wp_enqueue_scripts and admin_enqueue_scripts. It is printed only when the admin bar is showing and the user can see the link, in both contexts. The old version printed it on admin_head only, so the front-end bar was never coloured.
  • Colours pass through sanitize_hex_color(), and the two-ID selector beats the core admin bar styles without !important.

Customise it

  • Another destination: change url and capability together, e.g. admin_url( 'options-general.php' ) with manage_options, or admin_url( 'upload.php' ) with upload_files.
  • No highlight: set background to an empty string.
  • Open in a new tab: add 'meta' => array( 'target' => '_blank' ) to the node.

Need several links in one dropdown? Use Add Admin Shortcuts to the WordPress Admin Bar, which builds a full Shortcuts menu with a capability check per link. For a menu of your pages, see Add Dropdown Pages Links to WordPress Admin Bar.

Gotchas

  • The front-end admin bar only shows when Show Toolbar when viewing site is ticked in the user’s profile.
  • Node ids must be unique across the whole bar. Keep the dpc- prefix when you copy the code for a second link, and give each copy its own id and function names.
  • On narrow screens WordPress hides most custom top-level items from the bar; that is core behaviour.

In the Scripts Organizer library Import it with one click from Scripts Organizer.

// newsletter

Three tested WordPress snippets a week

Blocks, security, performance, Tailwind, PHP and React. Copy, paste, ship. You’ll also get DPlugins product updates. No spam, and you can unsubscribe anytime.

// newsletter

Three tested WordPress snippets a week

Blocks, security, performance, Tailwind, PHP and React. Copy, paste, ship. You'll also get DPlugins product updates. No spam, and you can unsubscribe anytime.