How to Customize the WordPress 3.3 Toolbar

Share this article

You can make the WordPress interface easier for clients by removing unnecessary menus, widgets and meta boxes. However, in WordPress 3.3, the admin and header bars have been merged to create a single toolbar. It may also contain options you want to hide…

The WordPress Toolbar API

The new toolbar is defined using a single WP_Admin_Bar object (see wp-includes/class-wp-admin-bar.php). This provides a number of useful methods:

  • add_node() — add a new toolbar item
  • remove_node() — remove a toolbar item
  • get_node() — fetch a node’s properties
  • get_nodes() — fetch a list of all nodes

Removing Toolbar Items

We’re going to place our code into a reusable plugin named wp-content/plugins/change-toolbar.php but you could put it within your theme’s functions.php file.

WordPress plugins require a header at the top of the file, e.g.

Plugin Name: Change Toolbar
Plugin URI:
Description: Modifies the WordPress 3.3+ toolbar.
Version: 1.0
Author: Craig Buckler
Author URI:
License: GPL2

We now require a single function where our changes will be made:

function change_toolbar($wp_toolbar) {
	/* ... code to go here ... */

followed by an action hook which runs the function and passes the toolbar object:

add_action('admin_bar_menu', 'change_toolbar', 999);

We can now remove toolbar items within the change_toolbar() function. For example, the following line hides the WordPress logo and help sub-menu by referencing its ID, “wp-logo”:


To remove other items you need to discover what ID they’re using. You could delve into the PHP code but there’s an easier way:

  • Open Firebug or your favorite Firebug-like development console.
  • Locate the toolbar item you want to remove (in most browsers you can right-click the item and select “Inspect Element”).
  • Navigate up the parent nodes until you find an LI tag. It will have an ID starting “wp-admin-bar-” followed by the internal ID code:

WordPress toolbar ID

In this example, the Comments item is highlighted. Therefore, to remove it from the toolbar, we use:


Adding Toolbar Items

We can add toolbar items within the same function. The syntax is:


Where $arg is an associative array containing:

  • id — the item’s ID
  • title — the title text
  • parent — the parent menu ID (optional)
  • href — the link URL (optional)
  • group — true if the node is a group (optional)
  • meta — another array providing other keys including: html, class, onclick, target, title, tabindex

Let’s add a “Help” item which links to our support pages:

	'id' => 'myhelp',
	'title' => 'Help',
	'href' => '',
	'meta' => array('target' => 'help')

We could now add an email support link within a sub-menu by referencing the ‘myhelp’ ID in the parent:

	'id' => 'mysupport',
	'title' => 'Email Support',
	'parent' => 'myhelp',
	'href' => ''

I hope you find it useful — it’s easy to customize the whole WordPress 3.3 toolbar using a few API calls.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form