tutorial_preview

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: ,
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!

  2. 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

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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

  9. 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!

  10. 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!

  11. 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.

  12. 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+

  13. James
    James says:

    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

  14. Mkhululi
    Mkhululi says:

    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?

Trackbacks & Pingbacks

  1. [...] ???????? ??????. (Eng.) 62 ?????????? | ?????: ???? | ????: WordPress, ??????, ????? ????? [...]

  2. [...] is where the functionality kicks in. This code came from Kriesi’s post: “Admin login in your front page”. His code is basically a valid login form that can reside in any page of your WordPress site. An [...]

  3. [...] the same site I used the Admin Login on Your Front Page tutorial to add a login form to the main page of the blog. There are no registered users (except [...]

  4. [...] 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 http://www.kriesi.at/archives/admin-login-on-your-front-page [...]

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

  6. [...] 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 [...]

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

Comments are closed.