Ben Eberle
Web Design &
Development

WordPress

Comments Closed


Share this post

Customizing the WordPress Backend

A custom login page is a really nice touch. There are plugins out there that can do this, but why bother when all you need to do is to drop this into¬†your theme’s functions.php file. It will override the default WordPress login css styles and allow you to customize the logo and background. Totally fresh.


<?php

// Customize login styles

function bme_custom_login_styles(){
	?> 
	<style type="text/css">
		/* Change login page background - make sure image path is valid */
		body.login{ 
			padding-top:75px; 
		   background: #68686B url("<?php echo get_stylesheet_directory_uri(); ?>/images/login-background.jpg") 50% -250px no-repeat fixed !important; 
		}

		/* Custom logo - make sure image path is valid */
		body.login h1 a { 
			background: url("<?php echo get_stylesheet_directory_uri(); ?>/images/logo-login.png") no-repeat top center; 
			height:100px; 
			background-size: 106px 106px;
		}
		#login { padding: 10px;}
		/* Change link color & shadow if needed */
		#loginform {
			border: none; 
			-webkit-box-shadow: none; 
			box-shadow: none;
		}
		.login #nav a, .login #backtoblog a { 
			color: #999!important; 
			text-decoration:none; 
			text-shadow:none; 
		}
		.login #nav a:hover, 
		.login #backtoblog a:hover {
			color: #fff!important; 
			text-decoration:none; 
			text-shadow:#000 1px 1px 0; 
		}

		/* Add shadow to message and login boxes */
		.login form, p.message {
			-moz-box-shadow: rgba(0,0,0,0.5) 0 2px 8px;
			-webkit-box-shadow: rgba(0,0,0,0.5) 0 2px 8px;
			box-shadow: rgba(0,0,0,0.5) 0 2px 8px;
		}
	</style>
<?php
}

add_action('login_head', 'bme_custom_login_styles');
?>