Everyone that runs a professional site on top of WordPress has one main problem.. How do you let your users login without exposing them to the WordPress Login page which.. face it.. looks kinda ugly and unprofessional.

Well there are ways to do this with plugins that will login your user from a sidebar widget and redirect them back to your home page.

You may also consider using a third party application that allows your users to login using their Twitter, Facebook or Open ID credentials so they can post comments..

However if you want some control over how your standard login is viewed you have the option of making a custom page template and using it to login your visitors.

Creating a Custom Login Page Template

First you need to know a little about using custom page templates in WordPress.

Basically what you are doing is similar to creating a home.php file to display your front page.  Once you have created the new theme file you will need to add a header comment that allows wordpress to identify it when you write a page then you will need to apply that template to the page you are editing.

You have the choice of creating a page that includes all, some or none of your wordpress sidebars, headers and other options. You can make it look completely different or just like any other page on your site.

This… meaning controlling all aspects of the page… is not a bad idea if you also want the login to popup in a smaller browser window then redirect the user back to the parent window… refreshing it to set the cookie that was created for login.

The important code to create the login form

[php]
<pre title=""><form name="loginform" id="loginform" action="<?php echo get_option(‘home’); ?>/wp-login.php" method="post">
<p>
<label>Username<br />
<input type="text" name="log" id="user_login" value="" size="20" tabindex="10" /></label>
</p>
<p>

<label>Password<br />
<input type="password" name="pwd" id="user_pass" value="" size="20" tabindex="20" /></label>
</p>
<p><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p>
<input type="submit" name="wp-submit" id="wp-submit" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="<?php echo get_option(‘home’); ?>/wp-admin/" />

<input type="hidden" name="testcookie" value="1" />
</p>
</form></pre>
[/php]

The code above should be placed in a theme template file named mylogin.php or similar name to state its use.

You can insert the code in place of your Loop that displays your posts..

Simply copy your index.php file from your theme directory and replace the code.

Setting The Template File as a Page Template

Next you need to be able to access this file when you write a page… not post .. in wordpress.

At the top of this file add the following PHP Comment.

[php]
<pre title=""><?php
/*
Template Name: My Login Page
*/
?></pre>
[/php]

Now you are ready to use this template.

Go to Add New Page in WordPress and write a new page with the name Login.

Under your publish button on the right sidebar you will be presented with the option of selecting a template for this page.

Select the My Login Page template and save the page.

Then navigate to the page you just created and inspect the form.

You will need to logout to test the form.

Modify the template to meet your needs.