Customize Admin Bar in WordPress
WorPress adds a fixed menu bar (Admin Bar aka Toolbar) at the top of the screen when user is logged in and the menu bar is visible even when you are at the front end of the site so it’s very helpful to access some admin pages quickly. WordPress allows us to customize the bar and it’s possible to add new links (menu items) in that bar or remove or change the existing ones. Using admin_bar_menu or wp_before_admin_bar_render hook we can customize the Admin Bar. To add new items we can call add_menu() method of the $wp_admin_bar global object (an instance of WP_Admin_Bar class) which may available only during the admin_bar_menu and wp_before_admin_bar_render hooks. In most cases developers use WP_Admin_Bar hook (WP_Admin_Bar’s internal hook) but also it could be done using wp_before_admin_bar_render hook as well and this action hook is called before $wp_admin_bar object is used to render the admin bar to the screen.
Note: The Admin Bar is replaced with the toolbar since WordPress Version 3.3. The preferred way to add or remove items to/from the toolbar is with add_node(), add_group() and remove_node(), which are almost similar.
How to use add_menu() :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | add_action( 'admin_bar_menu', 'handler_function_name' ); function handler_function_name() { global $wp_admin_bar; $wp_admin_bar->add_menu( array( 'id' => '', // an unique id (required) 'parent' => '', // false for a top level menu 'title' => '', // title/menu text to display 'href' => '', // target url of this menu item // optional meta array 'meta' => array( 'onclick' => '', 'html' => '', 'class' => '', 'target' => '', 'title' => '' ) ) ); } |
How to use remove_menu() :
1 2 3 4 5 6 7 | add_action( 'wp_before_admin_bar_render', 'remove_handler' ); function remove_handler() { global $wp_admin_bar; $menu_id = 'new-user'; // the menu id which you want to remove $wp_admin_bar->remove_menu($menu_id); } |
Add a new top level menu using wp_before_admin_bar_render hook :
1 2 3 4 5 6 7 8 9 10 11 | add_action( 'wp_before_admin_bar_render', 'customize_admin_bar' ); function customize_admin_bar() { global $wp_admin_bar; $wp_admin_bar->add_menu( array( 'id' => 'my_plugin-menu', 'parent' => false, 'title' => 'WP Fiddle', 'href' => admin_url('admin.php?page=wp_fiddle_settings'), ) ); } |
Add a new top level menu and two sub menus using admin_bar_menu hook :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | add_action( 'admin_bar_menu', 'customize_admin_bar' ); function customize_admin_bar() { global $wp_admin_bar; $wp_admin_bar->add_menu( array( 'id' => 'my_custom-menu', 'title' => 'My Menu', 'href' => false ) ); // Sub menu to open one of my plugins page $wp_admin_bar->add_menu( array( 'id' => 'my_plugin-page', 'parent' => 'my_custom-menu', 'title' => 'Plugin Setup', 'href' => admin_url('admin.php?page=wp_fiddle'), ) ); // Sub menu to open facebook (external link) in new window $wp_admin_bar->add_menu( array( 'id' => 'facebook-page', 'parent' => 'my_custom-menu', 'title' => 'Facebook', 'href' => 'http://facebook.com', 'meta' => array( 'target'=>'_blank' ) ) ); } |
The ability to customize the admin menu bar is very useful and common use to WordPress plugin authors to add a shortcut link of their plugin’s setup page in the admin bar just like I’ve used in the above example to show my plugin’s setup page using the admin_url() function to set the url of my plugin’s setup page.
Make an Existing Child Node a Parent Node using admin_bar_menu hook :
1 2 3 4 5 6 7 8 9 | add_action( 'admin_bar_menu', 'make_parent_node', 999); function make_parent_node( $wp_admin_bar ) { $args = array( 'id' => 'new-post', // id of the existing child node 'title' => 'Add New Post', // Set new title 'parent' => false // make it a top level node ); $wp_admin_bar->add_node($args); } |
Above code will move out the new post link (titled as Post) from the parent menu New and also the title of the link will be changed from Post to Add New Post.
Remove WordPress logo using wp_before_admin_bar_render hook :
1 2 3 4 5 6 7 8 9 | add_action( 'wp_before_admin_bar_render', 'remove_the_logo' ); function remove_the_logo() { global $wp_admin_bar; // Remove the WordPress logo $wp_admin_bar->remove_menu('wp-logo'); // or remove the user menu from 'New' using remove_node() $wp_admin_bar->remove_node('new-user'); } |
To remove an existing item from admin bar admin_bar_menu won’t work instead, wp_before_admin_bar_render hook has to be used.
Also, you can completely hide the admin bar from front end (just place this code in functions.php file)
1 2 3 4 5 6 7 8 9 10 | // Using "show_admin_bar" filter add_filter('show_admin_bar', '__return_false'); // Or directly call show_admin_bar( false ); [/code] <strong>Also, you can conditionally hide the admin bar depending on the user.</strong> [code lang="php"][/code] if ( ! current_user_can( 'manage_options' ) ) { show_admin_bar( false ); } |
These lines will only display the admin bar for users with administrative privileges.
Also, you can use set_current_user action hook to hide the admin bar
1 2 3 4 5 6 | add_action('set_current_user', 'hide_admin_bar'); function hide_admin_bar() { if ( !current_user_can('manage_options') ) { show_admin_bar( false ); } } |
This function uses do_action(), it calls set_current_user hook after setting the current user. This function could be replaced via plugins. If plugins do not redefine this function, then this will be used instead.
You may change the Howdy to Hello or whatever you want, on admin bar
1 2 3 4 5 6 7 8 9 | add_filter( 'admin_bar_menu', 'howdy_to_hello', 25 ); function howdy_to_hello( $wp_admin_bar ) { $my_account = $wp_admin_bar->get_node('my-account'); $newtitle = str_replace( 'Howdy,', 'Hello!', $my_account->title ); $wp_admin_bar->add_node( array( 'id' => 'my-account', 'title' => $newtitle, )); } |
If you want to completely remove my-account menu from admin bar, try this
1 2 3 4 5 | add_action( 'wp_before_admin_bar_render', 'remove_my_account' ); function remove_my_account() { global $wp_admin_bar; $wp_admin_bar->remove_menu('my-account'); } |
