Useful Resources for Web Designers and Developers

Advertise

here through BuySellAds

How to Create a Slick jQuery Login Form for WordPress

June 19, 2009 on General, Tutorials

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://amazooo.com V.C

    Very useful for me.
    I like your blog design as well as this tip.
    I also like your Blue Rooster theme.
    It’s amazing.
    Keep your work up.

  • http://mrcosmos.com bob

    Thanks for the information,it will come in quite handy for my site. Keep the info hot this helps people with business websites.

  • http://www.e-teamclub.com Home Based MLM

    Looks great! I tried it a couple of times but it’s giving me an incorrect username/password error so I can’t see how it looks like when logged in.

  • http://www.cyberangel.it CyberAngel

    It’s a very interesting script but don’t work with my WP 3.0.1.
    How could I do?

  • http://www.drawaweb.com ali

    tanx
    but if fill box with wrong password or username What does

  • http://www.hiccupsolutions.com saurabh

    Thanks..!! Nice collection..

  • sonam

    does your login form work on wordpress 3.0? i tried your login form but didn’t display anything.

  • jc

    where is that slider.js? i can’t find that on the demo page also

  • Pingback: [링크:영어]웹디자인, 궁극의 자바스크립트 가이드()

  • http://www.devispanneauxphotovoltaiques.net devis panneaux photovoltaiques

    Thank you very much for that article !

  • Pingback: 40 Best Free jQuery Login Registration and Contact Forms()

  • Pingback: 30 Best Free jQuery Login Registration and Contact Forms()

  • Pingback: 30 Best Free jQuery Login Registration and Contact Forms - Neweb()