Customized WordPress Login

Published in Web DesignWordPress
10 Comments

I have long wanted to change my WordPress login screen or page but I didn’t know what to do. I don’t even know if it’s possible to customize it. Few days ago, I stumbled upon graphic and logo designer David Airey’s post on Customize you WordPress login. It was the exact thing I intended to do. I was very thankful that I came across his very useful site.

I am administering my hometown’s website where I am using WordPress as CMS. And since the login screen is easily available to the contributors and members I thought that I would want to have a login screen that looks like the website, at least.

As we all know, this is the default WordPress login screen.

default WP login screen

So excited to practice what I’ve learned from David’s post, I immediately opened Adobe Photoshop. I edited the login-bkg-bottom.gif and login-bkg-tile.gif files which are located in wp-admin/images.

This is the customized WordPress login screen for my hometown’s website. This is the first version.
Sibale Online login screen

Since I want to have a consistent look, I designed another login screen that looks similar to the theme.

Sibale Online Login page

Want to see it live? Come take a peek.

You may say that the login screen is just a small detail and that not everybody have access to it, but for the life of me, I want my login page to be something special.

And here’s what my login screen looks like.

amorfrancis.com wordpress login screen

Check it out! :)

But this customized WordPress login screen will be overwritten once you upgrade, hence, your login page will return to the default. I would prefer to manually overwrite the login files mentioned above after the upgrade, but you may use the Plugin version. Here I have found two.

  • BM Custom Login - Web Designer and Game Developer Ben Gillbanks of Binary Moon developed this plugin to give people an easy way to add a custom wordpress login screen. The plugin eases upgrading (in particular on client websites) and includes a login screen kit to speed up development of your own screens.
  • Pimp My Login - Matt of SkyMinds.Net developed this WordPress plugin that allows you to easily edit the look and feel of the login page. It can display your own logo instead of the WordPress one and point to your blog’s URI instead of WordPress.org.

I was able to customize my WordPress login page, and it was so easy, I had fun doing it. Will you customize your login page too?

Update: I was also able to customize the new WP 2.5 login screen.

For non-post related comments, you may visit my Guestbook.

10 Comments to “ Customized WordPress Login ”

  1. bluep on March 30, 2008 at 2:08 pm

    wow thanks for sharing this. Im going to use it in one of my blogs. By the way amor, im creating a blog for my HS batch pero diko alam kung sanmakakaita ngresource about dun sa roles ng mga magreregister, maybe you can help me find a documentation about it kasinabasa ko ngayon na may blog ka pala na marami nagreregister.

    sensya na at matagala ko di nakadalaw. nakipagbuno ako kay ka pepe ng dalawang linko. adjustmentperiod pa lang ako eh.

    belated happy easter!

    bluep’s last blog post…
    If you were in my shoes, would you do the same to a USER-FRIENDLY?

    Reply

  2. Amor on March 31, 2008 at 1:29 am

    thanks bluep for visiting.

    Actually may problema pa ako sa WP regarding sa registration, kasi hindi nya nai-sesend sa member yung registration email na may password. Ewan ko nga ba bakit ganun, I can receive a new user registration notice, pero ang nagregister, wlang narereciv. Kaya ang ending, I have to send it manually pa.

    Regarding sa roles ng mga mag reregister, lahat sila subscriber muna then kapag kilala ko at alam kong pwedeng maging contributor o editor, o di kya kapag nag volunteer sila, binabago ko yung roles.

    Cge pag may nakita akong documentation about the roles, I’ll give you the link. :)

    Amor’s last blog post…
    Customized WordPress Login

    Reply

  3. Marlene on March 31, 2008 at 5:37 am

    Aba aba, Amor, this is really good info. I don’t like the login page kasi even if we have it self-hosted ay parang nakadikit palagi sa wp. Thru this info, we now have the chance to personalize the login page na parang part of site talaga. Thanks for this. I’ll surely play with it later

    Marlene’s last blog post…
    Technorati Authority Ka-Boom!

    Reply

  4. jessie on March 31, 2008 at 12:28 pm

    Amor,

    Fren, thanks for the tip. Naku gusto ko rin to so I can make my login less boring. besides I love tweaking some parts of my blog especially backdoor parts dahil may konting programming (konti lang). hehehe!

    jessie’s last blog post…
    Cory Aquino Battles Colon Cancer

    Reply

  5. Laarni on April 1, 2008 at 11:24 am

    I have this on one of my blogs. I stumbled it, i think, last year. I wonder if it’s also compatible with the new WP.

    Laarni’s last blog post…
    Do opposites really attract?

    Reply

  6. Amor on April 1, 2008 at 9:17 pm

    Thanks Marlene and Jessie. I was so excited to personalize my login page after I read David’s post. I was just bloghopping and luckily I found his site, browsed his most popular posts and there I saw his post about customizing WP login. Pareho tayong tatlo na mahilig mangalikot ng themes, haha!

    Thanks too Laarni, last year pa yong post, sana nga noon ko pa nabasa yun eh, haha…pasalamat talaga ako nakarating ako sa site na yun.

    I just downloaded WordPress 2.5 for my local WordPress Install. And it has different WP login screen. I’m still searching for details on how can I customize the login screen.

    There’s no login-bkg-bottom.gif and login-bkg-tile.gif files in the latest version, only logo-login.gif.

    Amor’s last blog post…
    Customized WordPress Login

    Reply

  7. Gabriel on April 3, 2008 at 1:10 am

    hi, amor hope you can drop by sa blog ko pakinggan mo yun song sa new entry ko at hope you comment sa song good or bad. thank you

    http://flipclan.com/unang-pagtingin

    Gabriel’s last blog post…
    No Frontal Nudity in Playboy Philippines

    Reply

  8. shanker bakshi on April 4, 2008 at 10:03 pm

    That mean all the stuff on WordPress are editable, you just need some courage and risk to play with it.

    shanker bakshi’s last blog post…
    WIN 5000 Entrecard Credits

    Reply

  9. amor on April 8, 2008 at 7:14 am

    thanks Gab for the invites, the song was nice.

    You’re right Shanker, WordPress is editable, you just have to be adventurous. But I think, playing with Wordpress’ files should be done offline, meaning with a local wordpress install. In that way, you wont mess up with your live blog when ‘changes’ doesn’t turn out right.

    Reply

  10. Customizing WordPress 2.5 Login Screen | Amor's Personal Website on January 26, 2009 at 1:43 pm

    [...] on my local WordPress install. I immediately checked on the WP login page to see if my post about Customized WordPress Login screen will still be compatible. But it’s not. There’s no login-bkg-tile.gif and [...]

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled