WordPress Login Page Customization

Posted on Nov 30 2017 by in Fully Customizable Wordpress Themes WordPress 

How to Customize the WordPress Login Page

Let’s be honest. The WordPress login page isn’t exactly the nicest thing to look at.
It’s so generic, users couldn’t tell if they’re visiting NASA’s site or their favorite recipe site. And that’s a problem.
You want users to know, at a glance, that they’re on your site, no matter where they are. It’s all about branding and consistency.
Luckily, WordPress is flexible enough that we can customize the login page. However, it can get a little awkward, especially if you try to do it manually.
We recommend using a good plugin to customize your login page, and we’ll be covering quite a few in this article.

However, in the interest of being thorough, and for those of you who really like to be in control, we’ll also show you how to do it manually.

First, though, let’s look at why you’d even want to customize your login page.

Discover Why You Should Customize the WordPress Login Page

WordPress doesn’t come with any tools that will allow you to change the look of the login page. So, you’ll have to resort to plugins, or injecting a bunch of code.

It might seem more hassle than it’s worth. At first glance. However, the benefits far outweigh the slight hassle of doing the work.

Brand Consistency
Brand consistency is essential because:
• It lends an air of professionalism, stability, and purpose to your organization;
• It creates the perception that you are serious, focused, and willing to follow-through;
• It eliminates any confusion and instills confidence.
By customizing your login page so it looks like the rest of your site, you will ensure brand consistency across the board.
Better User Experience
Offering a great user experience is key to succeeding in business.

When you customize the login page, you can go further than just changing the aesthetics. You can include redirects and other functionality changes that will make life easier for users.

Nothing improves the UX quite like making visitors’ lives as simple and as convenient as possible.

Better Navigation
You can add all sorts of elements to your login page, including:
• Navigation links
• Social icons
• Reading recommendations

These elements will improve the user experience by providing additional value. However, you can also use them to subtly guide users to where you want them to go.

Improved Security
When you customize your login page, you also have the option of incorporating additional security measures.

You can change the address of the page, for example, or add a captcha. Thus, you can make it harder for hackers and scripts to access your site.

Users love a highly secure site. And you’ll be happy because you’ll save yourself a lot of time and aggravation.
Now that you know the benefits of customizing your WordPress login page, let’s look at how to do it.
How to Manually Customize the WordPress Login Page
Manually customizing the login page means working with files and code. We’ll be making most of the changes to the functions.php file.

Now, every time your web hosting company (or you) updates your WordPress installation, any changes made to the functions.php file will disappear. So, you’ll have to do all this work every time WordPress comes out with a new version.

Also, before making any changes to the code of your site, make sure you back up your files. That way, if something goes wrong, you can easily revert to a previous, and functional version of your site.

Changing the Design of the Page

We’ll be using a custom CSS stylesheet to change the design of the login page. You could make changes to the style.css file of your theme, but we want to keep things clean and more organized.

So, fire up your FTP program and navigate to wp-content/themes/yourtheme, where yourtheme represents the theme you are using.

Create a new folder and call it Login. This is where you’ll save all the styles, images and other elements you’ll be using to create the new design.

Create a blank text file. It can have any name, but you must give it a .css extension. In the interest of remembering what the file is, we suggest going with something like login-design.css. Upload the file to the folder you just created.

Now, we need to tell WordPress to use the new stylesheet when loading the login page. Open up the functions.php file and add the following code:


function custom_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/login-design.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_stylesheet' );

Once we update the new file with CSS, WordPress will load it when opening the login page.

Now, there is one small problem. WordPress already has pre-existing styles for the login page, which you will have to override by using certain CSS operators. You can find a complete list of these in the WordPress Codex.

The good news is that you won’t always have to use code that is quite as specific as the list presented in the Codex.
So, if you have some basic knowledge of CSS, you can now go wild and change every aspect of the login page.
For example, to change the background of the page, you could use the following code:


body.login {
  background-image: url(login-bkg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

This code assumes you’ll be using an image file.

Change the Logo

Part of the consistent branding idea is to make sure the login page looks identical to the rest of your site. So, you must change the logo.

You can either change the logo using the new stylesheet you created, or you can do it via the functions.php file.
The simplest and safest approach is via the stylesheet. The code you need is:


body.login div#login h1 a {
    background-image: url("newlogo.png");
}

Upload your logo to the Login folder and make sure the name of the file matches with what’s in the code.
To modify the functions.php file, use the following code :


function custom_login_logo() { ?>
<style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/login/newlogo.png);
        }
</style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

You should also change the URL the logo points to as well as the tooltip. To do so, input the following code into the functions.php file:


function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Brand and Tagline’;
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Now, when someone clicks on your logo, they’ll be taken to the home page of your site.

