Custom WordPress Login without a Plugin

Feb
16

A few weeks ago I told you about a plugin called Custom Login Page. It is a great plugin, especially for those who don’t want to mess around with their themes files, but what if you are a person who DOES want to mess around with the theme files. Here’s how to do it.
1. Open your functions.php
2. Below the code that is already there, paste the following:

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

3. Inside of the ticks (”) you need to add your styles. Be sure to put

<!--
Insert Styles Here
-->

4. Now it depends on what you want to accomplish. For me, I wanted a custom login logo, I wanted to remove the “Back to Tim Haslam” link at the top left corner and the black bar that it was housed in. I also wanted to change the login button to be red and the lost password text to be red. Below is the code to make it happen.
Custom Login Logo

h1 a { background-image:url('.get_bloginfo('template_directory').'/images/loginlogo.png) !important; }

Remove Back to Blog Title Link

#backtoblog { display:none; }

Remove the Black Bar

body { border-top-style:none; }

Make the Lost Password text red

.login #nav a { color: #bf0d00 !important; }

Make the Login Button Red – There are many possibilities for this one.

input.button-primary, button.button-primary, a.button-primary {
	background: url('.get_bloginfo('template_directory').'/images/loginbtn.png) no-repeat;
	border-color:#bf0d00;
	color:#FFFFFF;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
}

So the final code would look like this:

function my_custom_login_logo() {
   echo '<style type="text/css">
       	h1 a { background-image:url('.get_bloginfo('template_directory').'/images/loginlogo.png) !important; }
		#backtoblog { display:none; }
		body { border-top-style:none; }
		.login #nav a { color: #bf0d00 !important; }
		input.button-primary, button.button-primary, a.button-primary { 
			background: url('.get_bloginfo('template_directory').'/images/loginbtn.png) no-repeat;
			border-color:#bf0d00;
			color:#FFFFFF;
			font-weight:bold;
			text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
		}		
    </style>';
}
 
add_action('login_head', 'my_custom_login_logo');

That’s all! It’s a pretty slick customization that will wow your clients. Let me know what you come up with.

Categories: Web Work, WordPress
Tags: custom, theme, WordPress