WordPress Login Page Customization

WordPress Login Page Customization is pretty much easier, I always look for modifying my blog because there is much more to do beyond objectives. You never assume or point to customize WordPress login page but let me tell you, You can do so in easy coming steps though WordPress default login page is nice but you may find comfortable with modifying your WordPress login page with your blog logo or some branding. WordPress is also act as membership website where user can register to work as author or contributor. There are two ways to execute this customization either by Using Custom Codes or Plugins. I personally think using more then enough plugins can slow down your website but still i will elaborate both methods to style your WordPress login page looks branding.

WordPress Login Page Customization :

Everyone is looking to give a band look to blog let’s start with custom WordPress Login Page URL, Is it possible to change WordPress login page URL? i think yes! it’s easy. Follow below move to make custom WordPress login page URL.

By Default WordPress login page URL is said to be “www.yoursite.com/wp-login.php” it’s bunch to type, So let’s make it short and simple so that it would give some branding style. In order to make changes with WordPress login Page URL you will need to edit “.htaccess” file, it is located into WordPress installation root of server. Mostly it’s hidden but you can try FTP client to edit this file. Still can’t find it just create your own using notepad or notepad++ software in windows, Copy and Paste Below code in it

RewriteRule ^login$ http://YOUR_SITE.com/wp-login.php [NC,L]

and name it as “.htaccess”.

Read: Show Hidden Files From Server

Just Replace “login” word with your own to change URL.

Outcome with Default htaccess :

RewriteRule ^login$ http://YOUR_SITE.com/wp-login.php [NC,L]

# BEGIN W3TC Browser Cache
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>

If you created htaccess yourself then it must be simply coded with single line code above mentioned.

Testing :

Open your browser and go to http://www.yoursitename.com/login it will be redirected to default WordPress login page. This customization is helpful to clients which may not aware of WordPress login page So it’s easier to remember such user friendly URL than wp-login.php URL.

 WordPress Login Page Designing Ways

There are three ways to design WordPress login page :

1. Using WordPress Plugins

Download and Install Custom admin Branding   or

Download and Install My Brand Login    or

Download and Install BM Custom Login

2. Simple trick to change WordPress login Page Logo

Nothing serious you have to do just replace the default logo with your own logo.

* Make a cool logo for your WordPress Login page and name it as “wordpress-logo.png” (Its Important with PNG extension)

* Go to File manager of your host then head to “http://yourwebsite.com/wp-admin/images/” look for file named with same as you given to your logo “wordpress-logo.png” delete that logo and upload your main logo here . Now you can access your login page and Enjoy your Custom logo design.

3. Coding to Design WordPress Login Page

Below i have given some simple coding to change Default WordPress login page Logo. Follow below steps to change WP login page.

* Go to your Dashboard=> Appearance =>Editor=>Select theme=>Select “Functions.php“=>Add following code to this “Funtions.php” file.

functioncustom_login() {

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

}
add_action('login_head', 'custom_login');
We have to create custom Css file here So create a CSS file with the name custom-login.css in your theme directory(root/wp-content/themes/your theme). Now we have CSS to customize with wants, Just add some below codes inside to take a sample view. You will find a folder inside theme directory with name “images” put your custom login page background inside.

* Custom WordPress Login Page Style */
/* By Dewbloggers.com */

/* Page Background */
body.login, html {
background: #eae2d5 url(your-bg-image-path);
margin: auto;
font-weight:bold;
}
/* WordPress Logo Replacement (Don’t forget to change width and height */
#login h1 a {
background:url(your-logo-path) 0 0 no-repeat;
width:290px;
height:150px;
margin-left: 10px;
margin-bottom: 0px;
padding-bottom: 0px;
}
/* Login Button */
#wp-submit {
background: #bc3d1d;
border: #f24643;
}
/* Lost Password Link */
.login #nav a, .login #nav a:hover {
color: #443030!important;;
}
/* Back to Blog Link */
.login #backtoblog a, .login #backtoblog a:hover {
color: #bc3d1d!important;;
}

Remember: To Change your-bg-image-path

Showcase :

wordpress login page

I hope you easily got my points and customized your WordPress login page easily, there are many ways available but i find these as simplier as you can try to give a try atleast. Scripting work can spoil your WordPress theme so i must recommend to try safely, if you did before with any other way comment box is waiting for your reply.

Comments are Valued

About Amar Ryder


Amar Ryder is Passionate Blogger and Site designer. He used to learn about Social Media and Internet Marketing to Achieve his Dreams. He writes about WordPress, SEO, Online Money Making, Blogging etc.

Join Our Newsletter

Join over to get free and fresh content delivered automatically each time we publish.

Speak Your Mind

*

CommentLuv badge