Using jQuery to liven up your WordPress login

23 Apr, 2008 MarkB Admin,jQuery

Image by: maistora

When I’m coding a project for a client, I always try make using the site as easy as possible. Whether it be using custom fields to automate the use of images in a post, or coding wp-admin pages to make the writing of posts & pages easier for them to do. Less is more… So in applying this principle, I’m going to show a really quick method of simplifying the clients login process using a jQuery lightbox.

Here’s a demo of what we’re going to do.

Just in case you’ve been coding in a box for the last 10 years, jQuery is a great JS library that has a number of nifty usages. One of its popular plugins is the ‘thickbox‘ and its what we’re going to use now to create a simple means of logging in for you/your clients.

Prepare your site

In your header.php file you need to include 3 files: jquery.js, thickbox.js and thickbox.css. Then upload the included loading.gif animation to your images folder. The includes for these files would look like this:

<script type="text/javascript" src="<? bloginfo('template_directory'); ?>/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<? bloginfo('template_directory'); ?>/thickbox-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="<? bloginfo('template_directory'); ?>/thickbox.css" media="screen" />

NOTE: call the jquery file before the thickbox.js file.

Then open your thickbox.js file and edit the path to your theme’s images folder. It’ll look something like this:

var tb_pathToImage = "/wp-content/themes/yourtheme/images/loadingAnimation.gif";

Ok, now your site is thickbox’d. Nice.

Make it happen

Of the many usages of the thickbox, the one we’re going to use now is the thickbox for Inline Content. In essence, you’re going to have your login form somewhere on your page (preferably in an element that is included on every page on your site like your sidebar) but its going to be hidden by an inline CSS style:

<div id="form" style="display:none;">

Somewhere else on your page, you’re going to have a link (like in your topnav) that when clicked, will open that hidden div/form in the thickbox. This link will have, instead of a URL as its href target, some magic thickbox commands that will summon your hidden login form. The link would be as follows:

<a href= "#TB_inline?height=200&width=200&inlineId=form" title="Login to the WP Guru site">Login</a>

What’s happening here is that the link is calling an inline div that’ll be displayed in a thickbox with the sizes specified and you’re identifying the inline div ID that will be called. Note that class=”thickbox” is critical to the thickbox’s successful usage.

The login form

The actual login form can be simplified down to its core elements so that you have nice neat code made up of only what you need. You can of course tweak this to be just what YOU need. The actual login form is found around line 378 in the wp-login.php file (v2.5).

<div id="form" style="display:none;">
 <form name="loginform" id="loginform" action="http://wpguru.co.za/wp-login.php" method="post"><input type="hidden" name="phpMyAdmin" value="01d7dd3a1764f33b9145cd20ad99db24" />
 <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>
 <?php do_action('login_form'); ?>
 <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="<?php _e('Log In'); ?>" tabindex="100" />
 <input type="hidden" name="redirect_to" value="/" />
 <input type="hidden" name="testcookie" value="1" />
 </p>
 </form>
</div>

You can of course style up the div that contains your form with your site logo etc to make the whole login process seem even more bespoke.

TIP: You can set the overlay color of your jQuery thickbox (default set to 75% black) to match your site, in line #39 of your thickbox.css file.

Changing the WordPress admin logo
21 Apr, 2010 MarkB 7 Comments
Custom header images for WordPress Pages
18 Aug, 2008 MarkB 26 Comments

Share This Post!

80 Comments

Viv
May 2, 2008 • 6:57 pm

Hey, this is cool! I have done all these steps, though, and my thickbox is coming up just fine- but there is no login form in it. I’m a semi-new self-taught gal on this stuff and I’m not sure if there is something I have to do to the wp-login.php file in the main folder? It seems like that’s missing piece. (Sorry if this is a dumb question!)
Chris M
May 3, 2008 • 8:54 pm

Nifty little trick. I’ve actually done some similar things for clients before, but found myself going the full mile and totally customizing the entire dashboard just to keep the user away from the whole BANG WORDPRESS appearance.

I will give the jquery stuff a read – I’ve been coding since I was 7yrs old and now I think I might have been in the box, well at least according to you

Thanks for a interesting post,

iMod.co.za
MarkB
May 5, 2008 • 2:31 pm

Hi Viv! You need to duplicate the form FROM your wp-login.php page into your theme files and put it in the #DIV that you’re showing in your thickbox. So when the thickbox appears, it’ll display the login form.

IE, the last code snippet in this article, the login form, must be inside your hidden DIV that you show inside your thickbox…

There’s no need to touch your wp-login file

Let me know if you come right?
Deenworks
May 21, 2008 • 9:40 pm

Hey Marky,

Awesome.. luv it.. jquerys’ thick box is better scriptolicious etc.. much faster. Also another way is to use accordion.. ? (I can think of half a dozen ways to improve logins) But that for next time.

