3

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 );
2
  • @the_dramatist Thanks for the edit. Rushed, I hadn't noticed my error.
    – glvr
    Nov 3 '16 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 '16 at 17:34
5

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 '16 at 17:32
  • No it's perfectly fine.
    – CodeMascot
    Nov 3 '16 at 17:32
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');
    }
-1

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

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.