May 23, 2008/44 Comments/in , /by Kriesi

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:

  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>
&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>
Tags: ,
You might also like
How Much Should a WordPress Website Really Cost to Make?
How to Make Small Business Brochure Sites Sizzle With Enfold
Frontend Admin Menu in WordPress
7 WordPress Podcasts That Demand To Be Heard
WordPress Tutorial: Simple Breadcrumb Navigation
Create simple tooltips with CSS and jQuery – Part 2
44 replies
Newer Comments »
  1. Prof Kienstra
    Prof Kienstra says:

    Thanks a lot for this.. i had been trying to get this done, but my knowledge of php really hit the maximum.. and i couldn’t get it done. Thanks!

  3. Edward Mills
    Edward Mills says:

    Hi Kriesi

    Thanks for this tutorial. I’ve been trying to implement this on a new blog and have been stumped. Your solution is the closest so far, but it’s breaking the page and not letting me login.

    You can see it here:

    http://awakeningtogreatness.com/members/signup/

    I’m probably doing something obvious (to you). If you have a chance to take a look, I’d most definitely appreciate it.

    Thanks

  4. Kriesi
    Kriesi says:

    Hi Edward,
    Seems some quotation marks got messed up during the copy/paste process.
    Your page breaks at the hidden input field which defines the redirect. The second quotation mark of the value attribute doesn’t close the attribute.

    Should work if you retype it by hand.

  5. Edward Mills
    Edward Mills says:

    Awesome. That was the problem. In fact, I had to go in and change about half of the quotes and apostrophes. Not sure why some of them pasted correctly and others pasted as fancy characters. But anyway, it works now.

    Great tip. I’ve stumbled this post.

    Thanks.

  6. Noura Yehia
    Noura Yehia says:

    Hi Kriesi,

    Thanks for this great tutorial.
    I wonder if you have a solution for adding an “Add to Favorite” link to every post, where registered users are allowed to add their favorite posts to their profile or something.
    If you know a plug-in doing that let me know.
    Thanks a lot, your feedback is appreciated.

  7. Thomas
    Thomas says:

    Thanks for this coding. Worked for what I needed to do. Tweaked it so that I have different menus than regular users. Thanks for this took me hours to find.

  9. BeyazTavsan
    BeyazTavsan says:

    Hi,

    That’s one great tutorial. Thanx.

    Btw. I think you could make it better by putting everything in one file for download. It’s a bit confusing to copy-paste the code at the moment. Especially for people with limited knowledge like me.

  11. dev
    dev says:

    hi
    i need help. i have a site which has a user login. i want to link that with my word press login ie have common login. plz help
    thanx in advance
    vasu

  12. lex luthor
    lex luthor says:

    Thanks for this, will try it out. This is the most comprehensive tutorial I’ve found on this so far. You’re a rock star!

  20. scotjam
    scotjam says:

    I like it! But how best to include this into a design? Should I create a widget from it? Or should the code go straight into the template files? I’m just thinking about an easy way to maintain this on the long term. cheers!

  23. Gayan
    Gayan says:

    Hi,

    err.. i might sound stupid asking this question, actually where shoud i implement this? on every template i use or as a widget or something similar. I’m using pluggin that would execute php so i could use this as widget i guess.
    I’m not much familiar with WP templates so i’m not sure where to put the code, that’s the reason i’m asking this.

    Thanks. and love your stuff. nice site.

  24. Gayan
    Gayan says:

    BTW i just found a glitch in your “log Out” link. this is since word press 2.7, they use a few addition chars to log out a person. may be make sure of security and make sure its the same person they’re loggin out. here’s the modified version of the log out link.

    FIND:
    <a href=”/wp-login.php?action=logout&redirect_to=”>Log out

    REPLACE WITH:
    <a href=””>Log out

    This method is for WP 2.7+

Trackbacks & Pingbacks

  1. » User Log-in Ofnature.org Backend Updates says:
    September 16, 2008 at 3:18 am

    […] Users can now log in on the front page of the website.  All thanks to a script from kriesi.at. The script I used can be found directly at https://kriesi.at/archives/admin-login-on-your-front-page […]

  2. The Geek Life » Blog Archive » Another Half of Me says:
    June 4, 2008 at 5:34 am

    […] here for the blog where I got the coding for the side bar login.  I tweaked this original code a bit to […]

  3. diarioTHC | Panel de identificación en portada de wordpress says:
    May 26, 2008 at 3:06 pm

    […] de facilitarles la vida con un formulario más accesible. Conseguirlo es bastante fácil, en kriesi.at publican un pequeño tutorial con los pasos para hacerlo, nutriéndose de la función current_user_can() que incorpora el […]

  4. Skylog » Blog Archive » links for 2008-05-24 says:
    May 24, 2008 at 7:30 am

    […] Admin login on your front page (tags: wordpress) […]

Newer Comments »

Comments are closed.