wordpress custom login page

Custom login page in wordpress theme

To develop a WordPress custom login page without plugin follow this steps:

Part One:

  1. Create a new folder inside the active wordpress theme folder and name it “login”
  2. Create a new css file inside login folder and name it login.css
  3. Inside this login.css file add this below code and apply the css rule to fulfil your need:
html {

body.login {

.login {

.login label {

.login form {

.login form .submit input {

.login #nav a{

.login #backtoblog a {

.login #nav a {

.login #backtoblog a:hover {

Part Two:

  1. Open your active wordpress theme functions.php file
  2. Add this below code in functions.php file to inject your login.css file with active wordpress theme
add_action('login_head', 'custom_login_css');

function custom_login_css() {

echo '<link rel="stylesheet" type="text/css" href="'.get_template_directory_uri().'/login/login.css" />';


Now your wordpress custom login page is ready to use. Visit http://www.yourdomain.com/wp-login.php and you will see the effect.

For your help I have zipped the login folder with login.css file. You can download this folder from below box.

[wpfilebase tag=file id=6 /]

Published by

Emdad Khan

I am Emdad Khan, A WordPress Theme Developer and Author of BN Web Design Website. A full time Freelancer on WordPress Theme Development & Optimization as well as blogger.

Leave a Reply