15+ tips and tricks for wordpress admin bar menu

Shortlink:

Change My Sites “Site Names” to “Domain.com” as the displayed name

/*
* Change My Sites Menu Names to Domain.com as the menu name
*/
function change_site_names() {
global $wp_admin_bar;
$blue_wp_logo_url = includes_url('images/wpmini-blue.png');
$blavatar = '<img src="' . esc_url($blue_wp_logo_url) . '" alt="' .
esc_attr__( 'Blavatar' ) . '" width="16" height="16" class="blavatar"/>';
foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
$menu_id = 'blog-' . $blog->userblog_id;
$blogname = ucfirst( $blog->domain );
$wp_admin_bar->add_menu( array(
'parent' => 'my-sites-list',
'id' => $menu_id,
'title' => $blavatar . $blogname,
'href' => get_admin_url( $blog->userblog_id ) )
);
}
}
add_action( 'wp_before_admin_bar_render', 'change_site_names' );

.
Remove the WP Logo from the My Sites Menu

/*
* Remove the WP Logo from the My Sites Menu
*/
function remove_wplogo_mysites() {
global $wp_admin_bar;
foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
$menu_id = 'blog-' . $blog->userblog_id;
$blogname = empty( $blog->blogname ) ? $blog->domain : $blog->blogname;
$wp_admin_bar->add_menu( array(
'parent' => 'my-sites-list',
'id' => $menu_id,
'title' => $blogname,
'href' => get_admin_url( $blog->userblog_id ) )
);
}
}
add_action( 'wp_before_admin_bar_render', 'remove_wplogo_mysites' );

Change the WP Logo Icon within the My Sites Menu to any icon you want

Create your own icon, upload it to the active themes /images/ directory, then change the NEW-ICONHERE.
png to the proper name.

/*
* Change the WP Logo Icon within the My Sites Menu to any icon you want
* Update the NEW-ICON-HERE.png name to match the proper file name.
*/
function add_mysites_logo() {
global $wp_admin_bar;
foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
$menu_id = 'blog-' . $blog->userblog_id;
$blogname = empty( $blog->blogname ) ? $blog->domain : $blog->blogname;
$blavatar = '<img src="' . get_bloginfo('template_directory') .
'/images/NEW-ICON-HERE.png" alt="' . esc_attr__( 'Blavatar' ) . '" width="16"
height="16" class="blavatar"/>';
$wp_admin_bar->add_menu( array(
'parent' => 'my-sites-list',
'id' => $menu_id,
'title' => $blavatar . $blogname,
'href' => get_admin_url( $blog->userblog_id ) )
);
}
}
add_action( 'wp_before_admin_bar_render', 'add_mysites_logo' );

Force the WordPress Admin Bar to display for all visitors

Even Logged Out Users can use the Admin Bar.

/*
* Force the WordPress Admin Bar to display for all visitors
*/
add_filter( 'show_admin_bar', '__return_true' );

Create a Menu for Logged Out Users

/*
* Create a menu for Logged Out Users
*/
function loggedout_menu( $meta = TRUE ) {
global $wp_admin_bar;
if ( is_user_logged_in() ) { return false; }
$wp_admin_bar->add_menu( array(
'id' => 'custom_menu',
'title' => __( 'Menu Name' ),
'href' => 'http://google.com/',
'meta' => array( target => '_blank' ) )
);
}
add_action( 'admin_bar_menu', 'loggedout_menu', 15 );

Add a Log In Link for Logged Out Users to the Admin Bar

/*
* Add a Log In Link for Logged Out Users to the Admin Bar
*/
function add_login_link( $meta = FALSE ) {
global $wp_admin_bar, $blog_id;
if ( is_user_logged_in() ) { return false; }
$wp_admin_bar->add_menu( array(
'id' => 'custom_menu',
'title' => __( 'Login' ),
'href' => get_home_url( $blog_id, '/wp-login.php' ) )
);
}
add_filter( 'show_admin_bar', '__return_true' );

<br data-mce-bogus="1">

add_action( 'admin_bar_menu', 'add_login_link', 15 );

Change the Opacity of WordPress Admin Bar

/*
* Change the opacity of WordPress Admin Bar
*/
function adminbar_opacity() {
$adminbar_opacity = '<style type="text/css">#wpadminbar
{ filter:alpha(opacity=50); opacity:0.5; }</style>';
echo $adminbar_opacity;
}
/* wp-admin area */
if ( is_admin() ) {
add_action( 'admin_head', 'adminbar_opacity' );
}
/* websites */
if ( !is_admin() ) {
add_action( 'wp_head', 'adminbar_opacity' );
}

Hide the WordPress Admin Bar with CSS, then display the Admin

Bar on hover with CSS and jQuery
/*
* Hide the WordPress Admin Bar with CSS, then display the Admin Bar on hover with CSS
and jQuery
*/

