Override wp-login.php styles

Question

I have a Wordpress CMS website where most labels are needed to be white. So the theme includes the below styles per form labels.

.login label {
    color: #fff;
         


        

Answer 1

Since the login and forgot password screens are not theme dependent, your header.php file will not be read, so any styles you put in there won't affect these pages.

Add this to your template.php file

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

and then add your custom styles to style-login.css

Answer 2

login_head and login_enqueue_scripts are called one after another, so it doesn't matter which one you're using...

Using wp_enqueue_style is the best practice but it can be echo '<link rel="stylesheet" ...>'; without problem.

I'm adding a solution because this isn't the kind of code that you just drop onto your theme functions.php. We want to keep the code running even if we swap themes. So a functionality plugin comes handy:

<?php
/*
    Plugin Name: Login CSS
*/
function custom_login() {
   $CSS = <<<CSS
        <style>
            .login label {}
        </style>
CSS;
    echo $CSS;
}
add_action('login_head', 'custom_login');

Check the following to learn about the Heredoc sintax used to build the $CSS string: What is the advantage of using Heredoc in PHP ?

Answer 3

It's not best practice to edit any wp core files, so I'd advice not to touch wp-login.php anyway, since updating WordPress can reset things.

Instead, add this to your functions.php:

 // Custom login
function custom_login() {
        $files = '<link rel="stylesheet" href="'.get_bloginfo('template_directory').'/css/login.css" />';
        echo $files;
}
add_action('login_head', 'custom_login');