WordPress.org

Ready to get started?Download WordPress

Forums

WP Modal Login
using in navigation menu (25 posts)

  1. mariolop
    Member
    Posted 1 year ago #

    hello, anyway to use wp modal login in navigation menu?
    thanks

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

  2. Cole Geissinger
    Member
    Plugin Author

    Posted 1 year ago #

    At this moment there's no way, but something I was thinking of the other day. I'll see about adding this feature in a future version.

  3. paulgiurin
    Member
    Posted 1 year ago #

    Using it in wp nav:

    paste this in your functions.php

    /**
    * Hook to implement shortcode logic inside WordPress nav menu items
    * Shortcode code can be added using WordPress menu admin menu in description field
    */
    function shortcode_menu( $item_output, $item ) {

    if ( !empty($item->description)) {
    $output = do_shortcode($item->description);

    if ( $output != $item->description )
    $item_output = $output;

    }

    return $item_output;

    }

    add_filter("walker_nav_menu_start_el", "shortcode_menu" , 10 , 2);

    and then in your nav description section paste in shortcode.

  4. mariolop
    Member
    Posted 1 year ago #

    In the nav description section???
    Shouldn't it be in the URL field? it is not working

  5. mariolop
    Member
    Posted 1 year ago #

    Nevermind, got it.
    Thank you

  6. darwin1995
    Member
    Posted 1 year ago #

    Could one of you explain fully how you implemented this as I'm a bit confused as to the process and desperately want this in my navigation menu as well.

    Many thanks

  7. darwin1995
    Member
    Posted 1 year ago #

    Where in my theme functions.php do i paste the code and what short code do I enter into my nag description?

    Cheers

  8. mariolop
    Member
    Posted 1 year ago #

    you have to paste it at the end of your theme's functions.php file. Then, go to Menu in the WP-admin area, enable description under screen options (upper right corner), leave the URL field empty and paste the shortcode in the description field.

    Bests

  9. Aniruddha Mishra
    Member
    Posted 1 year ago #

    using this the logout function is not working..

    Please check http://metainfos.com/demo/

  10. MitzuWorks
    Member
    Posted 1 year ago #

    @ani7ruddha

    The shortcode to use is:

    [wp-modal-login login_text="Login" logout_text="Logout"]

    You should paste this in a custom menu item with
    URL: http://#
    Navigationlabel: Login/Logout
    Description: the shortcode

    Save the menu and it should become visible and functional.

  11. mazrobby
    Member
    Posted 1 year ago #

    it breaks the logout function :(

  12. Cole Geissinger
    Member
    Plugin Author

    Posted 1 year ago #

    Just a quick update, I have begun working on the next major release, 2.1, and it will officially support wp_nav_menu() support.

    No set release date, but you are always more than welcome to install and test the bleeding edge versions on the GitHub account https://github.com/colegeissinger/wp-modal-login

  13. pulla
    Member
    Posted 1 year ago #

    sound great! Is it possible to add on navigation with current GitHub version? or do I have to wait more?

  14. Cole Geissinger
    Member
    Plugin Author

    Posted 1 year ago #

    Not available yet in the bleeding edge versions, but you can follow the repo and you should get notifications about any updates when they roll out.

    Just remember, branch 2.1 is an alpha version so I wouldn't install it on any live servers :)

  15. sweetmelody
    Member
    Posted 1 year ago #

    Waiting for the good news, thanks Cole!

  16. miakurt1
    Member
    Posted 10 months ago #

    I am stuck and have spend all day trying to add a jquery login form. Please help!!!

    Where is the nav description section and which shortcode should be pasted in there?

    Thank you.

  17. miakurt1
    Member
    Posted 10 months ago #

    Also where do I add this line

    add_modal_login_button( $login_text = 'Login', $logout_text = 'Logout', $logout_url = '', $show_admin = true )

  18. Jtree5757
    Member
    Posted 8 months ago #

    Hi @Cole Geissinger

    Any update on support for inserting it into the nav menu?

    +1 from me!

    I tried the code above but got the white screen of death!

    thanks

  19. Jtree5757
    Member
    Posted 8 months ago #

    Nevermind on the white screen of death.

    I got it working, don't know how as I just did the same things. Maybe it was the order I did the things.

    But it would still be nice to have it as a feature already built in to the plugin

  20. samiotis
    Member
    Posted 8 months ago #

    After implementing the above code, I got it working in the nav menu but after logging in, I get redirected to the WordPress login page, where I have to log in again, instead of being directed to the page of my choice. Any ideas

    http://www.supplierblacklist.com/

  21. RogerSanchez
    Member
    Posted 7 months ago #

    This page was very helpful, so thanks all.

    With a couple of sites I've been working on, I figured I would outline the instructions step-by-step in one post, as I had to piece together all the (awesome and helpful) information - hope this helps:

    STEP 1 - Open your theme's functions.php file (possible path for majority: wp-content/themes/(theme-used)/functions.php) and paste the following code within the file:

    /**
    * This custom function is for PLUGIN: WP Modal Login - Hook to implement shortcode logic inside WordPress nav menu items
    * Shortcode code can be added using WordPress menu admin menu in description field
    */
    function shortcode_menu( $item_output, $item ) {
    
    if ( !empty($item->description)) {
    $output = do_shortcode($item->description);
    
    if ( $output != $item->description )
    $item_output = $output;
    }
    
    return $item_output;
    }
    
    add_filter("walker_nav_menu_start_el", "shortcode_menu" , 10 , 2);

    STEP 2 - Save the functions.php file

    STEP 3 - In your WP-Admin, navigate to your theme's 'Edit Menus' page (path: wp-admin 'Appearance'-->'Menus' page)

    STEP 4 - When in the 'Edit Menus' page (I'm assuming it would be first time in this walk-through), go to top-right corner and click the 'Screen Options' tab. From here, tick (checkmark) all boxes (you won't need all of them, but maybe in the future). They will automatically populate in the 'Edit Menus' area below.

    STEP 5 - Add the following field-values to the menu-item you choose for login/logout:

    URL: http:// - or https:// (depending if you have SSL or not) + YourWebsite.com/#login-box (example: https://MyWebsite.com/#login-box)
    Navigation Label: Login/Logout
    Description: [wp-modal-login login_text="Login" logout_text="Logout"]

    STEP 6 - Save the menu by clicking 'Save Menu'

    This is it: you should now be able to login/logout from here.

    As a sidenote: For my site(s), I have my website entirely front-end for lower-level access users, and back/front end for admin type users via the WP User Frontend Plugin, I then created custom usertypes (using both Justin Tadlock's method and User Role Editor Plugin), removed default unnecessary fields using Hide User Profile Fields Plugin, then I created custom-content viewable fields/menu items for those different user-types, set private pages viewable by user-type (or individual user, if you prefer) and utilized Adminimize Plugin for minute/granular access to each one of those customized users. I also allowed certain admin-type users the privilege to switch between users in the directory and back again via the User Switching Plugin.

    There are a host of other methods and functions I used to create quite the private website for my clients (users - except admins - cannot view anyone else's profile, multitude of forms for each user-type, custom functions, etc.), but the above is my preferred method to use when allowing logins/logouts in my WordPress sites that I feel anyone can use to their benefit. I'm only inputting this as an additional method of login/logout that works for me in the hopes it could help anyone else out since this deals with login/logout accessibility.

    I did see in the plugin author's notes that login/logout redirects are coming in the future: until then, I will keep using the Peter's Login Redirect Plugin.

    Hope this helps out - have a good day!
    Roger

  22. Bloopie
    Member
    Posted 7 months ago #

    Hello Roger,

    I'm so glad I found your post. This did the job very quick and easy.

    I was just wondering if there was a way to change the background color for the Login/Logout link now, as it stands out from the rest of the links on my navigation menu. It only happens when I'm on the home page for some reason.

    Thanks in advance.

  23. RogerSanchez
    Member
    Posted 6 months ago #

    Hi there Bloopie;

    Sorry about the delayed response: I tend to be very busy with clients all the time, but figured if you are

    I haven't gone into it that far as I don't really need to change the styling on my end (the default suited just fine for me), but I do know how to do it.

    In simple terms, to change the background image, install a plugin to your site called Lazyest Stylesheet (I put all my custom CSS in this all the time) and paste the following CSS within this stylesheet:

    .login-popup {
    background-color:#YOUR-HEX-COLOR-HERE;
    }

    Put whatever background color you wish where it states 'YOUR-HEX-COLOR-HERE' and save. you can refresh your screen to see the changes (in another browser, of course since you will be logged in on one browser and not see the login box until you are logged out - I test in multiple browsers at one time all the time).

    I'm enclosing a link that shows my using FireBug in FireFox to find the CSS I wish to change for your reference - VIEW IMAGE.

    Again, hope this helps you out, have a great day!

    Roger

  24. Robin W
    Member
    Posted 6 months ago #

    Roger - thanks for posting such a great set of instructions - I've just added this to my menu, and it looks great !

  25. RogerSanchez
    Member
    Posted 4 months ago #

    No problem Robin W - Glad I was able to help out : ) - Have an awesome day!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.