Support » Plugin: WP Modal Login » using in wordpress admin bar

Viewing 3 replies - 1 through 3 (of 3 total)
  • jaxdestroyer


    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 */
    add_action('wp_before_admin_bar_render', 'annointed_admin_bar_remove', 0);

    If you are using buddypress use these instead


    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.



    WOW! That was an absolutely amazing post. I don’t think I have ever had feedback that good on any question I have ever posted for plugin support.

    Props to you, you are the type of person that makes me enjoy doing web design.

    I actually had a little bit of the php figured out beforehand, but I didn’t realize you could do these two lines:

    title' => '<a href="#login-box">Login</a>',
    'href' => '#login-box',

    That’s brilliant!

    On a side note, the css does not seem to be working for me. Any suggestions? I tried using inspect element but I can’t seem to pinpoint what isn’t working.



    Nvm I just had to wait a while (perhaps page caching caused a problem?) for the css to update.

    Thank you so much for your help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘using in wordpress admin bar’ is closed to new replies.