Add WordPress Login Form On Sidebar Or Custom Page
Posted by in PHP May 29, 2011 7 Comments

By default, you only can login to your Dashboard by clicking on Login link in Meta panel or go direct to login link such as: http://4rapiddev.com/wp-login.php. This tutorial will show you how to create and add the login form everywhere you want. For example, it could be on your homepage, sidebar or even on a custom page.

Simply copy & paste the following code below to display your login form. It will create a login form which includes Username & Password text box, Remember me check box, Login button and Forgot password link.

1. Add the login form on Sidebar

Open your sidebar.php file located in your theme directory and add code below:

<li>
<?php 
	if(!is_user_logged_in())
	{
?>        
<form name="login" method="post" action="<?php echo get_option('home'); ?>/wp-login.php">
	<input type="hidden" name="action" value="login" />
	<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
	<table width="50%" border="0" cellpadding="0" cellspacing="0">
	  <tr>
		<td style="padding-bottom: 8px;"><strong>MEMBER LOGIN</strong></td>
	  </tr>
	  <tr>
		<td><strong>Username: </strong><br /><input type="text" name="log" id="log" value="" class="text" /></td>
	  </tr>
	  <tr>
		<td><strong>Password:</strong><br /><input type="password" name="pwd" id="pwd" class="text" style="width: 150px;" /></td>
	  </tr>
	  <tr>
		<td><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</td>
	  </tr>
	  <tr>
		<td align="left" valign="top"><input type="submit" value="Login"/></td>
	  </tr>
	  <tr>
		<td align="left" valign="top"><a href="<?php echo get_option('home'); ?>/forgot-password/">[Forgot password?]</a> </td>
	  </tr>
 
	</table>
</form>
<?php 
	}
	else
	{
		global $current_user;
		get_currentuserinfo();
		if($current_user->user_firstname != '' && $current_user->user_lastname)
			echo "Welcome " . $current_user->user_firstname . "," . $current_user->user_lastname . "!";
		else
			echo "Welcome " . $current_user->user_login . "!";
 
		echo " | <a title='Logout' href='" . wp_logout_url('index.php') . "'>Logout</a><br><br>"; 
?>
          You are currently logged in!
<?php 
	}
?>			
			</li>
WordPress Login Form on Sidebar

WordPress Login Form on Sidebar

2. Add login form on a Custom template page

As I mentioned above, you even can put the login form on a custom page. To do that, open your page.php file in your Theme directory or create a new page based on a new custom WordPress template page then add the code below:

<?php 
	if(!is_user_logged_in())
	{
?>        
<form name="login" method="post" action="<?php echo get_option('home'); ?>/wp-login.php">
	<input type="hidden" name="action" value="login" />
	<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
	<table width="450px" border="0" cellpadding="0" cellspacing="0">
	  <tr>
		<td colspan="2" style="padding-bottom: 8px;"><strong>MEMBER LOGIN</strong></td>
	  </tr>
	  <tr>
		<td><strong>Username:</strong></td>
		<td align="right"><input type="text" name="log" id="log" value="" class="text" /></td>
	  </tr>
	  <tr>
		<td><strong>Password:</strong></td>
		<td align="right"><input type="password" name="pwd" id="pwd" class="text" /></td>
	  </tr>
	  <tr>
		<td align="left" colspan="2"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</td>
	  </tr>
	  <tr>
		<td align="left" colspan="2"><input type="submit" value="Login"/></td>
	  </tr>
	  <tr>
		<td align="left" colspan="2"><a href="<?php echo get_option('home'); ?>/forgot-password/">[Forgot password?]</a> </td>
	  </tr>
 
	</table>
</form>
<?php 
	}
	else
	{
		global $current_user;
		get_currentuserinfo();
		if($current_user->user_firstname != '' && $current_user->user_lastname)
			echo "Welcome " . $current_user->user_firstname . "," . $current_user->user_lastname . "!";
		else
			echo "Welcome " . $current_user->user_login . "!";
 
		echo " | <a title='Logout' href='" . wp_logout_url('index.php') . "'>Logout</a><br><br>"; 
?>
          You are currently logged in!
<?php 
	}
?>
WordPress Login Form On Custom Page

WordPress Login Form On Custom Page

Download the sidebar.php file or page-login.php custom WordPress page template file which contains the login form.

Tagged:

You should know:
Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at hoan@4rapiddev.com
  • http://www.andkon247.com/ Andkon

    Thank you for sharing your idea, I really do appreciate it! But I am looking for code that you can put on the TEXT option on the widget that shows the LOGIN, REGISTER, Lost PASSWORD?! Hope you can help me find one or you can produce one! Lots of thanks!

    • hoanhuynh

      Hi Andkon,

      I already posted the sidebar.php code on the section 1 of the tutorial.

      Hope that is your need.

  • weridrubikscube

    exactly what I was looking for !

    though I have a question, how can I prevent the page to be redirected to /wp-login.php if a wrong password is entered ? (I’d rather prefer to have an error message appear in the form itself)

    thanks for your help !! :)

  • Pingback: Show Error Message On WordPress Custom Login Template Page | 4 Rapid Development

  • http://www.akizio.com/ ake

    You code is work! and vey useful for me.
    Thanks a lot!

  • Ndei

    WORK GREAT!