Snippets

Custom WP Login – Full Screen Background

Got tired of using WP Plugins so I decided to knock together a quick theme functions snippet, You’ll notice by the sample I’ve edited the Background, Logo, Submit Button & Links. Just upload your images needed to the images folder within your current themes folder and replace the snippets image urls with yours, Once done paste snippet into your themes functions.php document and hit upload file.

I’ve also changed the link colours to change these simply find the current colours and tweak to what ever colour you like.

Thank you for reading & Enjoy

//--------------- Login Screen Wallpaper ---------------//			
	
	function login_enqueue_scripts(){
		echo '
			<div class="background-cover"></div>
			<style type="text/css" media="screen">
				.background-cover
					{
						background:url('.get_bloginfo('template_directory').'/images/background) no-repeat center center fixed; 
						-webkit-background-size: cover; 
						-moz-background-size: cover; 
						-o-background-size: cover; 
						background-size: cover; 
						position:fixed; 
						top:0; 
						left:0; 
						z-index:10; 
						overflow: hidden; 
						width: 100%; 
						height:100%;
					} 
				#login
					{
						z-index:9999; 
						position:relative;
					}
				.login form
					{
						-moz-box-shadow: 0px 0px 0px 0px !important;
						-webkit-box-shadow: 0px 0px 0px 0px !important;
						box-shadow: 0px 0px 0px 0px !important;
					}
				.login h1 a
					{
						background:url('.get_bloginfo('template_directory').'/images/logo.png) no-repeat center top !important; 
					} 
				input.button-primary, button.button-primary, a.button-primary
					{
						-moz-border-radius: 3px !important;
						-webkit-border-radius: 3px !important;
						border-radius: 3px !important; 
						-khtml-border-radius: 3px !important;
						background:url('.get_bloginfo('template_directory').'/images/button.jpg); 
						border:none !important;
						font-weight:normal !important;
						text-shadow:none !important;
					}
				.button:active, .submit input:active, .button-secondary:active
					{
						background:#96C800 !important; 
						text-shadow: none !important;
						
					}
				.login #nav a, .login #backtoblog a
					{
						color:#fff !important;
						text-shadow: none !important;
					}
				.login #nav a:hover, .login #backtoblog a:hover
					{
						color:#96C800 !important;
						text-shadow: none !important;
					}
				.login #nav, .login #backtoblog
					{
						text-shadow: none !important;
					}
				</style>
		';
	}
	add_action( 'login_enqueue_scripts', 'login_enqueue_scripts' );

Source: http://www.media21a.co.uk/themes/muddywater4x4/wp-login.php...

Share this snippet

 
  • http://www.nyamsprod.com nyamsprod

    Why writing everything in the function.php I’d rather do something cleaner like for instance
    - Add all my css rules in a file, let’s call the file login.css
    - rewrite your long function like this

    add_action(‘login_enqueue_scripts’, ‘mytheme_login_style’);
    function mytheme_login_style() {
    echo ”, PHP_EOL;
    }

    it’s cleaner and easier to edit without fear from screwing up your entire function.php IMHO

    • http://www.nyamsprod.com nyamsprod

      My code was remove but what I wanted to echo is just the line of code to display the HTML tag link that point to the login.css file and that’s it!

    • http://www.nyamsprod.com nyamsprod

      you seem to add a div with the class background-cover but it’s really not necessary … on WordPress login page there’s a class on the body element so you can add your background by simple adding your rules to body.login … it’s easier too and you don’t add extra markup to the page :)

    • https://www.facebook.com/profile.php?id=504069774 Adam Wadsworth

      I dropped all CSS into the just to make easier for people to edit and play around with it, without the need to be uploading multiple style sheets, But saying that I could have linked the style sheet upto the current themes style.css documents.. Cheers for all your input dude.

  • http://www.multiwebsolutions.nl Niels van Asselt

    Hello Adam,

    Was looking for an easy way to customize the login screen without use of a plugin. It looks like the snippet works like a charm but when I opened the website on a smartphone the background image does some strange things when scrolling. Do you know what I can do about that? Have tested it on Android and iPhone.

    Regards, Niels

  • http://www.multiwebsolutions.nl Niels van Asselt

    Never mind, I found a simple jQuery plugin that allows me to add a dynamically-resized background image to any page. I combined this with your code to create a custom login page. Link to the plugin: http://srobbin.com/jquery-plugins/backstretch/ Works great on mobile devices.

    Regards Niels