Create a Modal Login Window with Toolset and Total Theme

I really like modal login windows and for most of my rather complex sites I am using the Toolset framework. Also, I am a big fan on the Total Theme Framework which I know very well. I am capable to create any kind of website just with that one single framework. And I use it as such. I don’t really use it as a theme. I just t´love the abilities and functionalities it provides.

Toolset though is a perfect plugin collection if you want to have total control over the content, creation and editing forms and any kind of views. No matter if you are creating a membership site or a shop or whatever. Toolset is capable of creating anything.

Requirements

• Total Theme
• Toolset Types
• Visual Compser (WPbakery)

My solution requires several plugins that I use in most of my projects. If you don’t use one of them you still might be able to work it out. It is not too complex. Just replace the HTML and the shortcodes used.

1. Add a login form: Place this HTML somewhere in your theme

At first, you need to create a login form with Toolset. This is easy as there is a simple shortcode to do so. Just add the following code somewhere in your design. Best would be to place it just where you want to put the button. For instance in the top bar HTML section. The login form is rendered by using a simple Toolset shortcode [wpv-login-form ]. Nothing too fancy but you at least have some control over the available options such as „remember me“ and the redirection url.

<span class="wpex-inline">




Jetzt einloggen oder kostenlos registrieren! 
<a href="#loginbox" class="wpex-lightbox menu-button" data-type="inline" data-options="width:550,height:700"><span class="fa fa-user"></span> Login</a>


</span>

<!-- HIDDEN LOGIN BOX-->

<div id="loginbox" class="modal-login">

<div class="entry">



Jetzt Einloggen

	

		

			
[wpv-login-form allow_remember="true" remember_default="true"]

		
	

<div style="font-size:13px;" class="vcex-module vcex-bullets custom-icon">
<ul>
<li><span class="vcex-icon-wrap"><span class="vcex-icon fa fa-angle-right"></span></span><div class="vcex-content"><a href="/passwort-vergessen/" target="_parent">Passwort oder Login vergessen?</a></div></li>
<li><span class="vcex-icon-wrap"><span class="vcex-icon fa fa-angle-right"></span></span><div class="vcex-content"><a href="/registrieren" target="_parent">Noch kein Mitglied? Jetzt registrieren!</a></div></li>
</ul>
</div>


</div>

</div>

Add some CSS to your child themes style.css

.modal-login {
	background-color:#fff;
display:none;
	padding:15px;
	margin: 0 auto;
	width: 280px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
.modal-login #user_pass,
.modal-login #user_login {
	 width: 100%;
}

Add some shortcodes and a filter to the functions.php

Sometimes the logged in shortcode is present already in the child themes but most of the time the logged out one is not available. Also, usually they not coded in a way that you can nest other shortcodes inside. You also need to globally activate the lightbox script in your theme. You can do this in the Total Framework simply by adding this one lone of code to the functions.php file of your child theme. See the last line in the code block below. If you use the modal just on a single page you can load the scripts by using this total theme shortcode:

//--------
//logged in shortcode
function check_user ($params, $content = null){
  if ( is_user_logged_in() ){
    return do_shortcode($content);
  }
  else {
    return;
  }
}
add_shortcode('loggedin', 'check_user' );

//--------
//logged in shortcode
function check_user_out ($params, $content = null){
  if ( !is_user_logged_in() ){
    return do_shortcode($content);
  }
  else {
    return;
  }
}
add_shortcode('loggedout', 'check_user_out' );

//--------
//globally load total theme lightbox script
add_filter( 'wpex_load_ilightbox_globally', '__return_true' );

Optional: Use non Toolset Logout function

There are two ways to use the logout function. First option is to just place a hardcoded link simply linking to /wp-login.php?action=logout and the second one would be to use the native Toolset logout function as I did in the example above. If you use the first one you need to also add the following „logout without confirmation“ function to your functions.php otherwise you will be asked if you want to proceed after clicking the logout link. Using the Toolset option you also have easy control over where to redirect after successful logging out.

//NO LOGOUT CONFIRMATION
add_action('check_admin_referer', 'logout_without_confirm', 10, 2);
function logout_without_confirm($action, $result) {

    if ($action == "log-out" && !isset($_GET['_wpnonce'])) {
        $redirect_to = isset($_REQUEST['redirect_to']) ? $_REQUEST['redirect_to'] : home_url();
        $location = str_replace('&', '&', wp_logout_url($redirect_to));
        header("Location: $location");
        die;
    }
}