Take Control of your WordPress Admin Bar

wordpress-admin-bar

With WordPress 3.1 came a whole slew of new features. Perhaps the most visually obvious one is the admin bar, which will be a familiar site to any users of wordpress.com.

It provides quick access to all the main areas of your site that you use most often, like creating a new post or page, moderating comments or modifying widgets. It’s probably a good start for the places on your own site that you visit the most, but I’m betting there are other pages that you visit frequently that didn’t find their way on to the admin bar.

So here’s how to customise the admin bar to add or remove links as needed. All of these modifications will require modifying your functions.php file. If you’re not sure how to do this, see How To Edit your Theme Files.

Add links to the menu bar

If you want to add links to the menu bar, add this snippet to your functions.php file. The code has a few variables which are explained below:

The variables that you’ll interested in are id, parent, title and href. id is merely a unique identifier for the link and parent dictates which menu the link will appear in. In this example, it is shown under the my-blogs menu. The following list shows you all the different menus that WordPress supports natively, but if you want a different menu altogether, you can add a custom one:

  • my-account-with-avatar or my-account – Your account information (appears as your name)
  • my-blogs – All the sites that you are a member of (appears as My Sites)
  • edit – For editing posts or pages (appears as Edit Post or Edit Page)
  • new-content – For adding new posts or pages (appears as Add New)
  • comments – Comment moderation area (appears as Comments)
  • appearance – Modifying widgets, menus etc. (appears as Appearance)
  • updates – For updating plugins and themes etc. (appears as Updates)
  • get-shortlink – Provides shortlink for current page (appears as Get Shortlink)

The title variable will be what is shown in the menu for the item and the href variable is the URL for the link. So in the example above, I’ve created a link called Do It With WordPress under the My Sites menu which links to the admin area of my WordPress site.

Remove menus altogether

To completely remove a menu from the admin bar, you can use the function below, replacing the menu names with the ones that you want to remove. You can remove more or less than the 2 that I have shown by adding or removing lines:

Create a custom menu

If you’d rather keep all your links under a completely new menu, you can create one by using the following function:

In this example, I created a new menu called Social Networks, with two links under it, one to my Facebook page and one to my Twitter page. Pretty swish huh? You can also set what position it will take in the admin bar, by setting an order value. Just change the last line to the following, where 1000 is the order value:

Creative menu ideas

As I got to thinking about it, you could really put some cool things together using this functionality. For example, you could create a menu of URLs that will submit your post to social networking sites like Facebook and Twitter, or you could create a set of links for shortening your URL with different services like is.gd and bit.ly. I also saw a really creative idea of incorporating a form for searching a site in to the admin bar. The possibilities are endless, so what are you going to do with it? I’d love to see what you come up with.

Remove the bar altogether

Perhaps you’ve decided that the WordPress Admin Bar isn’t for you. All you need to do to hide the WordPress Admin Bar is go to your profile (Users > Your Profile from the dashboard) and uncheck the two boxes which determine when the admin bar should be displayed and it’ll never bother you again. That was painless wasn’t it…

If you want to go a step further and disable the WordPress Admin Bar for all users on the site, you can add the following function to your functions.php file:

