This requires a 3 step process. First step is to get rid of your original login and possibly register Links. Second is to Replace it with your own code. Third is to update your css to reflect the changes.
In your Theme you should have a functions.php file. In that file you will need to make 2 functions the first is to remove the login and register links.
function annointed_admin_bar_remove() {
global $wp_admin_bar;
/* Remove their stuff */
$wp_admin_bar->remove_menu('wp-login');
$wp_admin_bar->remove_menu('wp-register');
}
add_action('wp_before_admin_bar_render', 'annointed_admin_bar_remove', 0);
If you are using buddypress use these instead
$wp_admin_bar->remove_menu('bp-login');
$wp_admin_bar->remove_menu('bp-register');
Now that they have been removed lets put the new modal link in. I have already made it to where it only shows when someone is not logged in.
if ( !is_user_logged_in() ) {
add_action( 'admin_bar_menu', 'modal__admin_link', 999 );
function modal__admin_link( $wp_admin_bar ) {
$args = array(
'id' => 'new_login',
'title' => '<a class="login wpml-btn login-window" href="#login-box">Login</a>',
'href' => '#login-box',
);
$wp_admin_bar->add_node( $args );
}
}
If you want the link to be in the same position as the previous ones there will be some css you will need to add to your stylesheet.
li#wp-admin-bar-new_login a.ab-item{
display: none;
}
#wp-admin-bar-new_login a{
color: #eee;
}
#wp-admin-bar-new_login a:hover{
color: #2EA2CC;
}
This will reposition the link to its rightful place and use the correct color for the admin bar links.
I hope this helps.
