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:

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:

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.

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.

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:

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

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. Leave your comments below.