Creating a Customized WordPress Login Page

WordPress

When you go to login to your WordPress site, you are presented with a plain white page with a space to enter your username and password. This might be enough for you if you are the only one who has login privileges on your site. But what if you allow multiple users the ability to log in? It might be better to create a customized login page instead.

Consider the WordPress developer who designs and publishes sites but then turns over daily blogging responsibilities to the client. That client may assign various employees to contribute their own blog posts several times a month. It might be nice for branding purposes to create a customized login page that every blogger will see.

WPMU DEV, a company that creates customized WP plugins and themes, offers a very detailed tutorial for customizing your WordPress login page. We will not go through it entirely, but we will highlight and summarize the basic process for you. It is really not hard for anyone who has a basic knowledge of cascading style sheets.

Create Your Login Folder

The first step is to create a login folder in the main directory of your theme; name it ‘login’. Then create a new text file named ‘custom-login-styles.css’. You will edit this file on your computer and then upload it to the login folder when complete. Next, you will need to add some code to the functions.php file that tells your WordPress site to load the customize login page instead of the default option. Here’s what to do:

  • Navigate to your WordPress Dashboard
  • Hover over ‘Appearance’ and click on ‘Editor’
  • In the editor window, click on the ‘functions.php’ file in the sidebar on the right.

This will load the file into the editor so that you can add the following code:


function my_custom_login() {

echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';

}

add_action('login_head', 'my_custom_login');

You are set and ready to go once you save the modified file.

Your Customization Options

As the WPMU DEV tutorial explains, there are a number of different options you can customize on your login page by way of some very simple coding. For example, you can add a logo by using the ‘background-image’ tag and directing it to an image in your media library. Other customizable options include:

  • login page background
  • page colours and fonts
  • appearance of the ‘lost password’ link
  • appearance of the ‘back to’ link
  • hiding the ‘login error’ message
  • modifying the login page animation
  • changing the redirect url
  • modifying the ‘remember me’ checkbox.

By modifying and customizing your WordPress login page, you can add more branding strength to your site. Every time visitors see your brand, they are reminded of what it means to them in terms of the quality of the products and services you provide. Branding the login page provides that extra something special you would not otherwise present to your visitors – every time they visit your site.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

Your email address will not be published. Required fields are marked *