Marek | Deenworks.com
BeyondRandom
July 3, 2008 • 1:13 am

Awesome…you sir are a badass!! This what i was looking for all day! Thanks a million!
MarqueDigital
July 28, 2008 • 4:41 pm

Very nice!
dennis
February 27, 2009 • 10:59 am

Nice, only 1 thing, when i’m logged in i get a refresh to the homepage instead of the page i called the login function. Is there a way to work around this?
Andy
June 4, 2009 • 12:55 am

Does anyone know if I can do this with Shadowbox?

I have conflicts with other plugins and thickbox
Michel
July 20, 2009 • 12:09 pm

As far as I can tell, the Demo doesn’t work without JS, and that’s a serious issue. In case JS is disabled/unavailable, a simple html login form should open instead (AJAX best practices). Otherwise, you’re building something which won’t work in some cases…
blessing
July 23, 2009 • 9:25 pm

OMG!! I’d been looking for this all day! thank you!
Rolf
August 19, 2009 • 12:22 pm

Is there a way to have the login link change to logout once you have logged in ?
Rafael
August 31, 2009 • 4:02 am

Nice write up…usually I never reply to these thing but this time I will,Thanks for the great info.
SLOW HAND
September 21, 2009 • 7:57 am

Just make a plugin for noobs……. please
Roy37
October 23, 2009 • 12:04 am

Let me give you several examples: When you are sports fan you are united to that team. ,
Sarah Gooding
October 23, 2009 • 7:16 pm

Thanks for your tutorial!! I’ve linked to you over in my blog at WPMU.org: http://wpmu.org/7-ways-to-spice-up-your-wordpress-login/ Just thought you might want to know that you’ve been featured.
Bill Robbins
October 28, 2009 • 5:34 am

Thanks for making this. I took the principle and added it to Fancybox jquery since I was already using it.
Puneet
December 4, 2009 • 11:07 pm

I face one problem in following your example. I have placed the files on server, linked them into header. Instead of hard coding the wp-login.php file, I included the form code in the sidebar as invisible(with div id=”form”). But when I click my link placed on navigation bar, nothing seems to happen. Please help me out.
Thenewsoftheday
April 24, 2010 • 10:37 pm

Excellent your ability as a copywriter are remarkable
Валентич
July 21, 2010 • 4:40 pm

Рассылка на 4795 досок обьявлений а так же на 49000 закрытых форумов и о ваших сайтах и товарах сразу же узнают тысячи покупателей. Рассылка будет сделана в течении 30 минут после обращения. Предоставляем визуальнный отчет в режиме реального времени. Ценам за рассылку на доски всего 220 рублей. Наш тел. 89266853242 ICQ 568113539 rutop10@mail точка ru PS. Раскручиваем сайты,выводим в ТОР.
hoopethaphalf
July 21, 2010 • 5:55 pm

Разбросакм рекламу о вашем сайте на 3700 дооск обьявлений и сайты быстро после обращения.Стоимость всего 220 рублей и о вас узнают миллионы покупателей.Рредоставляем отчет.Наш тел. 89266853242 ICQ 568113539 rutop10@mail точка ru PS.Раскручиваем и выводим в ТОР сайты
Калентичево
July 22, 2010 • 1:02 am

Рассылка рекламы нк 4850 досок а так же на 49000 закрытых форумов и о ваших сайтах и товарах мгновенно узнают миллионы покупателей. Рассылка будет сделана в течении 15 минут после обращения. Предоставляем визуальный отчет в режиме раельного времени. Стоимость за рассылку на доски всего 240 рублей. Наш тел. 89266853242 ICQ 568113539 rutop10@mail точка ru PS. Раскручиваем сайты,выводим в ТОР.
Артемичева
July 22, 2010 • 1:05 pm

Рассылка рекламы на 4850 досок а так же на 43000 форумов и о ваших сайтах и товарах мгновенно узнают десятки тысяч покупателей. Рассылка будет сделана в течении 30 минут после обращения. Предостааляем визуальный отчет в режиме реального времени. Стоимость за рассылку на доски всего 210 рублей. Наш тел. 89266853242 ICQ 568113539 rutop10@mail точка ru PS. Раскручиваем сайты,выводим в ТОР.
Naretuti
July 22, 2010 • 3:11 pm

Рассылка оббьявлений на 5000 досок а так же на 44000 закрытых формуов и о ваших услугах сразу же узнают десятки тысяч покупателей. Рассылка будет сделана в течении 10 минут после обращения. Предоставляем визуальный отчет в режиме реального времени. Цена за рассылку на доски всего 250 рублей. Наш тел. 89266853242 ICQ 568113539 rutop10@mail точка ru PS. Раскручиваем сайты,выводим в ТОР.
Narеуetuti
July 22, 2010 • 5:15 pm

