how to use wp dropdown users instead of login in wp login form

Hey,

One way would be to create your own form and use wp_dropdown_users to create your select input (the function accepts arguments which allow you to return the html rather than echo it) ?? I’d probably look at doing it this way as it seems “cleaner” to me.

If you wanted to use those 2 functions there is an argument for “wp_login_form” that allows you to return the html rather than echoing it. Here you could return it and replace the username input with the dropdown. This would require a str_replace or preg_replace on the returned form html.

Or you could use JS to replace the input. This way you’d have to pass the dropdown html to JS using something like wp_localize_script.

Like I said, option 1 seems cleanest and means you can build the form however you want. Options 2 and 3 seem a little hacky but could still achieve what you are after.

Good luck!

Yeah I’m trying this but can’t pass username from wp_dropdown to wp_login

wp_login is apparently deprecated but you can see the documentation for wp_signon here.

Sorry, without more information I’m not sure how to help you. Perhaps a code example of what isn’t working?

Regards

so I made this login form:

function my_login_form( $args = array() ) {
$defaults = array( ‘echo’ => true,
‘redirect’ => site_url( $_SERVER[‘REQUEST_URI’] ), // Default redirect is back to the current page
‘form_id’ => ‘loginform’,
‘label_username’ => __( ‘Username’ ),
‘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’ => false,
‘value_username’ => ”,
‘value_remember’ => false, // Set this to true to default the “Remember me” checkbox to checked
);
$args = wp_parse_args( $args, apply_filters( ‘login_form_defaults’, $defaults ) );

$form = ‘
<form name=”‘ . $args[‘form_id’] . ‘” id=”‘ . $args[‘form_id’] . ‘” action=”‘ . site_url( ‘wp-login.php’, ‘login’ ) . ‘” method=”post”>
‘ . apply_filters( ‘login_form_top’, ” ) . ‘
<p class=”login-form”>
<label for=”‘ . esc_attr( $args[‘id_username’] ) . ‘”>’ . esc_html( $args[‘label_username’] ) . ‘</label>

–>> over here need to add dropdown menu with users which will pass login
I was trying wp_dropdown_users( array( ‘name’ => ‘author’ ) );

but my php knowledge is too poor to combine those two pieces of code :/

<label for=”‘ . esc_attr( $args[‘id_password’] ) . ‘”>’ . esc_html( $args[‘label_password’] ) . ‘</label>
<input type=”password” name=”pwd” id=”‘ . esc_attr( $args[‘id_password’] ) . ‘” class=”input” value=”” size=”10″ tabindex=”20″ />

‘ . apply_filters( ‘login_form_middle’, ” ) . ‘

<input type=”submit” name=”wp-submit” id=”‘ . esc_attr( $args[‘id_submit’] ) . ‘” class=”button-primary” value=”‘ . esc_attr( $args[‘label_log_in’] ) . ‘” tabindex=”100″ />
<input type=”hidden” name=”redirect_to” value=”‘ . esc_attr( $args[‘redirect’] ) . ‘” />
</p>
‘ . apply_filters( ‘login_form_bottom’, ” ) . ‘
</form>’;

if ( $args[‘echo’] )
echo $form;
else
return $form;
}

