How to add custom css to login and admin?

Question

I have custom CSS for the login and admin pages.

Is it OK to add it as I've done below, or is there a better alternative?

function custom_admin_css() {
    wp_enqueue_style( 'custom_admin_css', get_template_directory_uri() . '/css/admin.css', array(), filemtime( get_template_directory() . '/css/admin.css' ) );
}
add_action( 'login_enqueue_scripts', 'custom_admin_css', 10 );
add_action( 'admin_enqueue_scripts', 'custom_admin_css', 10 );

Answer 1

That's pretty fine and it's the proper way to add CSS to login page. But you can also change login page CSS by below code-

function the_dramatist_custom_login_css() {
    echo '<style type="text/css"> //Write your css here </style>';
}
add_action('login_head', 'the_dramatist_custom_login_css');

This actually prints CSS code inline in the login page. And for admin CSS your way is correct.

Answer 2

as explained at here you can do as below:

// custom login for theme
function childtheme_custom_login() {
   echo '<link rel="stylesheet" type="text/css" href="' . 
   get_bloginfo('stylesheet_directory') . '/customlogin.css" />';
}

add_action('login_head', 'childtheme_custom_login');

another way for plugin:

If you want to load extra css for login page from your plugin you can do as below:

I assume you know basics of wp plugin development.

make a css directory in your plugin directory create a login.css file.

in your init function add this.

  public static function init(){
       //other function as your need
      add_action( 'login_enqueue_scripts', __CLASS__.'::custom_login_css', 10 );
   }

then you can write function like this.

public static function custom_login_css(){
        wp_enqueue_style('custom_login_css', plugins_url('/css/login.css', __FILE__), [], '1.0.0');
    }

Answer 3

Sometimes you have to add CSS to the content created with help of jQuery so the above methods will not work if jquery code loads in the footer. you can use the below code too.

    function the_king_custom_login_css() {
        echo '<style type="text/css">
        .nsl-container {
            text-align:center !important;
        }
        </style>';
    }
    add_action('wp_footer', 'the_king_custom_login_css');