WordPress Theme: Log In On The Front Page
Monday, November 5th, 2007 1:20 pm by
davidcubed 
Print this page 
Comment 
Share This
While there have been many people customizing the login page of WordPress, and others trying to put it in a page, I haven't seen too many blogs that allow you to log in to WordPress via the blog's front page. The log in form on wp-login.php is a simple form that you can pull from the page, and put just about anywhere.
Recently, for a client, I had to put that form on their WordPress theme, so they could bypass the wp-login.php page, and go right from the blog to the administration panel, and it is easier than you might think.
*Note: Doing this can cause issues later on as WordPress is a constantly evolving piece of software. This may not work on future versions.
Getting the Code
The first thing we need to do is to get the form's code from wp-login.php. In the folder you installed WordPress in, you will see the file named wp-login.php in the root folder. Download the file, and open it up in your text editor of choice. I am using Mac OS X, and Smultron.
Around line 347 you will find the log in form we will need.
-
<form name="loginform" id="loginform" action="wp-login.php" method="post">
-
<p>
-
<label><?php _e('Username:') ?><br />
-
<input type="text" name="log" id="user_login" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" /></label>
-
</p>
-
<p>
-
<label><?php _e('Password:') ?><br />
-
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
-
</p>
-
<?php do_action('login_form'); ?>
-
<p><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> <?php _e('Remember me'); ?></label></p>
-
<p class="submit">
-
<input type="submit" name="wp-submit" id="wp-submit" value="<?php _e('Login'); ?> »" tabindex="100" />
-
<input type="hidden" name="redirect_to" value="<?php echo attribute_escape($redirect_to); ?>" />
-
</p>
-
</form>
Depending on how you want to style the form, you might want to add or remove some of the code around the items like the paragraph tags.
There are two lines that have to be changed. The first is the redirect_to line, which I just removed. This shouldn't really have any adverse effects because it was just used to decide if a particular user should go to their profile page, or the dashboard.
The second change I made was to make the rememberme checkbox into a hidden field. I couldn't think of any reason why you wouldn't want your users to be remembered. You can change this if you like, but here is what I changed mine to:
-
<input name="rememberme" type="hidden" id="rememberme" value="forever" />
If you don't want your visitors to be remembered, you can remove this line and again, it shouldn't cause any adverse effects.
Implementing It
This leaves you with a basic form, which we can then insert into any area of our WordPress theme. The sidebar or header being the two places that make the most sense. In the client work I did, we put it in their header, right next to the navigation for their blog.
Open your theme folder, you can find it under wp-content/themes and then download the place where you plan on putting your login form, either sidebar.php or header.php.
Copy and paste your edited form to where you want it go be.
My form code is as follows:
-
<form name="loginform" id="loginform" action="wp-login.php" method="post">
-
<input type="text" name="log" id="user_login" class="text input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" />
-
<input type="password" name="pwd" id="user_pass" class="text input" value="" size="20" tabindex="20" /><?php do_action('login_form'); ?>
-
<input name="rememberme" type="hidden" id="rememberme" value="forever" tabindex="90" />
-
<input type="submit" name="wp-submit" id="wp-submit" class="submit" value="<?php _e('Login'); ?> »" tabindex="100" />
-
</form>
You will noticed I added some extra classes to mine so that I could use CSS to style it to fit the design. I highly suggest doing the same. Look at the CSS code for your comments form if you need inspiration.
The next thing we will want to do is put in a test to see if a user is already logged in. This is to place a logout button, as well as to have a visual cue that the login is working properly, though if it brings you to the WordPress administration panel after you put your username and password in, it is probably working just fine.
Above your form place the following code:
-
<?php
-
get_currentuserinfo() ;
-
global $user_level;
-
if ($user_level> 0) { wp_loginout(); } else { ?>
And then after place this:
-
<?php } ?>
This basically says that if a user is logged in, then show the logout link, otherwise show our login form.
Then once you upload the new sidebar or header, refresh your blog, and test it out. You should see a username and password field when logged out, and a logout link when you are logged in.
If you have any changes, questions or ideas for this article, please let me know in the comments below. I always enjoy finding new information on how to do things easier, and better with WordPress and PHP.
Coded End Result
-
<?php
-
get_currentuserinfo() ;
-
global $user_level;
-
if ($user_level> 0) { wp_loginout(); } else { ?>
-
-
<form name="loginform" id="loginform" action="wp-login.php" method="post">
-
<input type="text" name="log" id="user_login" class="text input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" />
-
<input type="password" name="pwd" id="user_pass" class="text input" value="" size="20" tabindex="20" /><?php do_action('login_form'); ?>
-
<input name="rememberme" type="hidden" id="rememberme" value="forever" tabindex="90" />
-
<input type="submit" name="wp-submit" id="wp-submit" class="submit" value="<?php _e('Login'); ?> »" tabindex="100" />
-
</form>
-
<?php } ?>
A technology geek at heart, David has been blogging as a full time job for the last two years. He is a swiss army knife when it comes to doing things online, and while not an expert at coding or design, his views on each are unique. See more posts by 
First time here, or frequent flyer. Whatever the case may be, we highly recommend 
Good stuff David, good stuff.
You don’t even need to put it on the front page, it could also go on an internal page like /authors/ - so that if you have a blog with lots of contributors it’s easier for them to log in (presumably the ‘authors’ page would have other tools and resources as well.
I’m doing this for my next redesign. Thanks for the idea.
Great post!
On another note, I’ve been really damn lazy in emailed TDH back, but it appears everyone here is easily picking up on how things work (putting code in the posts, profile pics in the sidebar, etc). Sorry for my laziness (Thord if you are reading this I promise I’ll email you tomorrow!) but I’m glad everyone has figured everything out!
I found the form pretty easy to do. It’s on the front page of http://www.cbhslatinclub.org, my Latin Club’s website. As long as you keep the action, the input names, and the hidden elements, everything works ^_^
But good write-up nonetheless!
I have myself stylised the login pages before but adding it to a certain page is a good idea which could be very helpful as it will save an extra click.
Thanks
No worries, AJ.
Hello, How can I use email Id instead of username to authenicate in wordpress? Can you please help me in this issue?