The Entry Archive
Skin Your WordPress Login Page in Order to Achieve a More Consistent and Professional Looking Blog
You’ve spent weeks or days designing and coding a new WordPress powered website for a client and all seems swell. Your newly designed blog is looking snazzy, your client loves the look and feel of her new website, and you’re just about ready to move on to your next project. Then it happens.
“I was wondering if you could take that big white “W” off of the login and register pages?” your client asks. “Everything else looks great but maybe you could replace that “W” with my business logo or something else instead.?”
The Big White “W”
As all of you are aware, the big white W is in fact WordPress’ logo. When users attempt to login or register with your website, this is what they normally see in their browser:
(I am using WordPress version 2.1.2 as a working example.)
Furthermore, if a user clicks on the WordPress logo, she is taken to www.wordpress.org. In addition to requesting that you change the W, maybe your client also asks for you to redirect users to her website main page if a user clicks on the new logo that has replaced the W. We’ll get to this a little bit later.
Where is the W?
The file that runs the login, register, and lost password pages is called ‘wp-login.php’. It is located in the root directory of your WordPress installation. The images that appear on the aforementioned pages are located in a directory called ‘images’ (located in the ‘wp-admin’ subdirectory).
The two images that control the display of your login splash are called ‘login-bkg-tile.gif’ and ‘login-bkg-bottom.gif’, which are both located in the ‘images’ directory. For the purposes of this tutorial, I will stick with the current color scheme of the login area and primarily deal with the ‘login-bkg-tile.gif’ file.
Use a Template
I Photoshopped the original ‘login-bkg-tile.gif’ file and created a reusable template with which to create login splashes for clients. (View the template).
After creating my new login image, I replaced the old ‘login-bkg-tile.gif’ with my new splash and this was the end result.
Take It Further With A Message
If you do regular maintenance for your client, you may want to let him know that important site messages can also be displayed inside of the login/register area.
Locate line number 24 in your ‘wp-login.php’ file and look for a variable called ‘$message’. This is what the default code looks like:
Insert your special message inside of the $message field and you’re good to go.
Take note: Make sure that your message is inside of a paragraph block with the CSS class ‘message’. Take a look at the following code to get an idea of how to insert messages in your login splash.
After modifying the $message field and saving all of your changes, this is what your final product will look like:
Change The Logo URL
In order to change your logo’s URL, you need to locate line number 49 in the ‘wp-login.php’ file. Replace www.wordpress.org with whatever domain you like, and whenever a registered user clicks on your logo, they will be redirected to wherever you want them to go.
Use Your Imagination
The ‘wp-login.php’ page is just like any other normal page. You can dress it up however you like but keep in mind that if your client is not proficient with website code, you will want to keep things as simple as possible, which is why I decided to make minor changes to the login splash. You can do whatever you like, really. Change up the colors, integrate the login page seamlessly into your website, or do whatever else comes to mind. Happy skinning!
Post Date: March 8, 2007
10 Responses to “Skin Your WordPress Login Page in Order to Achieve a More Consistent and Professional Looking Blog”
leo:
March 9th, 2007 at 10:17 am
It’s a good idea and something I have been doing myself already when creating blogs for clients. Though I notice you don’t follow your own advice on your login page.
Philip Arthur Moore:
March 9th, 2007 at 10:23 am
Ha!
I was waiting on someone to call me out on that. The reason I don’t use it for my own login page is because I’m the only author here, so it would be somewhat of a waste to spend the time dressing up a place that only I see (which is kind of funny, considering that I spent the time to write an entire post on it).
Igor:
March 12th, 2007 at 2:34 pm
Thank U, Philip! Your post inspired me for changes, ya it’s in russian, but U can see smth different. Thank U and Good Luck!
Philip Arthur Moore:
March 12th, 2007 at 8:03 pm
I saw those changes. They are awesome! I’m glad I could help Igor.
michelle:
March 18th, 2007 at 6:18 pm
Thank you!!
brilliant advice, all the other sites made this look impossible… i just edited the gif files and uploaded them…done!
Your a star! michelle (:
Tyler:
May 24th, 2007 at 9:56 pm
Thank you so much for this article. I’ve replaced the images and entered a message of my own, but I noticed that any messages generated by WordPress ie. ERROR: Invalid username / e-mail combination. show up in a yellow font with a blue background. Do you know how I’d change that?
Thanks!
Tyler
Tyler:
May 24th, 2007 at 10:23 pm
Hey again. I figured out the further customization of my login screen. ‘wp-admin.css’ is a helpful file ;). Thank you ever so kindly for this tutorial.
Tyler
complexity:
July 18th, 2007 at 7:27 am
Good tutorial bro.
Gefühlte Konsistenz für Wordpressnutzer » Pixeldrama:
July 27th, 2007 at 3:29 pm
[...] kleinen, aber sehr feinen Post zum Thema „Wordpress individualisieren“ ist auf bigsquaredot.com erschienen, jedoch beschäftigt er sich mit einem garantiert unter dem Radar der Aufmerksamkeit [...]
Nakia:
June 17th, 2008 at 9:49 am
I would love to know how to make a skin for bebo any way that I want. But no website would help me out. I had to have a certain picture size and I didn’t have a perfect picture size and that is what screwed my bebo page up. I need HELP PLEAE!!Someone really needs to help pleaze…
Lol
Leave a Reply