How to add a custom box at the login page
Have you ever wondered how useless your wordpress backend is to unexperienced web-users? People who don’t know what a backend is won’t even get the idea of your login page. Wouldn’t it be great if you just told them that they are in the wrong place? Here is how the final result can look like:
The Examples
The Instruction:
The way to get the little box to appear is to place it in the code of your wp-login.php. Afterwards you can set the style of the box by altering the corresponding css file:
- Open the
wp-login.phppage in your favourite html-editor1. - Look for
line 495(for WP 2.8+ useline 530) which should be empty, and add the following code:
<p class="message"> Looking for posts? Go back to <a href="http://yourdomainname.com/">my homepage.</a><br>
</p>You can put anything between
<p class="message">and</p>. So alter the example above as you wish. - Save and close the file
wp-login.php - Upload
wp-login.phpto your WordPress root overwriting the old one. - That’s it!
In order to customize the color of the box – like I did in the example above – you do this:
- Open
wp-login.phpagain. - Look for
line 495(for WP 2.8+ useline 530) and add
<p class="message2">Looking for posts? Go back to <a href="http://yourdomainname.com/">my homepage.</a></p> - Save the file and upload it to your WordPress root.
- Now go to
wp-admin/cssand openlogin.css. - Look for
line 94and put in the following code after it:
.message2
{
margin: 0 0 16px 8px;
border-width: 1px;
padding: 12px;
border: 1px solid #F98C8C;
background: #FFF0F0;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}By changing the bold code above, you can customize the colors of your box. My example will lead to a red box.
- Save the file and upload it to
wp-admin/css. - That’s it!
Now go tell the world what you have to say on your login page! Good luck!
- my favourite editor is Dreamweaver [↩]
I agree with you. It is good that you gave this easy set up instruction. This will be a definite help. Thanks much!
This is a nice hack for who love to customize the login page but remeber to apply it again after upgrading WordPress to a new version because the mentioned files change.
I have read your article, it’s easy to understand.
Also we can change a login images “wp-admin/images/logo-login.gif”.
And can I translate this content to my mother tongue? I will link to your blog.
Thanks and thanks for your nice post.
Great information and very easy to understand, it is really helpful for me and I definitely need this one…thanks…
Just wondering where are the informative new posts to ‘Fink About It’? Hope everything is okay
Ja I’m fine, thanks
) I’ve been busy with my German blogs recently. This week I will release a new post right here – I promise. Thanks for keeping me disciplined 8-))
To have it above your login between the wordpress logo and your login add his line between line 74 and 75 so after the and before the <?php and your line will appear on top
December 13, 2005 that allows users to both submit questions to be answered and answer questions asked by other users. ,
This is a nice hack for who love to customize the login page but remeber to apply it again after upgrading WordPress to a new version because the mentioned files change.
What an easy tutorial. Thanks. All we usually need is a push in the right direction, and if using wp3.1 whatever, just try what looks like a logical line, and experiment.
BTW, go here: http://colorpix.en.softonic.com/ to find an very easy way to find the right color sample – it’s free, and I use it often.
Will this work in any version? Thanks for the easy steps, great for newbies.
I have read your article, it’s easy to understand.This is a nice hack for who love to customize the login page but remeber to apply it again after upgrading WordPress to a new version because the mentioned files change.Thanks for sharing.