Adding Items to the WordPress Admin Bar

The WordPress admin toolbar is tremendously handy, allowing you to quickly access areas of your WordPress administration from any screen, even while viewing your website.

Default WordPress admin bar

By default, not only does it allow you to quickly switch from administration to the front page of your site, it also helps you to quickly add new entries, edit one you are viewing, modify your user profile, and with the passage of the plugins more things.

But you already knew this, didn’t you?

What you may not know is that you can add more nodes to the WordPress admin toolbar, customized to your needs, and it’s pretty easy to do.

Adding an item to the WordPress admin bar

For example, to add a new item to the admin bar that leads directly to the WordPress site’s health screen, the code you would need would look like this:

/* wp admin bar site health */
add_action( 'admin_bar_menu', 'wphelp_new_element_admin', 999 );
function wphelp_new_element_admin( $wp_admin_bar ) {
 $args = array(
 'id'    => 'site-health',
 'title' => 'Site health',
 'href'  => admin_url() . 'site-health.php',
 $wp_admin_bar->add_node( $args );
}Code language: PHP (php)

You can add this code to the end of the functions.php file of the active theme or to a plugin you have to customize WordPress aspects, as always.

And, magically, the new item will appear in your admin bar.

Admin bar with extra node

And, of course, clicking will take you to the site’s health tool.

Cool and practical, right?

The magic happens thanks to the add_node() function. In Codex you have all the basics you can use.

To add your new items to the admin bar you have to use the admin_bar_menu hook, and in the example I used the 999 priority to make my new item the last one in the toolbar, a basic customization touch.

Shall we go a little further?

Adding a dropdown menu to the WordPress admin bar

A further step would be to create our own menu in the WordPress admin toolbar, with subelements that lead to some pages we want to visit easily from anywhere.

The best thing about doing this is that if you want to add several items you won’t occupy the whole admin bar, only one menu will be shown, with the dropdown nodes.

You often see this with menus that add plugins like Yoast SEO and others.

Well, in this case we would use a code like this:

/* Wp admin bar drop-down customized GDPR menu */
add_action( 'admin_bar_menu', 'menu_gdpr_admin', 999 );
function menu_gdpr_admin( $wp_admin_bar ) {
 $args = array(
 'id'    => 'menu_privacy',
 'title' => 'Privacy',
 'href'  => admin_url() . 'options-privacy.php',
 $wp_admin_bar->add_node( $args );
 $args = array(
 'id'    => 'site_health',
 'title' => 'Site health',
 'href'  => admin_url() . 'site-health.php',
 'parent' => 'menu_privacy'
 $wp_admin_bar->add_node( $args );
 $args = array(
 'id'    => 'export_data',
 'title' => 'Export personal data',
 'href'  => admin_url() . 'export-personal-data.php',
 'parent' => 'menu_privacy'
 $wp_admin_bar->add_node( $args );
 $args = array(
 'id'    => 'Erase_data',
 'title' => 'Erase personal data',
 'href'  => admin_url() . 'erase-personal-data.php',
 'parent' => 'menu_privacy'
 $wp_admin_bar->add_node( $args );
}Code language: PHP (php)

In this example I have created a menu to host privacy settings on the web, to fulfill my obligations to the GDPR, where the main element leads to the privacy settings, and in the submenu I have included links to the site’s health, and to the tools for exporting and deleting users personal data.

The menu would look like this.

Admin bar with extra dropdown menu node

And the best thing is that it will be available at all times from the WordPress administration toolbar.

As you may have seen in the code (and if you don’t look at it now) the parent parameter is used to set up the hierarchical link lists.

The string you use in the parent parameter will have to be, logically, an id that you have previously defined.

That’s it!

I leave you with this homework exercise for the week, so that you can learn more about customizing your WordPress.

These types of personalized menus are a little gem that, especially when you make webs for clients, give you a plus in taste for detail, which your clients usually appreciate.

Read this post in Spanish: Cómo añadir elementos a la barra de administración de WordPress

How useful was this post?

Click on a smiley to rate it!

Average rating 5 / 5. Vote count: 2

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

2 thoughts on “Adding Items to the WordPress Admin Bar”

  1. Hi Hector, is there any way to make the ‘href’ open into a new tab?

    I am using exterior links, like to my website.

  2. Hello Jordan,

    Just remove “admin_url() .”
    Your code should look like this : ‘href’ => ‘www site com’,


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top