function my_login_form( $args = array() ) {
	$defaults = array(
		'echo'           => true,
		'redirect'       => site_url( $_SERVER['REQUEST_URI'] ), // Default redirect is back to the current page
		'form_id'        => 'loginform',
		'label_username' => __( 'Username' ),
		'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'       => false,
		'value_username' => '',
		'value_remember' => false, // Set this to true to default the "Remember me" checkbox to checked
	);
	$args     = wp_parse_args( $args, apply_filters( 'login_form_defaults', $defaults ) );
	$form = '<form name="' . $args['form_id'] . '" id="' . $args['form_id'] . '" action="' . site_url( 'wp-login.php', 'login' ) . '" method="post">
' . apply_filters( 'login_form_top', '' ) . '
<p class="login-form">
<label for="' . esc_attr( $args['id_username'] ) . '">' . esc_html( $args['label_username'] ) . '</label>' . wp_dropdown_users( array( 'echo' => 0, 'id' => $args['id_username'] ) ) . '<label for="' . esc_attr( $args['id_password'] ) . '">' . esc_html( $args['label_password'] ) . '</label>
<input type="password" name="pwd" id="' . esc_attr( $args['id_password'] ) . '" class="input" value="" size="10" tabindex="20" />

' . apply_filters( 'login_form_middle', '' ) . '

<input type="submit" name="wp-submit" id="' . esc_attr( $args['id_submit'] ) . '" class="button-primary" value="' . esc_attr( $args['label_log_in'] ) . '" tabindex="100" />
<input type="hidden" name="redirect_to" value="' . esc_attr( $args['redirect'] ) . '" />
</p>
' . apply_filters( 'login_form_bottom', '' ) . '
</form>';

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

I updated your code with the dropdown in place. Here you are building a string in PHP that contains HTML. So when you echo it out onto the page it processes the HTML. In PHP you use ‘.’ to concatenate strings (join them together) and strings are wrapped in apostrophes. This means, with a large string like the above it can get tricky as you have to effectively close off the string and attach the PHP then re-open the string and continue.

Hope that makes sense!

Thanks!

It works pretty good! Just need to fix one issue “ERROR: The username field is empty.”

That’s an oversight on my part sorry. The select field needs to be named “log” as per the default input field in the wp login form. Using wp_dropdown_users will, however, give an id as a value and not a name so a bit of customisation is required:

function my_login_form( $args = array() ) {
	$defaults = array(
		'echo'           => true,
		'redirect'       => site_url( $_SERVER['REQUEST_URI'] ), // Default redirect is back to the current page
		'form_id'        => 'loginform',
		'label_username' => __( 'Username' ),
		'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'       => false,
		'value_username' => '',
		'value_remember' => false, // Set this to true to default the "Remember me" checkbox to checked
	);
	$args     = wp_parse_args( $args, apply_filters( 'login_form_defaults', $defaults ) );
	$form = '<form name="' . $args['form_id'] . '" id="' . $args['form_id'] . '" action="' . site_url( 'wp-login.php', 'login' ) . '" method="post">
' . apply_filters( 'login_form_top', '' ) . '
<p class="login-form">
<label for="' . esc_attr( $args['id_username'] ) . '">' . esc_html( $args['label_username'] ) . '</label>' . my_dropdown_users() .
'<label for="' . esc_attr( $args['id_password'] ) . '">' . esc_html( $args['label_password'] ) . '</label>
<input type="password" name="pwd" id="' . esc_attr( $args['id_password'] ) . '" class="input" value="" size="10" tabindex="20" />

' . apply_filters( 'login_form_middle', '' ) . '

<input type="submit" name="wp-submit" id="' . esc_attr( $args['id_submit'] ) . '" class="button-primary" value="' . esc_attr( $args['label_log_in'] ) . '" tabindex="100" />
<input type="hidden" name="redirect_to" value="' . esc_attr( $args['redirect'] ) . '" />
</p>
' . apply_filters( 'login_form_bottom', '' ) . '
</form>';

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

function my_dropdown_users() {
	$users = get_users();
	$dropdown = '<select name="log" id="user_login">';
	foreach( $users as $user ) {
		$dropdown .= '<option value="' . $user->user_login . '">' . $user->user_login . '</option>';
	}
	$dropdown .= '</select>';
	return $dropdown;
}

my_login_form (array( 'redirect' => admin_url() ) );

Also, I have redirected to the admin as the normal login form would do. You may want to change this. I’d strongly recommend reading through and trying to understand the code if you are customising further ?? any questions feel free but there is A LOT of information on the codex for this type of stuff. Just got to find the right functions to use.

Kind regards

Works perfect! I owe You a beer! Thank You!
Now only proper CSS to make it all in one line and I get what I wanted ??

Glad I could help. I’d recommend you look at moving that code into an appropriate place (plugin or child theme) so that you don’t lose it when doing future updates!

Remember the codex will have most information you are after ??

Yeah, I made custom plugin with the code. Thanks again!

Hi,

I tried adding the code to my functions.php and I get the login dropdown appearing in my top nav bar.
How do I get it to replace the woocommerce login screen?