rss

Using jQuery to liven up your WordPress login

23 Apr, 2008 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.

251 Comments

  1. Howdy I am so glad I found your blog page, I really found you by mistake, while I was browsing on Yahoo for something else,
    Nonetheless I am here now and would just like to say kudos for a remarkable post and
    a all round entertaining blog (I also love the theme/design), I don’t have time to
    read through it all at the moment but I have bookmarked it
    and also included your RSS feeds, so when I have
    time I will be back to read a lot more, Please do keep up the excellent jo.

  2. Great article,
    Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple tweaks would really
    make my blog look more pro. Please let me know!

    Thanks

  3. Thanks in support of sharing such a good opinion, post is
    pleasant, thats why i have read it entirely

  4. Most manufacturers add up an insulator or a plastic layer in order to minimize heat and scalding.
    Fairly considerably just about every individual loves a hot, steaming
    bowl of hearty vegetable beef soup , particularly inside the Winter time.

    To start the process, the first thing to do is to take off all the fats of the beef.

Trackbacks

  1. Today In WordPress :: WordPress Upgrades
  2. 26 Nisan web’den seçme haberler » Tekil Yazı » Fatih Hayrioğlu'nun not defteri
  3. Güzel bir Wordpress giriş paneli » Bilgisayar Hocası
  4. [ fatih hayrioğlu ]26 Nisan Seçmeler « CSS Arşiv
  5. Local company spams top SA bloggers! | iMod
  6. Free WordPress and jQuery: 25+ Useful Plugins & Tutorials | designersmantra.com
  7. All my bookmarks ever | Daniel John Gayle
  8. The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials | Quest For News, A TUTORIAL Base
  9. 15 Plugins to Unleash the Invincible Power of jQuery and Wordpress
  10. Today in WordPress world - 20/07 | Links | WereWP
  11. 30 Tutorials Combining Both Wordpress and jQuery : Speckyboy Design Magazine
  12. 30 Tutorials Combining Both Wordpress and jQuery | huibit05.com
  13. 13 Plugins para soltar o poder do jQuery no Wordpress « Xigli
  14. 30 Tutorials Combining Both Wordpress and jQuery | .::tek3D Weblog::.
  15. 35 Stylish And Modern Wordpress Plugins Using jQuery UI | Graphic and Web Design Blog - Inspiration, Resources and Tools
  16. 35 elegantes y modernos Plugins para Wordpress usando jQuery UI | Don Pipa.com, web oficial
  17. 35 Stylish And Modern Wordpress Plugins Using jQuery UI | pc-aras
  18. 30 Tutorials for Using JQuery in Wordpress | oOrch Blog
  19. 35 Stylish And Modern Wordpress Plugins Using jQuery UI - Programming Blog
  20. 40+ Quite Useful Wordpress Plugins using jQuery | tripwire magazine
  21. Fesches Ajax Login Formular | Medienbeckerei Blog
  22. Lorelei Web Design » 75 Best Wordpress Plugins That Make Bloggers Lives Easier
  23. 35 Stylish and Modern Wordpress Plugins using jQuery UI | AlexVerse
  24. The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials | HOSTERWARE UK. Tel 02081337636
  25. Представляю Вашему вниманию - jquery плагины для wordpress | Okinak
  26. 30 tutorial para utilizar jQuery en nuestro Wordpress | code
  27. 35 Stylish And Modern Wordpress Plugins Using jQuery UI » The Nowhere News
  28. 31 Great Wordpress jQuery Resources | Pingable :: Everything Wordpress
  29. 31 Great WordPress jQuery Resources | The Designer's Pod
  30. 35 Stylish And Modern WordPress Plugins Using jQuery UI « DownGraf – Your Graphic World
  31. 20+ jQuery and Wordpress Tutorials – A Match Made in Heaven
  32. WordPress and Jquery Plugins | www.eqloud.com
  33. 20 Stylish WordPress Plugins Using jQuery UI
  34. 35 Stylish And Modern WordPress Plugins Using jQuery UI « Downgraf – Design weblog for designers
  35. Top jQuery WordPress Tutorials and Plugins - DesignModo
  36. 30 Tutorials Combining Both WordPress and jQuery | a place to share, bookmarks, resources, css, jquery, photoshop, design, inspiration
  37. Top Wordpress jQuery Plugins-Nihad Nagi
  38. 16 Useful jQuery Tutorials to Enhance your WordPress Site
  39. 16 Useful jQuery Tutorials to Enhance your WordPress Site | WPhub.biz
  40. Pin Board » Using jQuery to liven up your WordPress login – The WordPress Guru
  41. Top jQuery WordPress Tutorials and Plugins
  42. PtsZones.com » We can do it… Share all for you!Top jQuery WordPress Tutorials and Plugins - PtsZones.com
  43. 30 tutorial para utilizar jQuery en nuestro Wordpress | megustaelturismo
  44. 15+ Plugins to Unleash the Invincible Power of jQuery and WordPress
  45. Customizing WordPress With JQuery
  46. 7 Ways to Spice Up Your WordPress Login - WPMU.org
  47. User Interface WordPress Plugins, Top 45 Best WordPress User Interface Plugins | WPTemplate.com

Leave a Reply

About The WordPress Guru

Over the last 4 or 5 years, I’ve been digging into the Wonders of WordPress. From the days when the Classic theme was the shizz until now, WordPress has gone from strength to strength both as the blogging platform of choice for many big players and as a CMS with...

Learn more »