How to Adding a login box to your site

If you’re running a multi-author site, or perhaps you allow people to register on your site, then adding the login box into your site would be a nice addition rather than just redirecting people to the standard login page.

You could just copy the form off the wp-login.php page, however it’s not very well marked up, plus you will probably want to fit it into a smaller area on the front end of your site, maybe in your sidebar or at the top right of your web site.

The Login Form

The first job is to put the login form where you want it to go. The code for this is below:

view plaincopy to clipboardprint?

1. <form id="loginform" action="< ?php echo get_option('home'); ?>/wp-login.php" method="post">  
2.    <fieldset><legend>Login</legend>  
3.     <div>  
4.         <label for="log">Username  
5.         <input type="text" name="log" id="log" size="20" /></label>  
6.     </div>  
7.     <div>  
8.         <label for="pwd">Password  
9.         <input type="password" name="pwd" id="pwd" size="20" /></label>  
10.     </div>  
11.     <div>  
12.         <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>  
13.     </div>  
14.     <div>  
15.         <input type="submit" name="wp-submit" id="wp-submit" value="Log In" />  
16.         <input type="hidden" name="redirect_to" value="< ?php echo get_option('home'); ?/>/wp-admin/" />  
17.     </div>  
18.     </fieldset>  
19. </form>  

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

   <fieldset><legend>Login</legend>
 <div>
  <label for="log">Username
  <input type="text" name="log" id="log" size="20" /></label>
 </div>

 <div>
  <label for="pwd">Password
  <input type="password" name="pwd" id="pwd" size="20" /></label>
 </div>
 <div>
  <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>

 </div>
 <div>
  <input type="submit" name="wp-submit" id="wp-submit" value="Log In" />
  <input type="hidden" name="redirect_to" value="< ?php echo get_option('home'); ?/>/wp-admin/" />
 </div>

    </fieldset>
</form>

The above code will allow you to log into your admin area from anywhere on the site.

If you want to allow people to log in but return to the page they logged in from, then you’ll need to change the redirect value on line 16 to be

<input type="hidden" name="redirect_to" value="<?php echo urlencode(get_permalink()); ?>" />

Logged In Users

Of course we don’t need the form displaying if the person is logged in, so we need to add a bit of additional PHP to check if the user is logged in. If they aren’t then we display the form, if they are then we can either display nothing, or display a link to the admin and perhaps a logout link.

To check if the user is logged in we use the is_user_logged_in() conditional, eg.

view plaincopy to clipboardprint?

1. < ?php if (!is_user_logged_in()) : ?>  
2.   
3. <form id="loginform" action="< ?php echo get_option('home'); ?>/wp-login.php" method="post">  
4.     <fieldset><legend>Login</legend>  
5.     <div>  
6.         <label for="log">Username  
7.         <input type="text" name="log" id="log" size="20" /></label>  
8.     </div>  
9.     <div>  
10.         <label for="pwd">Password  
11.         <input type="password" name="pwd" id="pwd" size="20" /></label>  
12.     </div>  
13.     <div>  
14.         <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>  
15.     </div>  
16.     <div>  
17.         <input type="submit" name="wp-submit" id="wp-submit" value="Log In" />  
18.         <input type="hidden" name="redirect_to" value="< ?php echo urlencode(get_permalink()); ?/>" />  
19.     </div>  
20.     </fieldset>  
21. </form>  
22.   
23. < ?php else : ?>  
24.   
25. <ul>  
26.     <li><a href="< ?php echo get_option('home'); ?>/wp-admin/">WP Admin</a></li>  
27.     <li><a href="< ?php echo wp_logout_url(get_permalink()); ?>">Logout</a></li>  
28. </ul>  
29.   
30. < ?php endif; ?>  

< ?php if (!is_user_logged_in()) : ?>

<form id="loginform" action="< ?php echo get_option('home'); ?>/wp-login.php" method="post">
    <fieldset><legend>Login</legend>
 <div>
  <label for="log">Username
  <input type="text" name="log" id="log" size="20" /></label>

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

  <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>
 </div>
 <div>
  <input type="submit" name="wp-submit" id="wp-submit" value="Log In" />
  <input type="hidden" name="redirect_to" value="< ?php echo urlencode(get_permalink()); ?/>" />

 </div>
    </fieldset>
</form>

< ?php else : ?>

<ul>
    <li><a href="< ?php echo get_option('home'); ?>/wp-admin/">WP Admin</a></li>

    <li><a href="< ?php echo wp_logout_url(get_permalink()); ?>">Logout</a></li>
</ul>

< ?php endif; ?>

This is quite a simple addition but a very useful one for any site that has more than just the admin logging in.

Enter your email address:

Delivered by FeedBurner