4

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 );
3
  • @the_dramatist Thanks for the edit. Rushed, I hadn't noticed my error.
    – glvr
    Nov 3, 2016 at 17:32
  • Oh. You welcome. We are a community. Feel free to edit any other post or suggest edit if you see any error.
    – CodeMascot
    Nov 3, 2016 at 17:34
  • Dear @glvr, I added a file with my custom CSS to themes/themename/css/admin.css and added the code to the functions.php but the changes are not showing. Am I missing something? Dec 19, 2021 at 16:19

3 Answers 3

6

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.

2
  • Thanks. I didn't know if it's ok to combine the 2 'add_action' into one function.
    – glvr
    Nov 3, 2016 at 17:32
  • No it's perfectly fine.
    – CodeMascot
    Nov 3, 2016 at 17:32
0

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');
1
  • Awesome tip. Thanks for sharing! Dec 19, 2021 at 16:13
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.