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> |
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 } ?> |
Download the sidebar.php file or page-login.php custom WordPress page template file which contains the login form.