Add CSS to Login Page

Customizing the WordPress login page with your own CSS styles is a great way to give your site a unique look and feel!

Here’s an example code snippet to add custom CSS to the WordPress login page:

<?php

function wpsnippets_custom_login_css() {

    ?><style type="text/css">
        body.login {
            background-color: #f1f1f1;
        }
        body.login #login h1 a {
            background-image: url('<?php echo esc_url( trailingslashit( get_stylesheet_directory_uri() ) ); ?>images/logo.png');
            background-size: 100%;
            width: 300px;
        }
    </style><?php

}

add_action( 'login_enqueue_scripts', 'wpsnippets_custom_login_css' );

In this code snippet, we define a function wpsnippets_custom_login_css() that outputs our custom CSS styles using the echo statement. In this example, we’ve added a background color to the login page and changed the login logo to use a custom image.

We use the get_stylesheet_directory_uri() function to get the URL of our active theme’s stylesheet directory, and then append the path to our logo image. This ensures that the image will always be loaded from the correct location, even if the theme is changed. Finally, we use the add_action() function to add the wpsnippets_custom_login_css() function to the login_enqueue_scripts hook. This hook is used to enqueue scripts and styles specifically for the WordPress login page.

With this code in place, the WordPress login page will be styled according to the custom styles you’ve defined in the wpsnippets_custom_login_css() function. You can modify the CSS styles to suit your needs.