metinsaylan // rogue developer

Customize WordPress Login Page without any plugin

For many clients, login page is a really important part of the site design. Customized WordPress login pages give the site a professional look. Here I will show you how to customize your WordPress login page background and logo in a few steps.


Changing logo and background

1. To change login logo you will need an image with a width of 274px. Upload this image to your theme folder/images/ using FTP and rename it to logo-login.png.

2. If you have a custom background, put it to theme folder/images/ using FTP and rename it to login-background.jpg.

3. Finally add code below to your functions.php file in your theme folder.

// Customize login styles
function shailan_custom_login_styles(){
?> <style type="text/css">
/* Change login page background */
/* Make sure you change image paths to yours */
body.login{ background: #000 url("<?php echo get_stylesheet_directory_uri(); ?>/images/login-background.jpg") 50% -250px no-repeat fixed !important; }

/* Make sure you change image paths to yours */
body.login h1 a { background: url("<?php echo get_stylesheet_directory_uri(); ?>/images/logo-login.png") no-repeat top center; }

/* Optional : Change link color & shadow if needed */
.login #nav a, .login #backtoblog a { color: #999!important; text-decoration:none; text-shadow:#000 1px 1px 0; }
.login #nav a:hover, .login #backtoblog a:hover { color: #fff!important; text-decoration:none; text-shadow:#000 1px 1px 0; }

/* Optional : Add some shadow to message boxes and login box */
.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', 'shailan_custom_login_styles');

This code will add a custom background to your login page. It will also replace login logo at top of the form. After you add this code just save and upload it to your theme folder. Make sure you have images in right places.


Changing logo link & link title

To change link & link title on logo you can use snippet below:

// Customize login header link
function shailan_login_header_url(){
	return "http://metinsaylan.com";
} add_action('login_headerurl', 'shailan_login_header_url');

function shailan_login_header_link_title(){
	return "Wordpress, Freelancing and Design";
} add_action('login_headertitle', 'shailan_login_header_link_title');

Adding a login message

To add a welcome or login message to login page you can use the code below:

// Add a login message
function shailan_login_message($msg){
	return $msg . "<p class="message">Welcome to <strong>".get_bloginfo('name')."</strong>. Please login first.</p>";
} add_action('login_message', 'shailan_login_message');
Search Customize WordPress Login Page without any plugin on Google