function hide_adminbar() {
$hide_adminbar = '<script type="text/javascript">
$(document).ready( function() {
$("#wpadminbar").fadeTo( "slow", 0 );
$("#wpadminbar").hover(function() {
$("#wpadminbar").fadeTo( "slow", 1 );
}, function() {
$("#wpadminbar").fadeTo( "slow", 0 );
});
});
</script>
<style type="text/css">
html { margin-top: -28px !important; }
* html body { margin-top: -28px !important; }
#wpadminbar {
-msfilter:"
progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
#wpadminbar:hover, #wpadminbar:focus {
-msfilter:"
progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
</style>';
echo $hide_adminbar;
}
/* wp-admin area */
if ( is_admin() ) {
add_action( 'admin_head', 'hide_adminbar' );
}
/* websites */
if ( !is_admin() ) {
add_action( 'wp_head', 'hide_adminbar' );
}

Change the Admin Bar Color Scheme

The colors below create a Blue Admin Bar. Modify the #color values to customize the look.
/*
* Change the Admin Bar Color Scheme
*/

function change_adminbar_colors() {
$change_adminbar_colors = '<style type="text/css">
#wpadminbar *, #wpadminbar{ color:#ffffff;text-shadow:#444444 0 -1px 0;
}
#wpadminbar{
background-color:#003399;
background-image:-ms-linear-gradient(bottom,#000033,#003399
5px);
background-image:-moz-linear-gradient(bottom,#000033,#003399
5px);
background-image:-o-linear-gradient(bottom,#000033,#003399
5px);
background-image:-webkit-gradient(linear,left bottom,left
top,from(#000033),to(#003399));
background-image:-webkit-linear-gradient(bottom,#000033,#003399
5px);
background-image:linear-gradient(bottom,#000033,#003399 5px);
}
/* menu separators */
#wpadminbar .quicklinks>ul>li{border-right:1px solid #003399;}
#wpadminbar .quicklinks>ul>li>a,#wpadminbar .quicklinks>ul>li>.abempty-
item{border-right:1px solid #000033;}
#wpadminbar .quicklinks .ab-top-secondary>li{border-left:1px solid
#000033;}
#wpadminbar .quicklinks .ab-top-secondary>li>a,#wpadminbar
.quicklinks .ab-top-secondary>li>.ab-empty-item{border-left:1px solid #003399;}
/* menu hover color and hover link color */
#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar
.ab-top-menu>li.menupop.hover>.ab-item{background:#333333;color:#ffffff;}
#wpadminbar .hover .ab-label,#wpadminbar.nojq .ab-item:focus .ablabel{
color:#ffffff;}
#wpadminbar .menupop.hover .ab-label{color:#ffffff;}
/* menu, on mouse over hover colors */
#wpadminbar .ab-top-menu>li:hover>.ab-item,#wpadminbar .ab-topmenu>
li.hover>.ab-item,#wpadminbar .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojq
.quicklinks .ab-top-menu>li>.ab-item:focus{
color:#fafafa;
background-color:#000033;
background-image:-ms-linear-gradient(bottom,#003399,#000033);
background-image:-moz-linear-gradient(bottom,#003399,#000033);
background-image:-o-linear-gradient(bottom,#003399,#000033);
background-image:-webkit-gradient(linear,left bottom,left
top,from(#003399),to(#003399));
background-image:-webkit-lineargradient(
bottom,#003399,#000033);
background-image:linear-gradient(bottom,#003399,#000033);
}
/* menu item links hover color */
#wpadminbar .menupop li:hover,#wpadminbar .menupop li.hover,#wpadminbar
.quicklinks .menupop .ab-item:focus,#wpadminbar .quicklinks .ab-top-menu .menupop .abitem:
focus{background-color:#ccffcc;}
/* menu item non-link colors */
#wpadminbar .ab-submenu .ab-item{color:#333333;}
/* menu item link colors */
#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks
.menupop ul li a strong,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs
.quicklinks .menupop:hover ul li a{color:#0099cc;}
/* my sites hover color */
#wpadminbar .quicklinks .menupop .ab-sub-secondary>li:hover,#wpadminbar
.quicklinks .menupop .ab-sub-secondary>li.hover,#wpadminbar .quicklinks .menupop .absub-
secondary>li .ab-item:focus{background-color:#dfdfdf;}
/* update menu colors */
#wpadminbar .quicklinks a span#abupdates{
background:#eeeeee;color:#333333;}
#wpadminbar .quicklinks a:hover span#abupdates{
background:#ffffff;color:#000000;}
/* howdy menu */
#wpadminbar .ab-top-secondary{
background-color:#003399;
background-image:-ms-linear-gradient(bottom,#000033,#003399
5px);
background-image:-moz-linear-gradient(bottom,#000033,#003399
5px);
background-image:-o-linear-gradient(bottom,#000033,#003399
5px);
background-image:-webkit-gradient(linear,left bottom,left
top,from(#000033),to(#003399));
background-image:-webkit-linear-gradient(bottom,#000033,#003399
5px);
background-image:linear-gradient(bottom,#000033,#003399 5px);
}
/* Howdy menu, username text color in dropdown */
#wpadminbar #wp-admin-bar-user-info .display-name{color:#333333;}
#wpadminbar #wp-admin-bar-user-info .username{color:#999999;}
/* search */
#wpadminbar #adminbarsearch .adminbar-input{color:#ccc;text-shadow:#444
0 -1px 0;background-color:rgba(255,255,255,0);}
#wpadminbar #adminbarsearch .adminbar-input:focus{color:#555;textshadow:
0 1px 0 #fff;background-color:rgba(255,255,255,0.9);}
#wpadminbar.ie8 #adminbarsearch .adminbar-input{backgroundcolor:#
003399;}
#wpadminbar.ie8 #adminbarsearch .adminbar-input:focus{backgroundcolor:#
fff;}
#wpadminbar #adminbarsearch .adminbar-input::-webkit-inputplaceholder{
color:#ddd;}
#wpadminbar #adminbarsearch .adminbar-input:-mozplaceholder{
color:#ddd;}
</style>';
echo $change_adminbar_colors;
}
/* wp-admin area */
if ( is_admin() ) {
add_action( 'admin_head', 'change_adminbar_colors' );
}
/* websites */
if ( !is_admin() ) {
add_action( 'wp_head', 'change_adminbar_colors' );
}

PHP Class that enables the Admin Bar for Admins Only and Removes 28px Space

/*
* PHP Class that enables the Admin Bar for Admins Only and Removes 28px Space
*/
class admins_only_admin_bar {
/*
* Loads when class is called
*/
function __construct() {
/* disables admin bar */
remove_action( 'init', '_wp_admin_bar_init' );
/* calls function to remove 28px space */
add_action( 'admin_head', array( &$this, 'remove_adminbar_margin' ) );
add_action( 'wp_head', array( &$this, 'remove_adminbar_margin' ) );
}

* Removes the 28px margin for the Admin Bar

public function remove_adminbar_margin() {
$remove_adminbar_margin = '<style type="text/css">
html { margin-top: -28px !important; }
* html body { margin-top: -28px !important; }
</style>';
echo $remove_adminbar_margin;
}
}
/* Admins Only - Call Class */
if ( current_user_can( 'manage_options' ) ) {
$display_admin_bar = new admins_only_admin_bar();
}

PHP Class that forces the Admin Bar for logged out users, adds a login link, removes the wp logo, and adds a custom link menu to the Admin Bar.

This example, removes the WordPress Logo, adds a Login Link, and creates a menu named “Our Other
Sites” with two Websites within the dropdown menu.

/*
* Force Admin Bar for logged out users, add a login link, remove the wp logo, and add
a custom link menu
*/
class force_admin_bar {
/*
* Loads when class is called
*/
function __construct() {
/* logged out users only */
if ( is_user_logged_in() ) { return false; }
/* remove wp logo */
add_action( 'wp_before_admin_bar_render', array( &$this,
'remove_wp_logo' ) );
/* remove search icon [uncomment to activate] */
//add_action( 'wp_before_admin_bar_render', array( &$this,
'disable_bar_search' ) );
/* force adminbar to logged out users */
add_filter( 'show_admin_bar', '__return_true' );
/* call function to add login link to admin bar */
add_action( 'admin_bar_menu', array( &$this, 'logged_out_menus' ),
15 );
}

* Menus for logged out users

 


function logged_out_menus( $meta = FALSE ) {
global $wp_admin_bar, $blog_id;
/* logout menu link */
$wp_admin_bar->add_menu( array(
'id' => 'login_menu',
'title' => __( 'Login' ),
'href' => get_home_url( $blog_id, '/wp-login.php' ) )
);
/* create menus */
$wp_admin_bar->add_menu( array(
'id' => 'custom_menu',
'title' => __( 'Our Other Websites' ) ) /* set the menu name */
);
/* menu link */
$wp_admin_bar->add_menu( array(
'parent' => 'custom_menu',
'id' => 'techNerdia', /* unique id name */
'title' => 'techNerdia', /* Set the link title */
'href' => 'http://technerdia.com/', /* Set the link a href */
'meta' => array( target => '_blank' ) )
);
/* menu link */
$wp_admin_bar->add_menu( array(
'parent' => 'custom_menu',
'id' => 'Google', /* unique id name */
'title' => 'Google', /* Set the link title */
'href' => 'http://google.com/', /* Set the link a href */
'meta' => array( target => '_blank' ) )
);
}

* Remove the WordPress Logo from the WordPress Admin Bar

function remove_wp_logo() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu('wp-logo');
}
/*
* Disable the Search Icon and Input within the Admin Bar [uncomment to
activate]
*/
//function disable_bar_search() {
// global $wp_admin_bar;
// $wp_admin_bar->remove_menu('search');
//}
}
/* Call Class */
$force_admin_bar = new force_admin_bar();

Move the Login Link from the left side to the right side [new]

/*
* Move the Login Link from the left side to the right side within the Admin Bar for
logged out users.
*/
function move_login_link() {
$move_login_link = '<style type="text/css">
#wpadminbar #wp-admin-bar-login_menu{float:right}
}
</style>';
echo $move_login_link;
}
add_action( 'wp_head', 'move_login_link' );

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!