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;
    font-size: 14px;
}

This above style is populated from within /wp-login.php file -- the style itself is located in the login.min.css (which is included directly within wp-login.php)

I need to override this ONLY for the forget password screen.

Luckily there are custom ID selectors for the two labels I need to be black in this instance. #pass1 #pass2

My problem is, I have NO ACCESS to /wp-login.php and login.min.css -- I have tried adding !important and declaring these two selectors within header.php but they were not read.

I need to somehow add; with current permission situation.

#pass1 { color: #000 !important; }

#pass2 { color: #000 !important; }

Could I use jQuery from header.php or footer.php to append the style? Would it be read?

Like others have said, you weren't supposed to modify any files in /wp-admin/ or /wp-includes/. They all get overwritten when Wordpress is updated. You want to keep all your changes in /wp-content/. Most likely in your theme's directory. — Clayton Leis, Jan 22 '15 at 21:53

score 1 · Accepted Answer · answered Jan 22 '15 at 21:45

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');

score 0 · Answer 2 · answered Jan 22 '15 at 21:47

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

score 0 · Answer 3 · answered Apr 17 '18 at 02:12

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 ?

Override wp-login.php styles

3 Answers3

Linked

Related