Custom login form to wordpress admin bar? (3 posts)

  1. Aleksandar
    Posted 2 years ago #

    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.

    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

    <?php _e('Login', 'vt-translate');?> <span class="caret"></span>
    <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 class="control-group">
    <input type="password" id="inputPassword" name="pwd" placeholder="Password">
    <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']; ?>" />
    /wp-login.php?action=lostpassword"><?php _e('Lost password?', 'vt-translate'); ?>
    <button type="submit" class="btn btn-info" name="submit" value="Send"><?php _e('Login', 'vt-translate'); ?></button>

    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.

  2. bcworkz
    Posted 2 years ago #

    So you want the actual login fields to appear in a drop down from the admin bar? I'm confused. The admin bar only displays after one is logged in, so what is the point of offering login fields?

  3. Aleksandar
    Posted 2 years ago #

    Nope, the admin bar can be set to be visible always even when no one is logged in to website, so my point is to gather all data, links, profile info, to one place on network of websites, and this is the login bar, so when you are not loged in to show you the login form.

    I btw found the solution but it's still not the best one, maybe a few more tweaks but it works.

    To always show login bar it's simple code like this

    add_filter( 'show_admin_bar', '__return_true' );

    And login form that i have working on website now is this.

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

    It's still in the work though.

Topic Closed

This topic has been closed to new replies.

About this Topic