Custom login form to wordpress admin bar

1 Views

Is there a way to add custom login form to wordpress admin bar, the point is that i need it custom and customizable so i can style it my own way.

I know there is easy solution with which i can add default form to admin bar but i can’t customize it the way that i want to appear on admin bar.

Read More

But i don’t know the solution how can i add it custom way.

So far i can add form like this 

    $form = wp_login_form( array(
    'form_id' => 'adminloginform',
    'echo' => false,
    'label_username' => __(''),
    'value_remember' => true
) );

$wp_admin_bar->add_menu( array(
    'id'     => 'login',
    'title'  => $form,
) );

But from the codex http://codex.wordpress.org/Function_Reference/wp_login_form there is not all data that i want to customize, for example in password field i can’t remove label for password and insert Password text in text field. However i can do that for username field using 

'label_username' => __(''),
'value_username' => __('Username'),

This will make label disappear and show Username in username text field but there is not value change for password field. Maybe it’s because security reasons but this will save me some space that i need.

The current menu for login i use in separate drop down link and it looks like this 

    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><?php _e('Login', 'vt-translate');?> <span class="caret"></span></a>
<div class="dropdown-menu dropdown" style="padding:8px">
<form class="form-horizontal" action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<div class="control-group">
<input type="text" id="inputUname" name="log" placeholder="Username" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>">
</div>
<div class="control-group">
<input type="password" id="inputPassword" name="pwd" placeholder="Password">
</div>
<div class="control-group">
<label class="checkbox">
<input type="checkbox" name="rememberme" id="rememberme" checked="checked" value="forever" ><?php _e(' Remember me', 'vt-translate'); ?>
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
</label>
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword"><?php _e('Lost password?', 'vt-translate'); ?></a>
</div>
<button type="submit" class="btn btn-info" name="submit" value="Send"><?php _e('Login', 'vt-translate'); ?></button>
</form>
</div>

Some will recognize the code so yes the theme is based on bootstrap, and i tried to implement it in few various ways on to admin area but it just wont work. i tried to wrap the code, to use return function, to use echo function but none of the ways i tried won’t work.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. So at the end i found a solution, maybe it’s not the best but it’s working solution and here is the code i used to add new menu with login form to admin bar( or now called toolbar)

        $wp_admin_bar->add_node( array(
    'id' => 'loginform',
    'parent' => 'top-secondary',
    'title' => '<form action="' .wp_login_url(). '" method="post" class="form-inline" id="adminbar-loginform">
                <input type="text" id="inputUname" name="log" placeholder="Username" class="admin-input" />
                <input type="password" id="inputPassword" name="pwd" placeholder="Password" class="admin-input" />
                <label class="checkbox">
                <input type="checkbox" name="rememberme" id="rememberme" checked="checked" value="forever" class="admin-check" /> Remember me</label>
                <input type="hidden" name="redirect_to" value="' .$_SERVER['REQUEST_URI']. '" />
                <button type="submit" class="btn admin-button" name="submit" value="Send">Login</button>
            </form>'
    ) );