You are here: Home » WP Guides » How To Make A WordPress Custom Login Page by coding & Plugins

How To Make A WordPress Custom Login Page by coding & Plugins

How To Make A WordPress Custom Login Page by coding & Plugins:

Looking more professional with customized login :

One might wonder what the benefits are of changing a page only the administrators can see. Yet frankly, the advantages are immense if you’re considering having a more professional look. Besides , some people who install WordPress do it with the idea of handing the site to their clients, which will demand it to comply with the rest of the site’s design. So having that in mind, it’s best to make sure it looks the same to preserve your image as a professional designer. 

There are several ways to do that task, some of them easier, while others not so much. Depending on your level of expertise ,  you may choose one that suits your needs the most in order to deal with the problem at hand. Without  giving any further commentary, let’s discuss our options.

Coding a custom login page :

With even the basic knowledge of HTML and CSS, one could make their login page easily and without much hassle. Even the official WordPress site has published some information on how to do this. It comprises of the following steps:

  1. Create a new file to use as a login page, instead of editing wp-login.php. Name it something recognizable, like custom-login-page.php for example
  2. Using the PHP tags available for fetching content in your WordPress installation, include the header  in your page :

<?php

/*

Template Name: Login Page

*/

?>

<?php get_header(); ?>

3.Type in the code you’re willing to use for your custom login form.  For an example to help you, use the following code:

<form name=”loginform” id=”loginform” action=”<?php echo get_option(‘home’); ?>/wp-login.php” method=”post”>

<p>

<label>Username<br />

<input type="text" name="log" id="user_login" value="" size="20" tabindex="10" /></label>

</p>

<p>

<label>Password<br />

<input type="password" name="pwd" id="user_pass" value="" size="20" tabindex="20" /></label>

</p>

<p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>

<p>

<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />

<input type="hidden" name="redirect_to" value="<?php echo get_option('home'); ?>/wp-admin/" />

<input type="hidden" name="testcookie" value="1" />

</p>

</form>

<p id="nav">

<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a>

</p>

4.Include the footer of the page:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

5.Go to your WordPress installation, to Page>New, and assign a page with the source file you made.

Too hard ? Maybe a plugin can help?

Indeed, if you have little to no coding background, you might want to get a plugin to help you with this task. There are several available , and most of them do pretty much the same thing ,but we’re going to choose two plugins for our example:

1. Custom Admin Branding –  This plugin was made solely for the purpose of doing what we attempted to do above, only it provides a much easier way to do it in just one screen. You go into the admin panel ,set up this plugin’s options, and voila! You have a custom login page. It has color picking, direct CSS import, anything you might need, actually.

Wordpress Custom Login Page using plugin

2. BM Custom Login – this plugin offers just about the same thing as the former one, but for a more tech savvy user.  Basically, it’s for people who are knowledgeable but too lazy to bother editing the files of their WordPress installation. The other actual benefits of doing it this way, is because if you edit your WordPress installation directly, you’ll end up losing your custom login when your installation updates. And that is something you do not want to happen.           

BM Custom Login  plugin

Now that you have several different options to customize your login page,  you should have little to no difficulty actually doing it. It will make you emanate a more professional look, and that is all a real professional needs.

 

About admin

Ajinkya Thete is passionate Blogger,a self-taught web developer and a person who is always looking for innovation.

Leave a Reply

Scroll To Top