Improve Security by Changing the Error Message
When you make a mistake entering your login credentials, WordPress returns a message telling you where the error is.
The problem is that it can make things easier for hackers if they know where the mistake is.
So, it’s usually a good idea to change the message. To do so, add the following code to your functions.php file:


function custom_login_error_message()
{
    return "Oops, you made a mistake. Give it another go.";
}
add_filter('login_errors', 'custom_login_error_message');

Now, whenever someone makes a mistake, they’ll see “Oops, you made a mistake. Give it another go.” Of course, you can use whatever message you like.

Add a Redirect

Normally, the login page directs users to the WordPress dashboard. However, if you want users to go somewhere else, like a membership area, you must add a redirect.

The following code will redirect any user that does not have administrative rights to yoursite.com/premium_blog.


function my_loginredirect( $redirect_to, $request, $user ) {
  if ( isset( $user->roles ) && is_array( $user->roles ) ) {
    if( in_array('administrator', $user->roles)) {
      return admin_url();
    } else {
      return home_url() . '/premium_blog';
    }
  } else {
      return home_url() . '/premium_blog';
  }
}

add_filter('login_redirect', 'my_loginredirect', 10, 3);

Add or Remove Links

The WordPress login page comes with two links by default. The “Lost Your Password” and the “Back to” links can be removed, if you want a cleaner looking page.

To do so, add the below code to your new stylesheet:


p#nav {
  display: none;
}

p#backtoblog {
  display: none;
}

Note that the above code only hides the links. It doesn’t remove them completely. However, it should be sufficient for your needs.

If you want to add links to make it easier for users to reach particular areas of your site, you can do so using the following code:


function custom_loginfooter() { ?>
<p class="custom-footer-link">
Visit our article section for the best advice!
</p>
<?php }
add_action('login_footer','custom_loginfooter');

So, now you know what it takes to customize the WordPress login page manually.

Customize the WordPress Login Page Using Plugins

If your first reaction was to throw your hands up in horror at what it takes to customize the login page manually, we understand. And we’re right there with you.

The good news is that plenty of plugins can do the same thing. With a lot less work. WordPress’ catchphrase should definitely be “there’s a plugin for that.”

So, here are five free plugins you can use to change the appearance of the login page.
Custom Login

Custom Login is mainly focused on the design aspects. You can change the color of the background, add an image to the background, or change the logo. The important part is that you can do it with a few clicks of the mouse.

It does have some optional features. So, you can include custom JavaScript, CSS, and HTML. You can also change a few other things, such as how long before the login expires.

It also has some paid features such as incorporating a redirect after login, allowing users to login without a password, adding login forms to any page, and more.

While the paid extensions are nice, the free version of the plugin is more than sufficient to achieve brand consistency.
Custom Login Page Customizer

The Custom Login Page Customizer will allow you to change most of the design elements, including your logo, the background of the page and the form, and various other elements. However, it won’t let you change any functions. In other words, no adding redirects.

What does make this plugin very convenient is the fact that you can preview any changes. It will definitely save you time and make life much easier.

Customize WordPress Login Page

Just like the previous plugins, Customize WordPress Login Page allows you to change all the design elements of your login page. However, it takes things a step further.

With this plugin, you can turn the background of your login page into a slideshow. Thus, you can add multiple images and select from a number of slideshow effects.

It also allows you to use Google Fonts and to add social icons. So, if you’re looking to create a login page that’s a little flashier, then this is the plugin for you.

Erident Custom Login and Dashboard

The Erident Custom Login and Dashboard plugin is quite comprehensive. It not only allows you to customize the login page, but also your dashboard.

Like with the previous plugins, you can change all the design elements. However, it also allows you to change functionality and includes some cool extras, such as:

• Tweaking the opacity of the form’s background
• Using animations
• Import and export settings
• Hide links on the login page
• Save current settings so they are unaffected by a WordPress or plugin update.

So, if you’re looking for a comprehensive plugin to customize the login page as well as your dashboard, then this is the one for you.

A5 Custom Login Page

The A5 Custom Login Page plugin allows you to modify every design element on the login page easily and quickly. You can also add redirects, change messages, modify the input fields and more.

A very cool feature is the login shortcode, which you can use to generate the login page anywhere on your site.

Customizing your login page comes with a whole slew of benefits, including brand consistency, better security, and an improved user experience.

Now, all you have to do is decide which approach you will use. We recommend choosing one of the many great plugins listed above because you can get everything done with a few clicks of the mouse. And in much less time.

But, if you really want to, there’s nothing stopping you from manually customizing the WordPress login page. Just don’t complain to us if you end up pulling your hair out in frustration.

  • Get 40% on Yearly Subscription Code "E970B"
  • Get 50% on Single Theme use "SCHOOL"
  • Get 100% on First month FREE Hosting "HOSTNOW"
Premium WordPress themes that are professional and easy to use. Templates suitable for personal or b...