45 thoughts on “Take Control of your WordPress Admin Bar”

  1. Ovidiu says:

    trying to add a link to the comments menu, doesn’t work for me :-( it works if I take the parent part out so it displays as top level menu:

    `function addNetworkComments($wp_admin_bar) {
    if ( is_user_logged_in() ){
    $wp_admin_bar->add_menu( array( ‘id’ => ‘discutiile_mele’, ‘parent’ => ‘comments’, ‘title’ => __( ‘Discutiile mele’),
    ‘href’ => admin_url( ‘index.php?page=my_network_comments’ )
    ) );
    }}
    add_action(‘admin_bar_menu’, ‘addNetworkComments’, 0);`

    1. That’s interesting – I can’t see anything inherently wrong with your code – it should work as far as I’m concerned. So you can install it without a parent by omitting that variable?

      1. Ovidiu says:

        right, if I take out the id and parent stuff it works. have tried a few variations but can’t get it to work. do I have to add some more declarations to the parent to make the comment part a drop down (as it isn’t by default)? tried changing the parent to appearance as that is a drop down already, but doesn’t work either…

        1. No, you don’t have to do anything to make the menu a drop-down, but are you saying that you don’t currently have the comments menu in your admin bar?

          1. Ovidiu says:

            no.
            I DO have the comments parent menu but I can’t attach this menu item to it. I can make it a root level entry though. and I can’t attach it to any other menu either…

  2. ed says:

    How would I customize the look for subscribers….I want to delete dashboard and edit my profile for subscribers and keep logout…maybe add another link or two under their name…Any help would be great!

    1. When you say you want to change the look for your subscribers, does that mean that you want a different set of links in the admin bar for different user levels?

      1. Gears MX says:

        Hi Dave, that information helped me a lot. The guy above didn’t answer, but I do need to create different menues for suscribers. I thought that changing ‘super_admin’ for ‘suscriber’ would work, but it didn’t, in fact that hide the bar. Do you know how could I add menues for my suscribers?
        Thanks!

  3. Unknown says:

    Excellent tutorial, something i was looking for, but can we put link by which user can bookmark content to their social profile.

    1. Absolutely. Create links using these formats for the various different social networks.

      1. Unknown says:

        Thanks Dave !!!

  4. ed says:

    How do I remove Edit My Profile?

    1. Actually, I’m not sure how to remove individual links from within an existing menu with editing admin-bar.php. A workaround would be to disable that whole menu and recreate the menu using this tutorial without adding in the Edit My Profile link.

    2. Ovidiu says:

      can’t you simply hide it with a display: none?

      1. You could if that single link on that specific menu had its own CSS class.

        1. David Paul says:

          Each of those links does have it’s own id. Use an inspector to find the ID of the link you want to hide, then hide it with a function in functions.php

  5. Ovidiu says:

    the id of that link is id=”wp-admin-bar-edit-my-profile”

    1. Ahh yes you’re right. But you’ll also have to account for it being in a list (). Thanks Ovidiu

  6. Mark Walle says:

    Just gonna drop a handy link to the phpdocs for this class… I came here looking for a “remove_node” method, which happily i found here:
    http://phpdoc.wordpress.org/trunk/WordPress/WP_Admin_Bar.html
    Thanks Dave

    1. Thanks Mark. I really appreciate you coming by and leaving that useful link

      1. Mark Walle says:

        You’re welcome – though i’m encountering a problem with the remove_node method, which takes types ( $id, &$menu) … can’t seem to get it to work to remove the “add post” option. I’m trying to use WP to have a site that simple allows “add page” (because i’m doing a static to wp cms port), and i’m not including a loop for posts, just pages. Do you how I would call the method to have act properly in the way i’m describing?

        1. Hmm, surely it’s easier to disable or modify the post type “Posts” altogether than hiding it. Have a look at something like http://codex.wordpress.org/Function_Reference/register_post_type or http://codex.wordpress.org/Function_Reference/remove_post_type_support

        2. A.J. Biddles says:

          I know this is late, but hopefully it will help someone with the same problem. It may not be obvious (as it wasn’t to me), but after looking at the source code – it is clear that all menu items are nodes that may or may not contain other nodes. Long story short, to hide an item from a menu is the same as hiding an entire menu. So to get rid of the “Add Post” option, you simply:

          $wp_admin_bar->remove_menu (‘new-post’);

          (same for edit-profile, logout, new-page, new-media, new-link, etc….)

          -AJ

          1. Mark Walle says:

            Better late than never – a useful point that should be included here. Thanks!

  7. Tom Webb says:

    To be able to remove menus and submenu items you need to use a different hook.
    in your example you use
    add_action(‘admin_bar_menu’, ‘my_admin_bar_menu’);
    this is fine for adding but not removing as the admin bar is already rendered by this point.
    use
    add_action(‘wp_before_admin_bar_render’, ‘my_admin_bar_menu’);
    this will allow you to ad and remove items.

    1. Hi Tom,

      That’s true. If you look at the snippet I’ve included for removing items, you’ll see that it uses the wp_before_admin_bar_render hook.

  8. Derek says:

    Hey Guys!!!!

    I need help with some specific admin bar customizations…
    Let me explain how I need that.
    I want my buddypress admin bar like Facebook/G+ functions style.
    I changed the default buddypress admin bar to wordpress 3.3 admin bar, that’s really coolest than the buddypress default, but as I said, I need some customizations else…
    Well, I’m going to put the admin bar tabs ideas one below the other, but please, imagine this horizontally:
    PS: To do the modifications below I need to increase the admin bar hight like facebook’s bar.
    ———————————————
    WP-LOGO TAB: I need to change this logo for one of the same size and shape, like a little ball, but the drop down menu I want to change to my network “Privacy Politics” instead of WP informations.
    ———————————————
    MY SITE LOGO: Just linking to the homepage, no dropdown menu is necessary.
    ———————————————
    WP-ACTUALIZATIONS LOGO: I want this nice logo to display the user’s notifications instead the written tab, and the dropdown menu just like it is when the user put the mouse coursor on the tab, in fact the only modification is changing the tab from written to a logo with the same notifications counter and dropdown.
    ———————————————
    Blank Space
    ———————————————
    CENTRAL SEARCH BAR: I need a central search bar with buddypress options to search members, groups, foruns and blogs. I need this search bar in the same size of facebook’s central search bar.
    ———————————————
    Blank Space
    ———————————————
    USER-ACCOUNT WITH AVATAR: The same user account with avatar, but just with a little bit bigger avatar and the same drop down menu.
    ———————————————
    Just this, summarizing the customizations I need to do is increase the admin bar hight;
    Just change the wp logo to a same size and shape logo, and change the drop down menu;
    After insert my website logo just linking to homepage, with no drop down.
    Change the default notifications tab to the actualization logo (those two circular arrows) and the notifications counter, and use the default drop down menu.
    After a little blank space insert a Central Search Bar with the dropdown of buddypress search options to “Members, Groups, Foruns and Blogs”.
    And again after a blank space the My Account options just like it is for default, and just increase a little bit the user’s avatar size.
    And for the final, remove that default wp search button on the right.
    Anyone could help me with this customizations? I’m a begginer in php codes and I’m having a lot of difficult to do this things…
    Thanks guys!
    Derek

    1. Well, anyone is welcome to help you of course, but this seems like a lot and I would recommend hiring someone to do these modifications for you if you can’t figure it out yourself. Hope you’re able to find the solution you’re looking for either way.

  9. Mike says:

    Thank you for this awesome tut !
    But I hope you would help me with this.
    I just want my custom menu to be next to the search at the right .
    What code do I add to do that ?
    Thanks again

    1. I haven’t tried it, but you should be able to create a new div class for your new menu and use float:right to keep it over to the right-hand side. Let me know if you can figure it out.

  10. Derek says:

    Is there some way to centralize all the Admin Bar content?

    1. Hi Derek,

      I did a bit of a search for you and I think that this might be the answer you’re looking for: http://wordpress.stackexchange.com/questions/30997/add-class-to-wordpress-admin-bar

  11. Julien says:

    Hi
    Thank you for the great tut, I thought it would be a piece of cake but I must be making a newbie mistake because i get the following error:
    Fatal error: Call to undefined function add_action() in …/wp-includes/functions.php on line 157
    Did I change the wrong functions.php?
    Thank you

    1. Yes, you’re editing the wrong functions.php file. It will be in /wp-content/theme/activetheme, where activetheme is the active theme on your site.

  12. Michal says:

    Hi,
    thanks for the tutorial:) Could you please tell me what to do if I would like to add a second bar at the top of the page but only with login form and a facebook like button which would be visible to all visitors – even for unregistered:)
    I already have the code for login form and facebook:

    <form name="loginform" id="loginform" action="” method=”post”>

    Login:
    <input type="text" name="log" id="user_login" class="input" value="” size=”10″ tabindex=”10″ />

    Hasło:

    <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="” tabindex=”100″ />

    but I don’t know how to place it nicely in a bar…

    Best regards,
    Michal

    1. This is not the approach you want to take for adding the form that you’re looking for. You want to go with a plugin like Hello Bar instead.

  13. Ferpont says:

    Hi Dave! nice and handy tut…
    I got rid of almost all the elements in the admin bar that weren’t needed for my actual project, but I need also to get rid of the link to the user’s profile (the one in the “howdy, xxxxuser”)… How should I go about it?
    Thank you in advance!

    1. Actually, I’m not too sure. I’ll have to research that one.

      1. Ferpont says:

        Thank you Dave! let me know if you find something!

  14. Florence Gielen says:

    Hi,
    Id like to change the destination of the default “edit my profile” link on right side of the bar. How and where do I do that?
    Cheers

    1. I’m not sure you can do that I’m afraid. I’d be intrigued to hear if you find the answer though.

      1. Florence Gielen says:

        Yeah I’m not a programmer so I’ve been looking for clues online the past few days. But no one seems to be able to point me in the right direction. I did find a folder called (hope I recall this correctly) admin bar in WP includes, but I don’t know enough about coding to know what to change. I did try, but I didn’t do it correctly, I don’t think. So I changed it back. If I find a solution I’ll let you know.

        1. First of all, you should NEVER change the WordPress core files – no exceptions. Not only can it break things, but as soon as you need to upgrade WordPress, those changes will get overwritten and you’d have to make the changes again. So don’t edit anything in the wp-admin or wp-includes files :) I hope you can find the answer though.

  15. Wayne says:

    Hello,

    Would there be a way when adding a custom menu to add it for all users and not just the super admin?

    1. The admin bar can be added for users of any role you choose, including for every logged-in user.

Leave a Reply

7ads6x98y