This is a part of ‘white labeling’, which basically means rebranding.
When you have a website that is not used by people who really need to mess with WordPress, nor learn all about it (because you properly manage your own documentation for your writers), then that W in your admin toolbar is a bit odd, to say the least.
This doesn’t mean I don’t want my editors to know what WordPress is, we have a whole about page, and the powered-by remains everywhere in the admin pages, but that logo…
Well anyway, I decided to nuke it.
Remove What You Don’t Need
First I made a function that removes everything I don’t need:
function cleanup_admin_bar(): void {
global $wp_admin_bar;
// Remove customizer link
$wp_admin_bar->remove_menu( 'customize' );
// Remove WP Menu things we don't need.
$wp_admin_bar->remove_menu( 'contribute' );
$wp_admin_bar->remove_menu( 'wporg' );
$wp_admin_bar->remove_menu( 'learn' );
$wp_admin_bar->remove_menu( 'support-forums' );
$wp_admin_bar->remove_menu( 'feedback' );
// Remove comments
$wp_admin_bar->remove_node( 'comments' );
}
add_action( 'wp_before_admin_bar_render','cleanup_admin_bar' );
I also removed the comments node and the customizer because this site doesn’t use comments, and also how many times am I going to that Customizer anyway? Never. But the number of times I miss-click on my tablet? A lot.
But you may notice I did not delete everything. That’s on purpose.
Make Your New Nodes
Instead of recreating everything, I reused some things!
function filter_admin_bar( $wp_admin_bar ): void {
// Remove Howdy and Name, only use avatar.
$my_account = $wp_admin_bar->get_node( 'my-account' );
if ( isset( $my_account->title ) ) {
preg_match( '/<img.*?>/', $my_account->title, $matches );
$title = ( isset( $matches[0] ) ) ? $matches[0] : '<img src="fallback/images/avatar.png" alt="SITE NAME" class="avatar avatar-26 photo" height="26" width="26" />';
$wp_admin_bar->add_node(
array(
'id' => 'my-account',
'title' => $title,
)
);
}
// Customize the Logo
$wp_logo = $wp_admin_bar->get_node( 'wp-logo' );
if ( isset( $wp_logo->title ) ) {
$logo = file_get_contents( '/images/site-logo.svg' );
$wp_admin_bar->add_node(
array(
'id' => 'wp-logo',
'title' => '<span class="my-site-icon" role="img">' . $logo . '</span>',
'parent' => null,
'href' => '/wp-admin/admin.php?page=my-site',
'group' => null,
'meta' => array(
'menu_title' => 'About SITE',
),
),
);
$wp_admin_bar->add_node(
array(
'parent' => 'wp-logo',
'id' => 'about',
'title' => __( 'About SITE' ),
'href' => '/about/',
)
);
$wp_admin_bar->add_node(
array(
'parent' => 'wp-logo-external',
'id' => 'documentation',
'title' => __( 'Documentation' ),
'href' => 'https://docs.example.com/',
)
);
$wp_admin_bar->add_node(
array(
'parent' => 'wp-logo-external',
'id' => 'slack',
'title' => __( 'Slack' ),
'href' => 'https://example.slack.com/',
)
);
$wp_admin_bar->add_node(
array(
'parent' => 'wp-logo-external',
'id' => 'validation',
'title' => __( 'Data Validation' ),
'href' => '/wp-admin/admin.php?page=data_check',
)
);
$wp_admin_bar->add_node(
array(
'parent' => 'wp-logo-external',
'id' => 'monitors',
'title' => __( 'Monitors' ),
'href' => '/wp-admin/admin.php?page=monitor_check',
)
);
}
}
add_filter( 'admin_bar_menu', array( $this, 'filter_admin_bar' ), PHP_INT_MAX );
I replaced the default ‘about’ with my site’s about URL. I replaced the documentation node with my own. Everything else is new.
Now the image… I have an SVG of our logo, and by making my span class named my-site-icon, I was able to spin up some simple CSS:
#wpadminbar span.my-site-icon svg {
width: 25px;
height: 25px;
}
And there you are.
Result
What’s it look like?
All those links are to our tools or documentation.