WordPress.org

Ready to get started?Download WordPress

Forums

WP Modal Login
using in wordpress admin bar (4 posts)

  1. Blakelock
    Member
    Posted 1 year ago #

    I would like to do the same thing as discussed here: http://wordpress.org/support/topic/using-in-navigation-menu?replies=21

    But in the admin bar as opposed to the nav bar.

    Any suggestions?

    Website: http://www.theyouthlink.com

    Thanks!

    http://wordpress.org/plugins/wp-modal-login/

  2. jaxdestroyer
    Member
    Posted 1 year ago #

    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.

  3. Blakelock
    Member
    Posted 1 year ago #

    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.

  4. Blakelock
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.