Creat Login form for wordpress front page

May 23, 2010 · Print This Article

How to create a Login form for your wordpress users, which can be placed in your sidebar, footer or anywhere else on your page?

What we want to display is:

  1. An input field for user name
  2. An input field for password
  3. A checkbox for remembering the user
  4. A hidden field which tells WordPress where to redirect the User after login took place
  5. A Submit Button
  6. 2 Links: One for password recovery, one for new registration

Since we want to make the form work in every template we will make use of the function¬†get_option(‘home’) which gets the the full path to your WordPress installation.

<h3>Login</h3>
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">

    <p><label for="log">User</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" /> </p>

    <p><label for="pwd">Password</label><input type="password" name="pwd" id="pwd" size="20" /></p>

    <p><input type="submit" name="submit" value="Send" class="button" /></p>

    <p>
       <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
       <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
    </p>
</form>

<a href="<?php echo get_option('home'); ?>/wp-register.php">Register</a>
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>

Into the hidden field, we put the URL of the page the user used to log in, so he is redirected to this page again after authentication.

Since we only want to show this code if the user is not already logged in, we use the function current_user_can() , with a parameter of level_0.

<?php if (!(current_user_can('level_0'))){ ?>
    <h3>Login</h3>
    <form code from above etc>
<?php } else { /*next to come*/}?>

The next thing to do is writing the code for logged in users. For this purpose we just take a slightly modified version of last weeks tutorial (mentioned above) and put it in the else condition. Here is how the whole thing looks like, just in case you only want to copy/paste it.

<?php if (!(current_user_can('level_0'))){ ?>
<h3>Login</h3>
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">

    <p><label for="log">User</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" /> </p>

    <p><label for="pwd">Password</label><input type="password" name="pwd" id="pwd" size="20" /></p>

    <p><input type="submit" name="submit" value="Send" class="button" /></p>

    <p>
       <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
       <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
    </p>
</form>

<a href="<?php echo get_option('home'); ?>/wp-register.php">Register</a>
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>
<?php } else { ?>
        <ul class="admin_box">
            <li><a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a></li>
            <li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Write new Post</a></li>
            <li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Write new Page</a></li>
            <li><a href="<?php echo get_option('home'); ?>/wp-login.php?action=logout&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log out</a></li>
        </ul>

<?php }?>

If your are using wordpress 2.7 you have to exchange the old logout link with the new version:

<a href="<?php echo wp_logout_url(urlencode($_SERVER['REQUEST_URI'])); ?>logout</a>

Your choice for site templates and wordpress themes

Comments

Got something to say?

You must be logged in to post a comment.