Add Links to WordPress Admin Bar

WordPress 3.1 introduced the admin bar, which adds admin options to the top of your pages as you browse your site (Assuming you’re logged in of course).

It’s easy to extend the bar to add new links of your own, or to remove links you don’t want (e.g. if the “Appearance” menu isn’t something you often need instant access to). You can see the end result in the image above.

In this tutorial, we’ll be building a simple plugin that will let us add some handy links (e.g. a Twitter search for the current post, analytics, and ad sales), as well as remove the links we don’t want.

If you’d rather just skip to the finished file though, you can download the plugin here, and follow the instructions in the file to set your options (NB – It’s a simple script, not a full fledged plugin with options panels).

1 – Create the Plugin File

The first stage is setting up our plugin for WordPress. To do this, create a new folder in your wp-content > plugins folder, and give it a unique name, e.g.

pbd-admin-bar-links

Now, create a PHP file inside with the same name, e.g.

pbd-admin-bar-links.php

Lastly, enter some details about the plugin at the top of the file, e.g.

1
2
3
4
5
6
7
8
9
10

<?php
/*
Plugin Name: PBD Admin Bar Links
Plugin URI: http://www.problogdesign.com/
Description: Add/Remove links in the WordPress admin bar.
Version: 0.1
Author: Michael Martin
Author URI: http://www.problogdesign.com/
License: GPL2
*/

And now we can start writing some real code.

2 – Hook into the Menu

The first thing we’re going to do is write a simple function that checks to see if we need to do anything at all. If the current user isn’t an admin, or if they’re an admin who has disabled the admin bar (You can turn it off in your profile options), then we won’t be doing anything else.

Insert this code into your plugin:

1
2
3
4
5
6
7
8
9
10
11
12

/**
 * Checks if we should add links to the bar.
 */
function pbd_admin_bar_init() {
	// Is the user sufficiently leveled, or has the bar been disabled?
	if (!is_super_admin() || !is_admin_bar_showing() )
		return;
 
	// Good to go, lets do this!
	add_action('admin_bar_menu', 'pbd_admin_bar_links', 500);
	add_action('admin_bar_menu', 'pbd_remove_default_links', 500);
}

Line 6 will take care of our permissions checks. If they pass, then the two add_action() lines will call the functions we’re going to write next to adjust the menu.

But of course, we need to actually call this function as well. Add this line below it to have our function called when the admin bar is created:

1
2

// Get things running!
add_action('admin_bar_init', 'pbd_admin_bar_init');

3 – Add Our Links

Now, for the meat of the tutorial, we’re going to write the function that adds our links. And it’s very simple to do.

We’ll start off by creating the function (With the same name we used in the first add_action() line in the previous block!), and then entering the links. Here goes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/**
 * Adds links to the bar.
 */
function pbd_admin_bar_links() {
	global $wp_admin_bar;
 
	// Build Twitter Reactions link.
	$url = 'http://'. $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	$twitter = 'http://search.twitter.com/search?q='. urlencode($url);
 
	// Links to add, in the form: 'Label' => 'URL'
	$links = array(
		'BuySellAds' => 'http://buysellads.com/',
		'Twitter Reactions' => $twitter,
		'Google Analytics' => 'http://www.google.com/analytics/',
		'Klout' => 'http://klout.com/problogdesign',
		'Webmaster Tools' => 'https://www.google.com/webmasters/tools/dashboard?hl=en&siteUrl=http://problogdesign.com/'
	);

The global $wp_admin_bar; line gives us access to the menu object, which we’ll use in the next line.

The Twitter URL needs to be made dynamically. We use the $url = … line (Line 8) to get the address of the current page (You’ll need to adapt it if you’re using https://), and then in the $twitter = … line, we build the link.

The $link = … part is where you start tweaking. Here, we make an array of our links, in the format: ‘Label’ => ‘URL’. You can see I’ve put in a few of mine, but you can add anything you like here (And the order they are entered here is the order they will show up in).

Update (15/3/2011) – Blake Imeson had a nice idea in the comments. If you’ve set up a redirect to a client’s email (e.g. mail.site.com to take them to Google Apps), you could add that as well, similarly to how we added Twitter, using a line like this: $mailurl = ‘http://mail.’ . SERVER[“SERVER_NAME”].$_SERVER[“REQUEST_URI”];

Now, we use the add_menu method of the $wp_admin_bar object we called in to add our links. It works in the format:

$wp_admin_bar->add_menu($args);

Where $args is an array which can have the following settings:

  • title – The text for the link.
  • href – The URL for the link.
  • parent – (Optional) To add the link to a submenu, enter the ID of the parent link (Defaults to FALSE, i.e. a top-level link).
  • id – (Optional) ID to refer to this link. Defaults to a sanitized version of the title.
  • meta – (Optional) Array to specify extra info about the link, from array( ‘html’ => ”, ‘class’ => ”, ‘onclick’ => ”, target => ”, title => ” );

Armed with this info, let’s go back to our unfinished links function and paste the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

	// Add the Parent link.
	$wp_admin_bar->add_menu( array(
		'title' => 'Stats',
		'href' => false,
		'id' => 'pbd_links',
		'href' => false
	));
 
	/**
	 * Add the submenu links.
	 */
	foreach ($links as $label => $url) {
		$wp_admin_bar->add_menu( array(
			'title' => $label,
			'href' => $url,
			'parent' => 'pbd_links',
			'meta' => array('target' => '_blank')
		));
	}
}

The first line follows the format we discussed. All we do is add a new top-level link to the menu bar. I’ve chosen to call it “Stats”, though you could call it whatever you chose.

You’ll notice the ‘href’ attribute has been set to false, meaning that this “link” doesn’t link anywhere.

To add the submenu links, we use a loop to cycle through our array and call the add_menu() method on each of our links.

We specify the parent as “pbd_links” because that was the ID we gave the parent link, and as these links are all off-site, I’ve used the ‘meta’ section to make them open in a new window.

And that’s all we need to put the links in place. If you were to close up your PHP file now and activate the plugin, you’d see your new additions in the admin bar.

But before we do that, let’s look at how we can delete some of the default links as well.

4 – Remove Default Links

To remove a menu, we call the remove_menu() method, and pass in the ID of the menu we want to remove.

Paste the following into your plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/**
 * Remove default admin links.
 */
function pbd_remove_default_links() {
	global $wp_admin_bar;
 
	/* Array of links to remove. Choose from:
	'my-account-with-avatar', 'my-account', 'my-blogs', 'edit', 'new-content', 'comments', 'appearance', 'updates', 'get-shortlink'
	 */
	$remove = array('appearance');
 
	if(empty($remove) )
		return;
 
	foreach($remove as $item) {
		$wp_admin_bar->remove_menu($item);	
	}
}

This is very similar to our add-links function. We pull in the admin bar object again, and then create another array of options. This time, the array will just hold the IDs of menus to remove (I’ve entered all of the possible options in a comment on line 8).

Provided the array isn’t empty, we’ll loop through each item and remove each of the corresponding menus.

And that’s that done. Now all that remains is to close your PHP file and activate the plugin!

1

?>

Let me know if you find this tutorial useful, or if you’ve seen any other cool tricks for the new admin bar!

Enjoy this post? You should follow me on Twitter!