How to Customize WordPress Login and Register Page

Updated On: July 28, 2010 Bilal Ahmad

WordPress is a great platform and it provides you a lot of features. You can customize your blog according to your own specifications. Today i thought i would share a tutorial about customization of wordpress login page. If you have noticed the TechMaish Login and Register page, it is totally different from the normal page.

You can also change your blog Custom Login and Register page to whatever design you like. You can change the background color, text color and even you can change the default logo.

How to Customize WordPress Login Page?

For customization you will have to edit 2 files.

1. wp-login.php
2. login.css

You will have to access your FTP account to edit the files.

1. Changing Logo and Link

The first thing you will have to do is to change the default logo and link for your login and register page. However you will have to access your hosting account to make the necessary changes.

Open Wp-Admin.php and find the below sentence.

<div id=”login”><h1><a href=”<?php echo apply_filters(‘login_headerurl’, ‘http://wordpress.org/‘); ?>” title=”<?php echo apply_filters(‘login_headertitle’, __(‘Powered by WordPress’)); ?>”><?php bloginfo(‘name’); ?></a></h1>

Now replace the link wordpress.org and add your blog link. Save the file.

Changing the Logo

Now open Login.css and find the below code.

h1 a {
background: url(../images/logo-login.gif) no-repeat top center;
width: 326px;
height: 67px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;

Now change the logo URL to your uploaded logo URL.Save the file.

Customizing Login Box
From Login.css file you can tweak your login page. For example you can change background color, add lines around the login box etc..

For example

form {
margin-left: 8px;
padding: 16px 16px 40px 16px;
font-weight: normal;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 5px;
background: #fff;
border: 1px solid #e5e5e5;
-moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
box-shadow: rgba(200,200,200,1) 0 4px 18px;