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


[Live Demo]

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:

  1. Open the wp-login.php page in your favourite html-editor1.
  2. Look for line 495 (for WP 2.8+ use line 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.

  3. Save and close the file wp-login.php
  4. Upload wp-login.php to your WordPress root overwriting the old one.
  5. That’s it!

In order to customize the color of the box – like I did in the example above – you do this:

  1. Open wp-login.php again.
  2. Look for line 495 (for WP 2.8+ use line 530) and add

    <p class="message2">Looking for posts? Go back to <a href="http://yourdomainname.com/">my homepage.</a></p>

  3. Save the file and upload it to your WordPress root.
  4. Now go to wp-admin/css and open login.css.
  5. Look for line 94 and 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.

  6. Save the file and upload it to wp-admin/css.
  7. That’s it!

Now go tell the world what you have to say on your login page! Good luck!

  1. my favourite editor is Dreamweaver [↩]

Trackback? If you liked this article, subscribe for more updates.