WordPress wp_login_form Bootstrap

2 Views

Is there a way to change the html output from wp_login_form(), so that is like the bootstrap form?

The wp_login_form looks like this:

Read More
<form class="form-grey" name="loginform" id="loginform" action="http://domain.loc/wp-login.php" method="post">
  <p class="login-username">
    <label for="user_login">Username</label>
    <input type="text" name="log" id="user_login" class="input" value="" size="20">
  </p>
  <p class="login-password">
    <label for="user_pass">Password</label>
    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
  </p>
  <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p>
  <p class="login-submit">
    <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In">
    <input type="hidden" name="redirect_to" value="http://domain.loc/">
  </p>
</form>

And Bootstrap Forms look like this: 

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
    <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
Post Views: 2

Related posts

1 comment

  1. Try to use this :

    Take your arguments as per the classes and IDs required : 

    $args = array(
                    'echo' => true,
                    'redirect' => property_list(),
                    'form_id' => 'loginform',
                    'label_username' => '',
                    'label_password' => '',
                    'label_remember' => __('Keep me logged in'),
                    'label_log_in' => __('SIGN IN'),
                    'id_username' => 'user_login',
                    'id_password' => 'user_pass',
                    'id_remember' => 'rememberme',
                    'id_submit' => 'wp-submit',
                    'remember' => true,
                    'value_username' => NULL,
                    'value_remember' => false
                );

    Now pass this $args array to function below :

    <?php wp_login_form_custom($args);?>

    Now you can use this function as defined below :

    function wp_login_form_custom($args = array()) {
//you can use the values as $args['form_id'] and so on
//create you own HTML here with classes and IDs defined in the $args
}

Comments are closed.