Today i will show how to create custom login from with shortcode in wordpress.

Step 1: Copy and paste the below code on your functions.php file.

add_shortcode('user_login_form', 'ab_user_login_form');
function ab_user_login_form( $args = array() ) {
  $defaults = array(
    'echo'           => true,
    // Default 'redirect' value takes the user back to the request URI.
    'redirect'       => home_url('user-profile'),
    'form_id'        => 'loginform',
    'label_username' => __( 'Username or Email Address' ),
    'label_password' => __( 'Password' ),
    'label_remember' => __( 'Remember Me' ),
    'label_log_in'   => __( 'Log In' ),
    'id_username'    => 'user_login',
    'id_password'    => 'user_pass',
    'id_remember'    => 'rememberme',
    'id_submit'      => 'wp-submit',
    'remember'       => true,
    'value_username' => '',
    // Set 'value_remember' to true to default the "Remember me" checkbox to checked.
    'value_remember' => true,
  );


  $args = wp_parse_args( $args, apply_filters( 'login_form_defaults', $defaults ) );
  $login_form_top = apply_filters( 'login_form_top', '', $args );
  $login_form_middle = apply_filters( 'login_form_middle', '', $args );
  $login_form_bottom = apply_filters( 'login_form_bottom', '', $args );

    $abloginform = sprintf(
     '<form class="login_form validate-form" name="%1$s" id="%1$s" action="%2$s" method="post">',
        esc_attr( $args['form_id'] ),
        esc_url( site_url( 'wp-login.php', 'login_post' ) )
    ) . 
    $login_form_top .
    sprintf(
        '<span class="login-form-title ">
             Login 
        </span>',
    ) .
    sprintf(
        '<div class="mb-3">
            <label for="%1$s" class="form-label">%2$s</label>
            <input class="form-control" type="text" name="log" id="%1$s" autocomplete="username" value="%3$s" />
            
        </div>',
        esc_attr( $args['id_username'] ),
        esc_html( $args['label_username'] ),
        esc_attr( $args['value_username'] )
    ) .
    sprintf(
        '<div class="mb-3">
            <label for="%1$s" class="form-label">%2$s</label>
            <input class="form-control" type="password" name="pwd" id="%1$s" autocomplete="current-password" value="" size="20" />
        </div>',
        esc_attr( $args['id_password'] ),
        esc_html( $args['label_password'] )
    ) . 

    sprintf(
        '<div class="row mb-3">
    	    <div class="col d-flex justify-content-first">
    	      <div class="form-check">
    	        ' . ( $args['remember'] ? '<input class="form-check-input" name="rememberme" type="checkbox" id="%1$s" value="forever"' . ( $args['value_remember'] ? ' checked="checked"' : '' ) . ' />

    	        <label class="form-check-label" id="%1$s">%2$s</label>' : '' ) . '
    	      </div>
    	    </div>

    	    <div class="col d-flex justify-content-end">
    	      <a href="'.esc_url( wp_lostpassword_url() ).'">Forgot password?</a>
    	    </div>
    	  </div>',
    	  esc_attr( $args['id_remember'] ),
    	  esc_html( $args['label_remember'] )
    ) .
    $login_form_middle .

   
    sprintf(
        '<div class="s-btn mt-5">
            <input type="submit" name="wp-submit" id="%1$s" class="btn btn-primary mb-3" value="%2$s" />
            <input type="hidden" name="redirect_to" value="%3$s" />
        </div>',
        esc_attr( $args['id_submit'] ),
        esc_attr( $args['label_log_in'] ),
        esc_url( $args['redirect'] )
    ) .

    $login_form_bottom .

    '</form>';

    if ( $args['echo'] ) {
        echo $abloginform;
    } else {
    return $abloginform;
    }
}

Step 2: Copy below code and paste your theme file where you want to show the from.

<?php echo do_shortcode('[user_login_form]'); ?>

Last Update on:March 5th, 2023 at 5:19 pm

---