Add Menu Links to the New WordPress 3.3 Tool Bar

The new admin bar, now named the tool bar, in WordPress 3.3 is great. It’s really well organized and cleans the dashboard up a lot. It’s also great for developers because adding new links to settings pages, documentation, or other useful links, is quite simple. In this quick tip, I’m going to show you how to add new links to the tool bar.

To add new links to the tool bar, we’ll use the $wp_admin_bar global and the new add_menu() method available in 3.3. According to the codex, the add_menu() method may only be available when connected to the admin_bar_menu hook. Because of this, we will wrap our add_menu() instances inside of a function that is hooked to “admin_bar_menu”.

So to add a single link to our menu bar, we can do this:

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

add_action('admin_bar_menu', 'pippin_add_tool_bar_items', 100);
function pippin_add_tool_bar_items($admin_bar)
{
	$admin_bar->add_menu( array(
		'id'    => 'my-item',
		'title' => 'My Item',
		'href'  => 'http://google.com',
		'meta'  => array(
			'title' => __('My Item')
		),
	));
}

This will add a link called “My Item” that is linked to the Google home page.

If we want to add a sub menu item to our “My Item” link, then we can do this:

1
2
3
4
5
6
7
8
9
10
11

$admin_bar->add_menu( array(
	'id'    => 'my-sub-item',
	'parent' => 'my-item',
	'title' => 'My Sub Menu Item',
	'href'  => '#',
	'meta'  => array(
		'title' => __('My Sub Menu Item'),
		'target' => '_blank',
		'class' => 'my_menu_item_class'
	),
));

Note that the “parent” option is set equal to the “id” of our first menu item. So all together, with two sub menu links, it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

add_action('admin_bar_menu', 'pippin_add_tool_bar_items', 100);
function pippin_add_tool_bar_items($admin_bar)
{
	$admin_bar->add_menu( array(
		'id'    => 'my-item',
		'title' => 'My Item',
		'href'  => '#',
		'meta'  => array(
			'title' => __('My Item'),			
		),
	));
	$admin_bar->add_menu( array(
		'id'    => 'my-sub-item',
		'parent' => 'my-item',
		'title' => 'My Sub Menu Item',
		'href'  => '#',
		'meta'  => array(
			'title' => __('My Sub Menu Item'),
			'target' => '_blank',
			'class' => 'my_menu_item_class'
		),
	));
	$admin_bar->add_menu( array(
		'id'    => 'my-second-sub-item',
		'parent' => 'my-item',
		'title' => 'My Second Sub Menu Item',
		'href'  => '#',
		'meta'  => array(
			'title' => __('My Second Sub Menu Item'),
			'target' => '_blank',
			'class' => 'my_menu_item_class'
		),
	));
}

This will create a menu with this structure:

  • My Item
    • My Sub Menu Item
    • My Second Sub Menu Item

5 thoughts so far

Have your say

  1. Bruce

    Nicely written with a good flow, and a great tip!

    • Pippin

      Thanks Bruce.

  2. ed

    Thanks!

  3. republic

    Thanks for the write up, it’s really clear.

    How do we make a sub menu item have the grey background over the white though? For example the individual site listings under the My Sites menu.

    • Pippin

      I’m not sure on that one, but I will look into it and update the post.

Comments are closed.

Leave a reply

Join the discussion