Customizing Your WordPress Login Page

We love WordPress, that must be said. In fact, most of our clients websites are built using WordPress. That said, if you are anything like us, you would occasionally want to customize certain aspects of the WordPress installation. Today, lets customize the WordPress Login Page.

By default, the WordPress Login Page looks like, well, WordPress. So, generally, we would like to make it look different, this adds a layer of professionalism to the website overall (especially if you allow multiple users login).

Creating the Custom Login Page

Lets start by creating a login.css file. We will place this in our WordPress theme root directory (You can also create a plugin to implement this, but for the sake of simplicity we’ll assume you can edit your theme).

	body.login {
	background: #242628; }

	.login h1 {
	background-color: transparent; }
	.login h1 a {
	background-image: url("../logo.png"); /* Change Me to the correct path to your logo */
	-webkit-background-size: 100px 100px;
	background-size: 100px 100px;
	width: 100px;
	height: 100px;
	margin-bottom: 0;
	padding-bottom: 10px;
	padding-top: 10px;
	background-position: center; }
	.login form {
	margin-top: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: transparent; }

	.login form input[type=text], .login form input[type=password] {
	margin-top: 10px;
	font-size: 16px;
	padding: 15px;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #888; }

	.login p.forgetmenot, .login #login_error, .login p#backtoblog, .login p#nav {
	display: none; }

	.login #wp-submit {
	margin-top: 10px;
	float: none;
	width: 100%;
	height: 45px;
	border: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: #d41343;
	text-transform: uppercase; }

view raw

login.css

hosted with ❤ by GitHub

Now, we need to load the CSS we just created. Edit your themes functions.php and input the next blocks of code. This block will load the custom CSS file so the WordPress login page can use it when styling. It will also hide the “Remember Me”, “Forgot Password”, and “Log in error” messages. This can be useful for security.

In your functions.php file, append this to the bottom:

	if ( ! function_exists( 'ck_custom_login_css' ) )
	{
	/**
	* Load the custom login page CSS.
	*
	* @return void.
	*/
	function ck_custom_login_css()
	{
	echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login.css" />';
	}
	}
	add_action('login_head', 'ck_custom_login_css');

	if ( ! function_exists('ck_rememberme_checked'))
	{
	/**
	* Checks the "remember me" by default.
	*
	* @return void
	*/
	function ck_rememberme_checked()
	{
	echo "<script>document.getElementById('rememberme').checked = true;</script>";
	}
	}
	add_action('login_footer', 'ck_rememberme_checked');

	// Hides the login error message
	add_filter( 'login_errors', create_function( '$a', "return null;" ) );

	// Changes login logo URL to your homepage
	add_filter( 'login_headerurl', create_function( '$a', "return '".get_bloginfo('url')."';" ) );

	// Change logo link title to your site name
	add_filter( 'login_headertitle', create_function( '$a', "return '".get_bloginfo('name')."';" ) );

view raw

functions.php

hosted with ❤ by GitHub

There we go, your WordPress login page should be looking pretty hot right about now. You can change the colors of your CSS file to reflect your brand. Here’s how we have made ours look.

Loading...

Your network is glacial, will load anyway in seconds.

Customizing Your WordPress Login Page