Support » Plugin: WP Modal Login » using in navigation menu

Viewing 9 replies - 16 through 24 (of 24 total)
  • Also where do I add this line

    add_modal_login_button( $login_text = ‘Login’, $logout_text = ‘Logout’, $logout_url = ”, $show_admin = true )

    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!


    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

    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

    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) + (example:
    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!

    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.

    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 {

    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 – thanks for posting such a great set of instructions – I’ve just added this to my menu, and it looks great !

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

Viewing 9 replies - 16 through 24 (of 24 total)
  • The topic ‘using in navigation menu’ is closed to new replies.