How can I create a modal login on the login/register menu

How can I create a modal login on the login/register menu link (top-link)? I don’t want to redirect members to the wp-login.php nor a seperate but allow them to login quicker using the modal login concept. How can I achieve this?

Url: http://deefrentng.com/thum-new

  • Sumit Kumar
    • Site Builder, Child of Zeus

    Hi Barni,

    Thanks for that install :slight_smile:

    Before writing down the code, can you confirm that the “register/lost password” link from the plugin is working? I’m afraid, there’s kinda theme conflict there. You need to fix that before, the register link from plugin to work :slight_frown:

    However, to make the menu link open up a modal, here’s code for that:

    <script>
    jQuery(document).ready(function($) {
    $('ul#top-menu li:first a').attr( {'data-toggle':'modal', 'data-target':'#alimir_bootmodal', href:'javascript:void(0);'} );
    });
    </script>

    You can add this code, in your header.php file, in your child theme. Or not, use this plugin to insert the code in header. https://wordpress.org/plugins/header-footer/

    Currently this code will change link for “login” only. Once you get the register link working from your plugin, let us know and then we will get back to you for that code as well.

    Further, during responsive, the login-modal (close button) seems to be hidden behind header wrapper. You need to fix that with z-index.

    <style>.modal-scrollable{ z-index:99999!important; } </style>

    Use this in the same place where you insert the above code.

    Hope this was helpful.

    Regards, Sumit

  • Barni
    • The Bug Hunter

    Hi Sumath Kumar, Thanks for the headup. Right now I purchased userpro plugin and I would love to use it to get my modal login. A code was given by that and it says: “You can use the code”,

    Login via popup

    This code can be added in theme’s header file.

    I’m using Divi from ET. How can I integrate modal login into the menu link?

    Please WPMU help!

  • Sumit Kumar
    • Site Builder, Child of Zeus

    Hi @barni,

    I’m glad that you decided to go for advanced login form with social icons. The plugin you bought is more than just login and it provides very much of user customization: http://userproplugin.com/userpro/

    But, I’m afraid to say, if you have made mistake by buying this plugin. Did you noticed, if it has the feature of popup/modal login? We were only triggering the “login modal” to open upon clicking the two “login/register” menu’s on header. But since, there is no modal for it from plugin, then there will be full custom work needed to display such modal :slight_frown:

    At this point, I will just suggest you to go with our popup plugin: https://premium.wpmudev.org/project/the-pop-over-plugin/

    You need to enable “JavaScript Events” add-on from settings page and then use shortcode for the login in one of the popup and similarly, register shortcode in another popup.

    Once done, get back to us and we will further assist you to how to link the menu with popup. :slight_smile:

    I know, you will stumble upon it but then do not hesitate to write back to us. I’m just leaving it for you to do it by your own and so that it will help you to configure things properly. We, here at support, loves to instruct more than to do it our-self :slight_smile:

    Have a nice time.

    Let us know how you goes through this.

    Regards, Sumit

  • Sumit Kumar
    • Site Builder, Child of Zeus

    Hey Barni,

    A code was given by that and it says: “You can use the code”,

    Login via popup

    This code can be added in theme’s header file.

    Which type of code they gave you here? Can you locate us the link? If there is modal already then it will be helpful to do this easily without any plugin :slight_smile:

    -Sumit

  • Sumit Kumar
    • Site Builder, Child of Zeus

    Hi Barni,

    Thanks for that thread link, it helped :slight_smile:

    I added some JS codes in your theme-options (as of screenshot below). You can move the codes from there to your header-footer files if you want. However, this will work until you change your theme. :slight_smile:

    Please confirm, if this works for you!

    And yes, thanks for the "reputation points". :slight_smile:

    Let us know if we can be in any assistance for you, further!

    Regards, Sumit

  • Barni
    • The Bug Hunter

    Hey Sumit, that’s great, while the effect is seen, I didn’t see any login form? what is missing? Also, I will remove the one for Register because I don’t need a modal for it. While there is work to do, thank you very much for this.

  • Sumit Kumar
    • Site Builder, Child of Zeus

    @barni,

    I should have attached the screenshot earlier to show how it looks! Please refer to the two screenshots (for “not-logged-in” and “logged-in” cases).

    Now, I won’t deny the fact that there is some delay on showing the login-form. But, this is something that is done by the plugin. You should ask the plugin developer to why it takes time to show the popup? If you ask me, I would say, that they are using popup to display through “Ajax” (screenshot attached). I’m not sure if you are aware with this term, but the ajax processing is certainly a delay process. Ask them if there’s any other method to show this :slight_smile:

    Also, I will remove the one for Register because I don’t need a modal for it.

    Yes, the popup has already register link and so, it won’t be necessary here. However, I would also like to notice you on the fact that even after user is “logged in”, the button, still shows, “Login”. Did you realized this? It is because, the menu is not dynamic, based on user to check if they are logged in.

    To make it dynamic, the “php” file where the menu is called should be made conditional and when user is logged in, new button should be displayed there, saying either “Logout” or “Profile”. Does that makes sense?

    You can modify this from child theme. But, if you need our assistance for this as well, we will always be there to work it out for you. Let us know, if it is required :slight_smile:

    Btw, first confirm, if the popup works for you. Remove the browser cache, if it doesn’t work. :wink:

    Have a nice day.

    Regards, Sumit

  • Jonathan
    • New Recruit

    I installed both last night looking for a quick modal login. They both seemed to work well, but my theme had visual conflicts with bootmodal, because it injects bootstrap in the header. Ultimate-ajax did work well too. It uses jquery ui.

  • Barni
    • The Bug Hunter

    Lovely! You’ve brought a lot on the table…cool. Yes, I finally noticed the ajax login, and it is slow no doubt. In the moment while I will communicate with the user support you observed a vital point and it says;

    Yes, the popup has already register link and so, it won’t be necessary here. However, I would also like to notice you on the fact that even after user is “logged in”, the button, still shows, “Login”. Did you realized this? It is because, the menu is not dynamic, based on user to check if they are logged in.

    To make it dynamic, the “php” file where the menu is called should be made conditional and when user is logged in, new button should be displayed there, saying either “Logout” or “Profile”. Does that makes sense?

    Sincerely, it makes the nicest sense ever! I didn’t catch that part first,thanks. I would love this solution and I’m fully interested to making the menu dynamic. I have my child theme in place, and I’m ready to edit and upload the header.php to make this happen.

    Also, I want to know if I can use popup pro plugin with userpro: popup to get the modal login while userpro for user management?

    Thank you very much for sticking close to this solution.

    Warm Regards

  • Sumit Kumar
    • Site Builder, Child of Zeus

    Hey @barni,

    I’m not sure if the popup pro and userpro both of the plugin be compatible with each other. Like one of the case, that I encountered here: https://premium.wpmudev.org/forums/topic/popup-pro-not-appearing-mailchimp-integrated#post-786517

    It is because of the same “popup-type” gallery plugin, which resulted in conflicting with our popup pro. :slight_smile:

    What you can do here is try installing it and see if both popup works together. Once its done, then you can add the “login” shortcode provided in here: http://userproplugin.com/userpro/.

    That is all I can suggest you for now.

    Let us know how you encounter with this one.

    Regards, Sumit

  • Barni
    • The Bug Hunter

    @sumit Kumar, thank you very much for your pro response. I was just brooding if I can eventually use poppro however since the modal login from userpro is working at the moment, I will say we should proceed to the next solution tweak i.e making the login menu to be dynamic as suggested.

    I will be grateful if we proceed on the dynamic login menu.

    Also, I noticed that we have “Create an Account” in the login form, how can I hide this part and only show login? Reason; I created two registration point with different field sets *+(core reason the plugin was bought) for the site, hope you get my view. Dynamic menu to show log-out on my mind.

    Thank once again for your pro support. I’m pleased at your work-round. WPMU blazed right now!

  • Sumit Kumar
    • Site Builder, Child of Zeus

    Hi Barni,

    In regards to your queries;

    Also, I noticed that we have “Create an Account” in the login form, how can I hide this part and only show login?

    The code is from plugin and for now, i can only hide it from css. And FYI, I just didn’t got what the reason is there to hide it. However, its not that concern for us, right! :wink:

    I will be grateful if we proceed on the dynamic login menu.

    Well I then need to play with your “php” files…

    Can you Send In me through our secure Contact Form, the following details:

    – WordPress admin username/password

    – FTP/cPanel credentials (host/username/password)

    – link to this thread

    In the contact form select, “I have a different question” and in the subject field, mention “Attn: Sumit Kumar”. This ensures our bot to filter the mail and deliver them to me.

    Once then, please post it back here as well :slight_smile:

    Have a nice day :slight_smile:

    Regards, Sumit

  • Barni
    • The Bug Hunter

    @sumit Kumar, thanks for your kind response and I really appreciate your assistance. Right now, I only have the authority to give you my WordPress user admin pass. However, I can send you the whole theme files to play with and help to solve the dynamic menu login prob. Hope we are on right track? Also, WPMU as a support access permission right on the WordPress, would you like to use it or to send you a personal admin user pass?

    Regards

  • Sumit Kumar
    • Site Builder, Child of Zeus

    Hi, @barni,

    No worries, if you feel insecure to share the credentials, then its okay. It is just a matter of understanding and this is how we have been helping with issues for our valued members :slight_smile:

    However, I just checked that I can quickly make some changes from theme-editor in your dashboard and updated your child-theme’s “header.php” from there. Please be aware with this update and confirm if the changes in the frontend is what you requested with us. I mean the dynamic menu for logged-in and logged-out users is done :slight_smile:

    Furthermore, if there is more customization works in there, if you think, then do head over to our jobs dashboard to hire some expert guys over there to help you with it.

    If there is further assistance that you need from us, then do not hesitate to write it back here :slight_smile:

    Hope this was helpful,

    Regards, Sumit

  • Barni
    • The Bug Hunter

    Hey @sumit Kumar,

    Not that I didn’t feel secure, but only designated IPs are allowed to have access…I suffered from this as well when I’m using another internet solution at home, sorry buddy.

    And your note;

    Furthermore, if there is more customization works in there, if you think, then do head over to our jobs dashboard to hire some expert guys over there to help you with it.

    Don’t be off Sumit ok? However, you’ve being a solid help and I will look out for you…

    Confirmed. its working. Wow, thank you very much Sumit, I love the way you solve WP probs.

  • Sumit Kumar
    • Site Builder, Child of Zeus

    Hey @barni,

    Glad to hear that I've been good in solving issues there for you, so far :slight_smile:

    Nope, there's no any hard feeling at all, Barni :wink: We are support staff here and this is what we do for our valued members. I was suggesting you the further possible options to better think of customization. Like what I see now with your site, the useful menu items are missing in every other pages except homepage (screenshot attached).

    However, its just a suggestion there. It can even be customizable from dashboard, if it has that feature (I haven't checked that, btw).

    Thanks for confirming the updates made earlier.

    Please, do not hesitate to ask for any assistance you need from us, ever!

    Thanks again for the reputation points :slight_smile:

    Love to hear from you again! Have a nice time.

    Regards, Sumit

  • Barni
    • The Bug Hunter

    @ Sumit…Omgosh! Sincerely, this is my first time of meeting a support developer in my 2yrs of using premium WP products! Wow! I’m flabbergasted…and sure, you amazed me with your interest and passion to pointing to new issues…you’re simply PROACTIVE. Thank you very much for keeping tabs on the tweak that are necessary..

    I saw the screenshot you posted and the reasons for my above praised ok. I’m bewildered about how to solve this probs myself. You by now know I used Divi to setup the medical site and while great, as some of her shortcomings. Divi page builder doesn’t work with categories, custom post types (except those made by ET) and all buddypress pages! Now, before I proceed any further, is it cool to continue with this track or open a new one to address this issue?

    Thank you very much Sumit, you’ve been amazing and a big + to WPMU. I rate you 1000 without doubt.

    Best Regard, Cheers!

  • Michael Bissett
    • Recruit

    Hi @barni, glad to hear that @sumit Kumar here got the modal login matter resolved to your liking! :slight_smile:

    Regarding the menu issue, that’d be best discussed on a separate thread, as that would be a different issue. If you could open a new thread for that, we’d be more than glad to assist you here. :slight_smile:

    Hope you’re having a great weekend!

    Kind Regards,

    Michael

  • Barni
    • The Bug Hunter

    @sumit Kumar, please if you are less busy, I’ll need your help for Divi fuulwidth menu to appear on category, cpt and buddypress as you discovered the needed tweak. I have a followup tip/solution suggested by @Shoeb Ansari here in this tread:

    https://premium.wpmudev.org/forums/topic/how-to-get-menu-into-inner-pages-of-divi#post-788788

    Please, let me know if you can do it because I’m ready to send my ftp and wp admin details now.

    I’m ready to answer any question.

    Thanks in anticipation.

    Regards

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.