#LoginPopup

• digitalpuppy

  said

  Hello

  could I confirm how you setup the Login Popup? I have created a custom entry for my menu with url http://www.mydomain.com/#LoginPopup but when I click on this it just goes to http://www.mydomain.com/#LoginPopup (my homepage) no popup. Have I missed an extra step?

  I have disabled all plugins except BuddyPress. If I can solve this this my next question would be

  How could I change the login link in the BuddyBar to work with #LoginPopup rather than going to /wp-login.php

  Many thanks in advance

  Rob

• Trevor

  said

  Create a custom menu item with the following settings:

  URL: #LoginPopup
  Label: Sign in
  CSS Classes: popup -function-is-user-logged-in

  Click here to see an example.

  There may be a better solution, but here is what I have found to work regarding the BuddyBar Log in link displaying the popup window – using your FTP program, sign in to your root Wordpress install and navigate to wp-content/plugins/buddypress/bp-core. Download a copy of the “bp-core-buddybar.php” file to your computer, to err on the side of caution, rename the file bp-core-buddybar.php on your server to orig-bp-core-buddybar.php, open(with a plain text editor, dreamweaver, coda, etc.) the buddybar file you downloaded, go to line 415, modify as shown below, upload modified version and test it out. If something goes wrong or you get an error, simply delete the file you just uploaded and rename “orig-bp-core-buddybar.php” to “bp-core-buddybar.php”

  Original code:

    echo '<li class="bp-login no-arrow"><a href="' . bp_get_root_domain() . '/wp-login.php?redirect_to=' . urlencode( bp_get_root_domain() ) . '">' . __( 'Log In', 'buddypress' ) . '</a></li>'; 

  Click here for screenshot of original code

  Change to something like this to show popup:

    echo '<li class="popup bp-login no-arrow"><a href="#LoginPopup">' . __( 'Log In', 'buddypress' ) . '</a></li>'; 

  Click here for screenshot of modified code

  Please keep in mind that editing the core files of wordpress and/or buddypress is never a “good” idea – and ALWAYS, backup your DB and site files before performing such modifications. Please use good judgement and modify core BP files at your own risk.

  Hope this helps!

• digitalpuppy

  said

  Thank you, very much. Knew I was missing something simple (CSS classes). Your second example of changing the buddybar gave me the idea I should be able to do this with a function. The following seems to work, placed at the bottom of Mingle’s function.php -

  
<?php
function custom_bp_adminbar_login_menu() {
  global $bp;
 
  if ( is_user_logged_in() )
    return false;
  echo '<li class="popup bp-login no-arrow"><a href="#LoginPopup">' . __( 'Log In', 'buddypress' ) . '</a></li>';
  // Show "Sign Up" link if user registrations are allowed
  if ( bp_get_signup_allowed() )
    echo '<li class="bp-signup no-arrow"><a href="' . bp_get_signup_page(false) . '">' . __( 'Sign Up', 'buddy press' ) . '</a></li>';
}
remove_action( 'bp_adminbar_menus', 'bp_adminbar_login_menu', 2 );
add_action( 'bp_adminbar_menus', 'custom_bp_adminbar_login_menu', 2 );
?>


  Saves editing core files and hopefully is future / upgrade proof.

  cheers

  rob

• Trevor

  said

  Excellent alternative, thanks for sharing that!

• octoberstone

  said

  Excellent! Very clear instructions – appreciate this

• jpratyush

  said

  Hello! My menu screen only provides the option to enter URL: #LoginPopup and Label: Sign in. I dont see the option to enter the CSS Classes and neither does my custom SIGN IN menu link work. Any idea what I might be missing?

  Can you please help.

• Trevor

  said

  While editing your menu, in the top right of your screen click on Screen Options and enable the corresponding checkbox for CSS Classes, it will then show up as an option while editing individual menu items so that you can put the appropriate class in.

  Create a custom menu item with the following settings:

  URL: #LoginPopup
  Label: Sign in
  CSS Classes: popup -function-is-user-logged-in

  

• jpratyush

  said

  Awesome! Thanks a lot for your quick response.

• AlexEstrada

  said

  Hi Guys,

  I cant get the Login button to appear on my menu. Each time that I add it as described above, it fails to appear at all on the website. It only happens once I add “Classes: popup -function-is-user-logged-in”. However, of course, if I do not include the CSS value, then the Sign In button appears in the menu, but it doesnt go anywhere, just myhomepage.com/#LoginPopup

  Any thoughts?

  *** I FIGURED IT OUT ***
  I initially failed to realize that I was logged in at the time. So the class “popup -function-is-user-logged-in” is not visible for users that are logged in. This was explained in the other Forum post for LoginPopup. Thanks Guys!

• hazman

  said

  Alrite, I think I drop an email about this just now. Alrite, I have try the solution it works =)

• Sydentic

  said

  Hi Guys,

  i have a external Application, the login off this application i´d like to integrate above the menu like the original template.
  How i can integrate a separate PHP-Code in a pop-up window?

• Steve

  said

  Hi @sydentic,

  The code for the popup is in the footer:

   
  <div class="hidden">
    <div id="LoginPopup">
   
      <form class="loginForm" id="popupLoginForm" method="post" action="http://para.llel.us/themes/mingle-wp/wp-login.php">
        <div id="loginBg"><div id="loginBgGraphic"></div></div>
        <div class="loginContainer">
          <h3>Sign in to your account</h3>
          <fieldset class="formContent">
            <legend>Account Login</legend>
            <div class="fieldContainer">
              <label for="ModalUsername">Username</label>
   
              <input id="ModalUsername" name="log" type="text" class="textInput" />
            </div>
            <div class="fieldContainer">
              <label for="ModalPassword">Password</label>
              <input id="ModalPassword" name="pwd" type="password" class="textInput" />
            </div>
          </fieldset>
        </div>
   
        <div class="formContent">
          <button type="submit" class="btn signInButton"><span>Sign in</span></button>
        </div>
        <div class="hr"></div>
        <div class="formContent">
          <a href="http://para.llel.us/themes/mingle-wp/wp-login.php?action=lostpassword" id="popupLoginForgotPswd">Forgot your password?</a>
        </div>
      </form>
   
    </div>
  </div>
  

  You could easily copy this to create a new popup or edit it as required.

• Sydentic

  said

  Hi @Steve,

  may you can give me a step by step instruction? I don’t know which kind of menu item i must create.

• Steve

  said

  Hi @sydentic,

  Once you have added the code, you link to the popup you simply add #DIVName to the URL. So if you want to create a menu item, use a custom menu item and put in the link field #divID or #LoginPopup or whatever the DIV ID is.

• oxxnptf

  said

  how do you add a sign-out menu when users are login?