How to Add Items to the WordPress Toolbar

How to Add Items to the WordPress Toolbar

In WordPress 3.3 (almost 4 years ago), the Toolbar replaced the admin bar. It’s the familiar black bar at the top of the screen, which you can see in the front or backend of your WordPress website.

It contains a number of useful links that can help you navigate in and out of the admin, update themes and plugins, moderate comments, and view the frontend of your site (if you’re in the backend) and vice versa.

In this article, we’ll look at how you can add your own custom links to the bar with code so you can quickly access parts of the front and backend of your site with ease.

This will be a simple enough task, all we need is one function: add_node(). I recommend taking a look at what the Codex has to say about it, I’ll show you the basics using a couple of examples.

A Basic Link

To add any content within the toolbar, you’ll need to use the admin_bar_menu hook. I’ve used a priority of 999 below to make sure my item is the last in the list.

As you can see, add_node() is a method of $wp_admin_bar. If you’re not familiar with object oriented PHP, don’t worry, just remember to use the notation in the example. The method takes a single argument, which is an array and contains all the information about our link.

Menu Bar Basic Addition
Easy access to the media settings added to the toolbar

Link Dropdowns

Using the parent parameter you can set up hierarchical lists of links, which can come in handy. I use this when developing websites to give myself quick access to pages I need to switch between. Here’s a quick example:

I’ve added some links from across the admin and designated the parent for each. The string used in the parent parameter must be an id that has been previously defined. If you’re going to be doing this a lot, you may want to use an array and a loop to make sure you can easily add to it or remove links. I like to do something like this:

This is not radically different, but it is much more flexible. This format allows you to use array manipulation functions, or even add a custom filter to the array before the nodes are added.

As with all changes to your site, it’s a good idea to create a child theme before jumping in and editing core files. Check out our guide on How to Create a WordPress Child Theme if you need a refresher.

That’s about it for this Weekend WordPress Project – not a lot to do here! There are a couple more parameters you can use to better control the HTML, which you can read about in the Codex documentation.

Have you customized the Toolbar before or want to make other similar customizations to your site? Let us know in the comments below.