Creating a login form in the frontend

The frontend login can be found in many WordPress websites, including small blogs. Usually, we place the login form in the sidebar of the website. In web applications, user interfaces are more complex and different compared to normal websites. Hence, we will implement a full-page login screen as we did with registration. First, we need to update our controller with another case for login, as shown in the following code:

    switch ( $control_action ) { 
      // Other cases 
      case 'login':                 
        do_action( 'wpwaf_before_login_form' ); 
        $wpwaf->login->display_login_form(); 
        break;  
    } 

We have used a new class called login to call this function. So we need to create a new class called WPWAF_Login inside the classes folder and do the object creation and file inclusion inside the WPWAF_Forum class as we did in previous occurrences. Once it's completed, we can add the display_login_form function to the new class using the following code:

    public function display_login_form(){ 
      global $wpwaf_login_params;       
      if ( !is_user_logged_in() ) { 
        include WPWAF_PLUGIN_DIR . 'templates/login-template.php'; 
      } else { 
        wp_redirect( home_url() ); 
      } 
      exit; 
    } 

This code will be executed once the user enters /user/login in the browser URL to display the login form. First, we need to check whether the user has already logged into the system. Based on the result, we will redirect the user to the login template or home page for the moment. Once the whole system is implemented, we will be redirecting the logged-in users to their own admin area.

The design form for login will be located in the templates directory as a separate template called login-template.php. Here is the implementation of the login form design with the necessary error messages:

    <?php global $wpwaf_login_params; 
          if(is_array($wpwaf_login_params)){ 
            extract($wpwaf_login_params); 
          } 
          get_header(); ?>  
    <div id='wpwaf_custom_panel'> 
      <div class='wpwaf-login-form-header' ><?php echo     __('Login','wpwaf'); ?></div> 
        <div id='wpwaf-login-errors'> 
            <?php 

            if ( isset($wpwaf_login_params['errors']) &&     count($wpwaf_login_params['errors']) > 0) { 
                foreach ( $wpwaf_login_params['errors'] as $error ) { 
                    echo '<p class="wpwaf_frm_error">'.$error .'</p>'; 
                } 
            } 


        if( isset( $wpwaf_login_params['success_message'] ) &&     $wpwaf_login_params['success_message'] != ""){ 
                echo '<p class="wpwaf_frm_success">' .     $wpwaf_login_params['success_message'] . '</p>'; 
            } 

            ?> 
      </div> 
      <form method='post' action='<?php echo site_url(); ?>/user/login'     id='wpwaf_login_form' name='wpwaf_login_form'> 
        <ul> 
          <li> 
            <label class='wpwaf_frm_label' for='username'><?php echo     __('Username','wpwaf'); ?></label> 
            <input class='wpwaf_frm_field' type='text'      name='wpwaf_username' value='<?php echo isset( $username ) ?     $username : ''; ?>' /> 
          </li> 
          <li> 
            <label class='wpwaf_frm_label' for='password'><?php echo     __('Password','wpwaf'); ?></label> 
            <input class='wpwaf_frm_field' type='password'     name='wpwaf_password' value="" /> 
          </li> 
          <li> 
            <label class='wpwaf_frm_label' >&nbsp;</label> 
            <input  type='submit'  name='wpwaf_login_submit' value='<?    php echo __('Login','wpwaf'); ?>' /> 
          </li> 
        </ul> 
      </form> 
    </div> 
    <?php get_footer(); ?> 

Similar to the registration template, we have a header, error messages, the HTML form, and the footer in this template. We have to point the action of this form to /user/login. The remaining code is self-explanatory and hence I am not going to make detailed explanations. You can take a look at the preview of our login screen in the following screenshot:

Next, we need to implement the form submission handler for the login functionality. Before this, we need to update the constructor of the WPWAF_Login class with the following code to define another custom action for login:

add_action( 'init', array( $this, 'login_user' ) );  

In the next section, we will be looking at the code for the login_user function and the login submission process.