How to Customize the WordPress Login Page

Why do You Need a Customized Login Page for WordPress ?

• Your users will register and login using the default WordPress login screen, Because WordPress doesn’t provide any built-in options for adding your own logo or changing the overall look and feel to match whatever custom theme or branding you have on your site.

• This may work fine for small websites. However, if you are running a business website or a busy online community, then you may want to show your own brand instead of WordPress.

Here are the two ways you can go through:

You can contact experts from popular WordPress Development Company from USA for any questions.

Let’s continue reading below solutions!

1. Use Existing WordPress Layout.

• It’s actually quiet easy to customize the existing one.
• If it’s just changing the logo or giving it a completely different layout, the place to start is the login_enqueue_scripts action.
• This is where you can make a decision to output a normal, simple piece of CSS or to give link to a full file of CSS. You may also queue up any JavaScript of your choice, that you want to use.
• In function.php

add_action('login_head', 'my_custom_login');
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/your_login_styles.css" />';}

• your_login_styles.css is the name of css file which is create for customize the Login Page.
• Care is to be taken here, make sure that you are using extremely specific selectors, in order to make sure that you override the base style.
• As for default, the logo links anyone to the address: wordpress.org. This can be changed to your site url using the below code in your functions.php file:

add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
function my_login_logo_url_title() {
return 'Your Site Name and Info';}

The most convenient way to change the error message is by the below code in your functions.php :

add_filter('login_errors', 'login_error_override');
function login_error_override()
{
return 'Incorrect login details.';
}

Related : WordPress vs Adobe Business Catalyst : Which CMS is Best for Developing?

2. Create a New Layout.

• For starters, a custom page template for the login page is to be created.
• For doing so, you can choose to create a new page template and give it a name. e.g: page-login.php.
• Thereafter, make a new page from the WP Admin. Setup the permalink to login. Thus, WordPress will by default take the page-login.php template for this page.
• Keep the wp_login_form tag in the page-login.php page template in order to display the login form

A global information technology solutions agency providing fresh, creative digital services to businesses who want to grow online. Focusing on results, we use our technical skill and industry insight to help you meet your digital goals. Whether that’s lowering your bounce rate with interactive web design or bringing brand new traffic and income streams to your website. <a href=”www.elsner.com/contact-us”>Talk to us</a> about your project to get started…

   </p>
</div>
<div class="login-form">
<?php
$args = array(
'redirect' => home_url(), 
    'id_username' => 'user',
    'id_password' => 'pass',
);
?>
<?php wp_login_form( $args ); ?>
</div> 

• A CSS as per your personal requirements can be made. The login page is already in function.
• We can attempt to login, if its a success, we will get redirected the address that was specified in the redirect parameter above. However, there is something to be addressed.

add_action('init','redirect_login_page'); 

function redirect_login_page() {
$login_page  = home_url( '/login/' );
$page_viewed = basename($_SERVER['REQUEST_URI']);
if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') 
{
     wp_redirect($login_page);
     exit;
}
}

– The page of login may work as per the expectation after we are logged in. In case an error occurs, like when submitting invalid id and password combination, or submitting empty spaces, we will be redirected to wp-login.php. In order to solve this issue, you may add the following function in your functions.php:

add_action( 'wp_login_failed', 'login_failed' );

function login_failed() {
  $login_page  = home_url( '/login/' );
  wp_redirect( $login_page . '?login=failed' );
  exit;
}

add_filter( 'authenticate', 'verify_username_password', 1, 3);

function verify_username_password( $user, $username, $password ) {
  $login_page  = home_url( '/login/' );
    if( $username == "" || $password == "" ) {
        wp_redirect( $login_page . "?login=empty" );
        exit;
    }
}

– The Final Problem is that we will also get redirected to wp-login.php when we are logged out of the site. Therefore, we need to specify the redirecting URL upon the logout as well.

add_action('wp_logout','logout_page');
function logout_page() {
  $login_page  = home_url( '/login/' );
  wp_redirect( $login_page . "?login=false" );
  exit;
}

• There are a number of things that could be done to improve the login page such as addition of the lost password link, Register link, and even a personalized error message. However, at this juncture, it is now working good enough for users to login and logout. It could be a great start to create a login page that is more advanced.

So yeah! That is it.
With the few simple tweaks, you can quite comfortably personalize your login page to match the appearance and feel of your site.

A lot of theme designers refrain from styling the login page as they deem it unnecessary, especially when it is out of the WordPress theme setup.

However, when you are creating a client site, neglecting style – and significantly, the brand – the login page can prove to be a lost opportunity that could break the user’s experience when there is a custom theme in place.

The other opportunity to brand your site, which also leaves a long lasting impression in your user’s mind.

Pankaj Sakariya

June 20, 2017