Fearless Flyer Web Design » Login Form http://fearlessflyer.com Fearless flyer is a blog that focuses on the latest topics of web design. This includes Wordpress, SEO, Photoshop, jQuery, PHP and CSS. Fearless flyer is owned and operated by Michael Soriano, a seasoned web developer living in Southern California. Fri, 03 Feb 2012 17:11:14 +0000 en hourly 1 How to Create a Slick jQuery Login Form for WordPress http://fearlessflyer.com/2009/06/how-to-create-a-slick-jquery-login-form-for-wordpress/ http://fearlessflyer.com/2009/06/how-to-create-a-slick-jquery-login-form-for-wordpress/#comments Sat, 20 Jun 2009 01:57:53 +0000 michael soriano http://fearlessflyer.com/?p=624 Every WordPress site has its login form in its own page located at: yoursite/wp-admin. But what if you want this form to appear in a more convenient place such as your header template? This will add flexibility to your blog by making your admin pages more accessible. Furthermore, adding a little jQuery makes this form semi-visible by having a toggle switch.

The Images

I only used a couple of images for the form. First is the little tab that extends just right below the edge of our browser that when clicked, shows the entire form. Second is the actual login button. Note that you don’t have to create any images at all for this form – regular CSS styling would look fine. In my case – I used rounded edges for a more stylistic look; hence the need for images:

jquery login 1 How to Create a Slick jQuery Login Form for Wordpress

The Form

This 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 else condition is also included that shows additional options for when the user is logged in. I added a table (that’s correct, I used a TABLE! – so shoot me!) for the input fields and labels to behave and align accordingly. Of course – you can omit the table if you want to. I’ve also added several DIV elements so our form can be housed in a little box.

This part shows when the user isn’t logged in:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div id="quick-login">
<div id="login-form">
<?php if (!(current_user_can('level_0'))){ ?>
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<table>
<tr>
<td>
<label for="label">User</label>
</td>
<td>
<label for="label">Password</label>
<em class="forgot"><a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Forgot?</a></em></span></td>
<td>&amp;amp;amp;nbsp;</td>
</tr>
<tr>
<td>
<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" class="login-fields" />
</td>
<td>
<input type="password" name="pwd" id="pwd" size="20" class="login-fields"/>
</td>
<td>
<input type="submit" name="submit" value="" class="login-button" />
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
</td>
</tr>
</table>
</form>

This code shows when the user IS logged in. I’ve also included my own message for the logged in user. You should adjust this to accommodate your theme.

1
2
3
4
5
6
7
8
9
10

<?php } else { ?>
<div id="logged-in-box">
<p>You can now quickly edit your posts by clicking the <em>Edit This</em> &nbsp;buttons after each post</p>
<ul class="admin_box">
<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a></li> 
<li><a href="<?php echo wp_logout_url(urlencode($_SERVER['REQUEST_URI'])); ?>">logout</a></li>
</ul>
</div><!--logged-in-box--> 
<?php }?>
</div><!--login-form-->

The CSS

Now that we have all the elements in place, we can proceed with styling them. Note the color for the tab image is the background color for the entire DIV. Another important property is “display:none” – which hides the form by default. This is what jQuery will toggle to “display:block” when we’re done.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

a.menu_class {float:right; background:url(images/button-toggle3.png); width:184px; height:32px; text-indent:-9999px; outline-style: none;}
#login-form {float:right; padding:2px 10px 10px 10px ; display:none; background:#397846;}
#login-form label {color:#FFFFFF; text-transform:uppercase; font-size:11px; padding-left:5px; font-weight:bold; font-family:verdana; position:relative; top:5px; left:0;}
#login-form em a {color:#a1dbe6; text-decoration:none; font-size:10px; position:relative; top:5px; left:37px;}
#login-form em a:hover {color:#999999;}
input.login-fields {border:none; background:#444444; padding:7px 5px; margin:0 10px 0 2px; color:#FFFFFF;}
input.login-button {width:101px; height:36px; background:url(images/login-btn.png); border:none;}
#logged-in-box {width:456px;}
#logged-in-box p {float:right; width:238px; line-height:14px; font-size:10px; padding:5px 10px 0 0; color:#999999;}
#logged-in-box p em {font-style:normal; color:#a1dbe6;}
ul.admin_box {padding:10px 20px 20px 10px;}
ul.admin_box li{float:left; list-style:none; padding:0 10px 10px 10px; text-align:center; }
ul.admin_box li a{text-decoration:none; color:#FFFFFF; text-transform:uppercase; font-size:11px; font-weight:bold; font-family:verdana;}
ul.admin_box li a:hover {color:#ccc;}

The jQuery

Our form is complete, styles and all. The last thing we need is the action. We accomplish this by adding jQuery. First of, don’t forget to reference the library and your custom script in your head section:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/js/slider.js"></script>

Then the following few lines of code is what we include in our custom script (“slider.js”).

1
2
3
4
5

$(document).ready(function () {
$('a.menu_class').click(function () {
$('div#login-form').slideToggle('medium');
});
});

And that’s it! You have created a slick jQuery powered login form for your WordPress site. This particular form is designed to be placed in your header file. Note that the form will work from any template in your theme. Give the demo a try – I’ve designated a test user account so you can see how the form looks when logged in.

]]> http://fearlessflyer.com/2009/06/how-to-create-a-slick-jquery-login-form-for-wordpress/feed/ 8