WordPress Toolbar a.k.a. Admin Bar

First things first. Why WordPress Toolbar a.k.a. Admin Bar? Well, a lot of people knows Toolbar as Admin Bar. Still. To be honest, it was Admin Bar. It was Admin Bar in WordPress 3.2 (released July 4, 2011) and previous. Even more, for backward compatibility, WordPress class for Toolbar is named WP_Admin_Bar. However, since WordPress 3.3 (released December 12, 2011) it is Toolbar and please remember it. To be honest, I have to remember it, too.

All right, to the point. WordPress Toolbar. Nice feature. Very useful. And great. And even more – it is customizable! And we will learn a few basic tricks, how to deal with it. It isn’t a hard thing to do.

Generally, we will discuss three types:

1. Adding link
2. Adding groups
3. Attaching to existed items

Of course there is more, like removing existing items. I hope you will find it interesting. Maybe I will write about it later, however I can’t promise you that.

All examples uses classes. You may use this code in your plugin or in your theme.

Adding link

First, we need to hook in the right place. Of course we will use add_action to do that. So, we’ve got something like this:

Please note $wp_admin_bar variable. This is WordPress instance of WP_Admin_Bar class. Ok, what’s next? Well, we need to add our new node using some arguments.

First, create node (it is simple array, nothing more complicated!):

And now, just add this node to passed WP_Admin_Bar instance:

Whole code should looks like this:

Write it in functions.php or create sample plugin and voila! You’ve got new link in your Toolbar! It would be probably first item, because we call admin_bar_menu pretty early. You may wrote something like this:

and probably our first item immediately becomes last item of Toolbar.

Adding groups

No surprise, this is very similar to previous one. Let’s do some magic:

What’s the hell? It is almost the same like before! And there are no group, no child items, no parent… Yeah, yeah, I know, I know. Relax. This is first step. Now we’ve got our parent item (it looks like link now). Then we need to add some child items…

Please notice parent key in our node array. It is what it looks. Parent id for our item. Let’s build second child:

And we will add third child, without proper url… We will use # as href:

And now, I will add sub-item for our child item! It is also very easy, we just need to change parent id:

Ok, I will add few more items, will change group href to # and will decay adding action (to make it as a last item) and here are results:

And this will look like this:

Attaching to existed items

This one is very similar to previous one! I know, you’ve already heard that 😉 We will simple use existing parent id as a parent… and that should works! How to get existing nodes names? It’s easier than you may think. Simply look into HTML source of any page with active WordPress Toolbar. You will find ids started with wp-admin-bar-. The rest is the id… So, for “New” that would be new-content (because whole id is wp-admin-bar-new-content). Ok, you got the point. So, let’s do it:

Now hover your mouse pointer over New in Toolbar 🙂

Hope you enjoy.