Admin login on your front page

Last week I showed you how to create a menu which reveals itself only to logged in users, utilizing the WordPress function current_user_can(). Today we will take this one step further and create a Login form for your users, which can be placed in your sidebar, footer or anywhere else on your page.

The final result would look something like this on a WordPress default installation:

So what we want to display is:

An input field for user name
An input field for password
A checkbox for remembering the user
A hidden field which tells WordPress where to redirect the User after login took place
A Submit Button
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>
&s
<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. (in case you dont understand what that means check my last tutorial about current_user_can)

<?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 I 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 }?>

Voila, your front page login is ready to use ;)

Update for wordpess 2.7

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>

Gamer Albularyo says:

March 1, 2009 at 5:09 am

Err.. it seems alot have noticed. You should changed the sequence of the comments. lol,

just an opinion.

I will visit here frequently.

James says:

May 20, 2009 at 2:56 pm

Hi Kreisi,

Thanks for this very useful information. I have it all in place and it is working fine.

One question though.

Could you tell me how to go about adding ‘username’ and ‘password’ so that it sits in the textboxes and then disappears when the user types them in?

Thanks very much if you can help.

James

Mkhululi says:

August 7, 2009 at 1:55 pm

I tried the solution on a website I am working on. Here is a scenario :

– I put all the code inside my header file and inside the IF condition I have put the form just like in your demo. All users must be logged on to see the site.
-My ELSE part will be my entire page. The contents of the header file, everything inside the wrapper and the footer. I close the ELSE brace at the end of the footer.

Problem: I am getting an error when I close the brace for the ELSE part of the IF statement.

Here is a small snippet:
if (condition){ ///form goes here }else { //rest of the header file //wrapper opens here and closes at the end of the index file } // this is done at the end of the footer. But tells me there is an error

What am I missing?