Developers who have been using WordPress for a long time are familiar with the login form. It is styled in a very generic manner consistent with the default WordPress theme. It is also the same design found on the registration form and the Forgot Password form. But there are very few who go out of their way to update the styles and rearrange the design schemes.

In this article I would like to present just a couple of methods for re-designing your WordPress login form. The techniques may take a couple of hours developing new styles, but it can be finished within a day. You’ll need some knowledge of backend coding to edit inside your theme files. Additionally many of these changes can be theme-specific which means you can quickly turn them off when required.

Add Your Own Stylesheet

The first step in taking control of your login form is by creating your own custom CSS file. These may include any important CSS properties which you need to overwrite in the login form. First you’ll need to add this line of code into your theme’s functions.php file.

function custom_login_css() {
echo '
';
}
add_action('login_head', 'custom_login_css');

Using this code we are setting up a brand new function which outputs a stylesheet reference. This file is named custom-login.css and should go in your theme’s root directory. Keep in mind you could change this to be stored inside a subdirectory – doesn’t matter as long as the location matches your current theme folder.

Creating New Rules

CSS properties can be finicky based on how they are written. Sometimes you will need to reference container elements so that you are being as precise or more precise than the defaults. Many developers are not sure where to even start when it comes to writing your own CSS code snippets.

The default login form stylesheet is located in /wp-admin/css/wp-admin.min.css. I would not recommend editing this file directly, but checking it out to get an idea of how each element is targeted. You could even copy+paste the code selectors into your own stylesheet.

Updating the Logo

You should notice the image for the WordPress logo is actually placed using CSS. After scouring through some WordPress documentation I found a very helpful code snippet which targets this specific header.

body.login div#login h1 a {
background-image: url(/images/site-login-logo.png);
padding-bottom: 30px;
}

Notice you should update the latter portion of the URL to point towards your own logo image. This may not even be in your template directory so feel free to update the entire URL value if needed. Now along with the image we can also update the anchor link & title text accompanied with the logo. This code is also from WordPress’ documentation page on the subject.

function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

You can see we need to reference two different filter methods for updating this link. First we change the href value, and then update the title attribute. Best of all these code snippets will reside within your theme directory and will not spill out into the WordPress core.

Collection of Selectors

This final chunk of code is also courtesy of the WordPress documentation page. Developers have put together a template which targets important elements on the login page. I have copied over this block of code which you may append into your own custom CSS stylesheet.

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Please keep in mind that you may not need to include all of these specific references. It is always best to keep your stylesheets saved as the smallest filesize possible. So when copying as a template be sure to delete the empty or unused selectors out of the document.

Build a Custom Page

This method is probably the most involved and requires a good understanding of the WordPress backend. I have seen websites using custom login forms on the homepage and they often work great. Think about solutions like modal dialog boxes or Ajax-style login forms in the sidebar.

Now the work involves the creation of a new custom login page and handling the form inputs. I would have to recommend reading this tutorial if you want to give it a shot. This includes how to build the page without any WordPress plugins, and what codes you’ll need to get it functional. Also here is another recent tutorial on appending a login form into any page template.

This method can offer a work-around instead of forcing users onto the default login URL. At times it may seem like a waste of resources, but it all depends on your website. Admittedly it does feel cozy to build a matching login form which is styled in relation to your website layout.

Final Thoughts

The process of customizing an entire form is very detailed. You’ll need to go over the list of CSS classes and IDs before jumping into the codes. But you can see that WordPress has made the process a lot simpler for developers. Custom styles will give your login form some class when recruiting new users & writers onto your website.

In addition to these ideas you will find many other techniques in Google. If you are ever lost I recommend doing a quick Google search for your key terms. There are also development communities which are more than happy to offer support on tricky problems. But generally this task shouldn’t be too difficult and can actually be very fun!