Customize WordPress Login Page provides you one of the easiest ways of creating a website. It provides you the flexibility of customization. You can add your desired features to a WordPress website. You can use plugins to enhance the performance of your website. All this make it such a popular website development platform.

The login page of your website is a good place to impress the users. Many site owners customize the login page of their WordPress website according to their own taste or depending on the target audience.

If you are having a subscription-based website then the login page becomes a more vital factor. WordPress offers you the flexibility to customize the login page of your site.

The  Login page can be customized by  two ways:

WordPress

 

1. Using a Plugin
2. Manual Customization

Using a Plugin:

It is the easier way to customize the Login page of your WordPress site. You do not need any coding for this method but you have to be satisfied with the plugin offerings. Following are some useful plugins which can be used to make changes in the login page of your wordpress site.

1.Uber Login Logo:

It is a simple and easy to use plugin. You can easily change the Login page logo on your WordPress site. It doesn’t do anything fancy to your site but if you just want to change the logo of the login  page, it will work perfectly for you.

2.Theme My Login:

This is a great plugin to customize your login page. It themes the login page according to the current wordpress themes you are using. The Login, registration and forgot password pages will match your site.

3.Custom Login Page Customizer:

This is a useful plugin and enables you to easily customize your login page. It is supremely easy to use. Just install and activate it and get started with the login page customization. It allows you to check the preview of the changes you have made before making them live.

Manual Method:

It needs some awareness about the coding to customize the login page of your WordPress site manually. It provides you better control over the final appearance of your login page.
Lets us see the step by step process of customizing the Login page:
In order to customize the Login page, you will need to add some code in the function.php file.  Create a new folder “ Login ” in your theme’s directory. This folder will contain the images and CSS style sheets being used in Customize WordPress Login Page.

Using A custom Logo:

The very first thing you may want in the login page will be a customized logo. You can replace the default WordPress logo with your company logo. Save the image of your Logo in the “Login” folder as mylogo.png. You can save the image in your desired format like .jpg.

Function my_loginlogo() {
   echo'<style type="text/css">
h1 a {
background-image: url(' . get_template_directory_uri() . '/login/mylogo.png) !important;
}
</style>';
}
add_action('login_head', 'my_loginlogo');

 

Add this code to the bottom of your function.php file. Do not forget to use the “important” flag to overwrite the default logo.

Using A custom Logo:

Changing the Logo Url:

The logo image will link to the wordpress.org by default. You can change it to your website URL.

Add the given lines of code to the bottom of your function.php file to change the link.

Function my_loginURL() {
return 'http://mysite.com';
}
add_filter('login_headerurl', 'my_loginURL');
Change the ‘http://mysite.com’ with the URL of your site.

Styling the Login Page :

Using CSS you can style any HTML element on the WordPress login page of your site. Adding the given block of code to the function.php file can help you in customizing the style.

 function my_login_stylesheet() {
   wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/style-login.css' );
   wp_enqueue_script( 'custom-login', get_template_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Adding a customized Link on the login page:

Generally, you have the “Register” , “Forgot Password” and “back to the site” links at the bottom of the login page. If you want to give an additional link at the bottom of the page then use the following code:

function my_loginfooter() { ?>
  <p style="text-align: center; margin-top: 1em;">
   <a style="color: #4da28f; text-decoration: none;” 
    href="http://mysite.com/Help/">Facing any trouble, visit our help section.
</a>
</p>
<?php }
add_action('login_footer','my_loginfooter');
Make sure you have changed the URL with your preferred URL and used a relevant text.

If you are making a site for your client or for branding purpose then you can not ignore the need of modifying the login page.

You can choose the plugin way or the manual way of doing it depending on your comfort level and create a great experience for the end users.

SHARE
Previous articleTop Joomla templates from each category that leads in 2016
Next articlePSD to HTML Converter Tools for Developer.

Abdullah Al Mahamud is a programmer and founder of Thedevline an Inspiration blog since 2014. live in Bangladesh. He is passionate about Technology and Design. He works on the freelancing marketplace as a freelancer and has also written for Useful Article in this blog

Leave a Reply

avatar
  Subscribe  
Notify of