0

I'm changing the appearance of the WP login page for a client and I'm using CSS in addition to the following code in my functions.php file.

// CUSTOMIZE LOGIN SCREEN
add_filter('login_headerurl', 'ourHeaderUrl');

function ourHeaderUrl(){
  return esc_url(home_url( '/' ));
}

// enqueue CSS into the login page
add_filter('login_enqueue_scripts', 'ourLoginCSS');

function ourLoginCSS(){
  wp_enqueue_style('main_styles', get_stylesheet_uri(), array(), '1', 'all');
}

These functions use the stylesheet from the frontend, thus adding more CSS to my frontend CSS file. Is there any way of styling this page by keeping the CSS separate from my frontend CSS?

  • What do you want to achieve? Just make it clear. – Max Yudin Oct 14 '19 at 13:04
  • @MaxYudin Why have you down-voted this? It's perfectly clear in my question what I wish to achieve - "Is there any way of styling this page by keeping the CSS separate from my frontend CSS?" I don't wish to add extra CSS to my frontend style.css file. – The Chewy Oct 14 '19 at 13:08
  • "Is there any way of styling this page by keeping the CSS separate from my frontend CSS?" - Yes. Just create another .css file and wp_enqueue_style() this separate file instead of your main style.css – kero Oct 14 '19 at 13:09
  • @kero - that will still be pulled into the frontend though? – The Chewy Oct 14 '19 at 13:10
  • 2
    @MaxYudin It's not a CSS question. It's a question about how to enqueue styles in the back end only (which hopefully includes the login page). Please upvote the question again. – The Chewy Oct 14 '19 at 13:27
0

You can enqueue styles for the login page with login_enqueue_scripts.

Example:

function themeslug_enqueue_style() {
    wp_enqueue_style( 'loginStyles', 'login-style.css', false ); 
}

add_action( 'login_enqueue_scripts', 'themeslug_enqueue_style', 10 );
  • OP is already using that hook. And will 'style.css' really work the way it is intended? – kero Oct 14 '19 at 13:34
  • So will I then have the login CSS in a separate CSS file which will replace 'style.css' in the above code? And will I have to enqueue this separately as well? – The Chewy Oct 14 '19 at 13:38
  • I edited the example to maybe make more sense. Create a file called login-styles.css and but only the login related CSS in it and enqueue it like the example. – RiddleMeThis Oct 14 '19 at 14:00
  • This didn't work I'm afraid. It shows an error message in the console for my site on Chrome that says GET http://localhost:8888/mysitelogin-style.css net::ERR_ABORTED 404 (Not Found) The path in this message seems to be missing a forward-slash before the 'login-style.css' part at the end? – The Chewy Oct 15 '19 at 23:35
  • It’s looking for the file in the root of your site, change the path to where your css file is – RiddleMeThis Oct 16 '19 at 1:10

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.