Рассылка рекламы на 485 досок а так же на 40000 закрытых форумов и о ваших пердложениях мгновенно узнают десятки тысяч покупателей. Рассылка будет сделана в течении 15 минут после обиащения. Предоставляем виуальный отчет в режиме реального времени. Стоимость за рассылку на доски всего 240 рублей. Наш тел. 89266853242 ICQ 568113539 rutop10@mail (точка) ru PS. Раскручиваем сайты,выводим в ТОР.
Daretivy
July 23, 2010 • 1:29 am

Рассылка обьявлений на 4800 досок обьявлений а так же на 47000 закрытых форумов и о ваших товарах мгновенно узнают десятки тысяч покупателей. Рассылка будет сделана в течении 25 минут после обращения. Предоставляем визуальный отчет в режиме реального времени. Цена за рассылку на доски всего 220 рублей. Наш тел. 89266853242 ICQ 568113539 rutop10@mail (точка) ru PS. Раскручиваем сайты,выводим в ТОР.
MaratBilalov
August 19, 2010 • 10:01 pm

[b]Здраствуйте!

Я являюсь представителем молодой, динамично развивающейся, соц. сети.
У нас есть деловое взаимовыгодное предложение к Вам. Пожалуйста, свяжитесь со мной любым, удобным для Вас способом:

ICQ 598502427
Skype: lan_stranger
bilalovm@gmail.com
C ув. Марат Билалов[/b]
linaly
August 20, 2010 • 10:23 am

it is true.
Tiffany
October 3, 2010 • 9:08 pm

I am wondering if you can take out login and make seesmic in there .. like http://www.deafvideo.tv .. click video comment in there and see how it appear on thickbox .. that one i want .. can you do that for me ?
EscayolistasValencia
January 15, 2011 • 2:08 am

interesting article, is the first entered in this site and will not be the last
Greetings
kievtestwthd
January 27, 2011 • 5:10 am

Всего самого наилучшего
http://www.my-trans.com/links.php?id=ufpk.kiev.ua
Attarmthemn
February 7, 2011 • 9:09 pm

Лучшие мастера столицы немедленно в течении 30 минут после звонка приедут и отремонтируют холодильники и морозильники любых марок.Выезд бесплатный.Цены на ремонт очень низкие.Наш сайт: http://www.gorodservis.ru Ремонт холодильников дизайном
Simon
February 28, 2011 • 6:28 pm

Thanks a bunch for this I was looking for something like this all day. The next thing I’m going to teach myself is as you said “coding wp-admin pages to make the writing of posts & pages easier for clients” I’ll see if I can find anything on this topic on your site! Cheers.
seoblogo
April 18, 2011 • 5:20 pm

Грамотный пост
Belkin Router
May 22, 2011 • 9:37 pm

What a nice post. I absolutely admire your Page about Stethoskop und Belkin Router! http://goe.bplaced.net/?path=guestbook Stethoskop und Belkin Router
best prohormones available
May 29, 2011 • 4:41 am

Neat blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog shine. Please let me know where you got your theme. With thanks
sabzinezhad
June 5, 2011 • 11:23 am

سلام
من متاسفانه انگليسيم خوب نيست
لطفاً اگر امكان دارد فايل jquery اين آموزش را براي من بفرستيد!
sabzinezhad@gmail.com
متشكرم
BymnhomyBum
June 23, 2011 • 4:38 pm

Хочется уточнить, а данный сайт ползуется спросом? Только зарегился, вот интересно. Спасибо!
TistInsindted
July 21, 2011 • 2:19 pm

Hallo everybody!
Club england london team wasp
Asylum night club jamaica
St james tennis club
Panelvan club

We will be glad to see you
Jhon
July 28, 2011 • 4:27 pm

What i do not realize is actually how you’re not really much more well-liked than you might be right now. You are so intelligent. You realize therefore considerably relating to this subject, made me personally consider it from a lot of varied angles. Its like women and men aren’t fascinated unless it’s one thing to do with Lady gaga! Your own stuffs nice. Always maintain it up!
Remon
August 4, 2011 • 6:16 am

Awesome information. Thanks! I’m also hoping to get a little assistance with changing the background of my in-line login form. I’ve been able to change the form background but not the entire content… help please.
ANAR373CT
August 27, 2011 • 7:18 am

very nice info friend…
Rey
October 26, 2011 • 10:38 pm

Hi everyone, I’m having some trouble with my log in form. The thickbox works fine the issues is the submit button, for some reason the button does not work. You can see what I’m talking about by clicking http://yellow6design.com/2fish/checkered/. Click Log in in the upper right corner.

Thanks in advance,
Rey