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
« Older Comments
  1. jarome says:

    thnx buddy, was struggling to get this working on other templates other then the home page until i came here!

    Cheers!

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.