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 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 /]

Leave a Reply

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

Solve : *
24 ⁄ 4 =