How To Customise The WordPress Toolbar

One of the WordPress tools we have on Coveloping is the WordPress Toolbar Generator which will generate all the code that you need to customise the WordPress toolbar. In this tutorial we're going to investigate what this generator creates and the different scenarios on when we can use it.

Remove Default Link

The WordPress toolbar comes with a lot of default links for things like going back to WordPress.org, support fourms, quick link to comments, new content, view post, edit post etc. On the right side of the toolbar you'll also see quick links to your user profile, edit profile and log out.

If you want to remove a node on the WordPress toolbar you need to use the method remove_node with the handle of the link. For example if you want to remove the WordPress logo you will use the following code.

function edit_toolbar_function ( $wp_admin_bar )
{
    $wp_admin_bar->remove_node( 'wp-logo' );
}
add_action( 'admin_bar_menu', 'edit_toolbar_function' );

If you want to remove all the default links you can use the following code.

function edit_toolbar_function ( $wp_admin_bar )
{
    $wp_admin_bar->remove_node( 'wp-logo' );
    $wp_admin_bar->remove_node( 'about' );
    $wp_admin_bar->remove_node( 'wporg' );
    $wp_admin_bar->remove_node( 'documentation' );
    $wp_admin_bar->remove_node( 'support-forums' );
    $wp_admin_bar->remove_node( 'feedback' );
    $wp_admin_bar->remove_node( 'site-name' );
    $wp_admin_bar->remove_node( 'view-site' );
    $wp_admin_bar->remove_node( 'updates' );
    $wp_admin_bar->remove_node( 'comments' );
    $wp_admin_bar->remove_node( 'new-content' );
    $wp_admin_bar->remove_node( 'my-account' );
}
add_action( 'admin_bar_menu', 'edit_toolbar_function' );

Hide The WordPress Toolbar For Everybody

The toolbar generator allows you to choose if you want to hide the toolbar for all users and will generate the following code.

// Hide toolbar for everyone
add_filter('show_admin_bar', '__return_false');

Hide The WordPress Toolbar For Non-Admins

If you want to just hide the toolbar just for non-admin users then you need to wrap the show_admin_bar function around a current_user_can function to check the capabilities of the current user.

// Hide toolbar for everyone but admin users
if ( ! current_user_can( 'manage_options' ) ) {
    show_admin_bar( false );
}

Add A New Link

To remove the links from the toolbar we need to use the remove_node method and to add a link to the toolbar we need to use the add_node method.

This method needs to take an array of arguments to define how the link should work.

  • ID - The ID used to define the link
  • Title - The text used on the link
  • Href - The URL used on the link
  • Meta - Is a array of meta information such as CSS class, rel attribute, onclick event, title attribute etc.
add_action( 'admin_bar_menu', 'add_new_toolbar_link', 999 );

function add_new_toolbar_link( $wp_admin_bar ) {
	$args = array(
		'id'    => 'add_new_page',
		'title' => 'Add New Page',
		'href'  => 'http://example.com/new-page/',
		'meta'  => array( 'class' => 'my-toolbar-page' )
	);
	$wp_admin_bar->add_node( $args );
}

There is another argument that you can pass into the add_node() which is parent, this allows you to define the parent node of the link so you can create a new menu of links on the toolbar.

add_action( 'admin_bar_menu', 'add_new_toolbar_link', 999 );

function add_new_toolbar_link( $wp_admin_bar ) {
	$args = array(
		'id'    => 'add_new_page',
		'title' => 'Add New Page',
		'href'  => 'http://example.com/new-page/',
		'meta'  => array( 'class' => 'my-toolbar-page' )
	);
	$wp_admin_bar->add_node( $args );

	$args = array(
		'id'    => 'add_new_child_page',
		'title' => 'Add New Child Page',
		'parent' => 'add_new_page',
		'href'  => 'http://example.com/new-child-page/',
		'meta'  => array( 'class' => 'my-toolbar-page' )
	);
	$wp_admin_bar->add_node( $args );
}

If you want to create this code for your own links use the WordPress Toolbar Generator.

WordPress Tool Generator

Coveloping Membership

Access to a range of developer tools, get your first month free

Start Your Free Trial

Don't miss out!

Sign up to our newsletter for the latest news from Coveloping

Leave a Reply

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

Code Copied!