How to Customize WordPress Login Page Without Plugin

Add Tool

Customize WordPress Login Page Without Plugin


The login page is your first contact with the WordPress dashboard, and it’s branding is all controlled through some CSS that’s pretty simple to manipulate. You can Customize WordPress Login Page or Login Screen By adding custom styles, we can brand our copy of WordPress which can be especially favorable for client work or just those that don’t want the WordPress logo hanging everywhere. The code below adds our custom logo (max. 326px wide) to the login screen.

<?php
    function login_styles() {   
    echo '<style type="text/css">h1 a { background: url('. get_bloginfo("template_directory") .'/images/wdt_logo.png) no-repeat center top; }</style>';   
    }  
    add_action('login_head', 'login_styles');
 ?>

The code above simply changes the style that sets WordPress’s default login page logo to the one you specify, whether it uses the bloginfo function to locate it within your themes’ directory, or not.

Modifying the background is also very simple, and is all handled by just styling the html tag with a background style, image or solid color. By using a combination of both the style we defined above, and the one below, we can create a result similar to the image below which is significantly different to what WordPress provides us by default. To change the default WordPress login screen simply add the below wordpress snippets in your functions.php file and add your logo in images folder.

<?php
function login_styles() {   
echo '<style type="text/css">
h1 a { background: url('. get_bloginfo("template_directory") .'/images/login-logo.png) !important; }
body.login { background:#333333;}
h1 img { max-width:326px;}
.login #nav a, .login #backtoblog a {
color: #FFFFFF!important;
text-shadow: none;
}

</style>';   
}  
add_action('login_head', 'login_styles');
?>

Now your WordPress login screen will like the below image.

Customize WordPress Login Page

Change WordPress login page logo url

By default it goes to WordPress.org, this will change it to your own homepage adding the below snippets in functions.php file

<?php
function change_wp_login_url() {
    return bloginfo('url');
}
add_filter('login_headerurl', 'change_wp_login_url');
?>

Tags: Customize WordPress Login Page, WordPress Login Page, wordpress custom login page, login page
Payza

About Masum Billah

Customize WordPress Login Page Without Plugin Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer.


SIGN UP TO GET UPDATE TO YOUR INBOX




Discuss about: How to Customize WordPress Login Page Without Plugin


adf.ly