How to customize the style of your WordPress login screen - Robert DeVore

How to customize the style of your WordPress login screen

This post is going to show you how to add a few small code snippets to change the appearance of the WordPress login screen.

We’ll walk through the process of changing the default WordPress logo to your own using the login_headertext filter that was added in WordPress 5.2

And I’m going to break down how to change various other styles, giving you the ability to style your login screens to match your website branding.

I was recently working on the registration flow of WP Dispensary’s eCommerce add-on and realized there’s a few places that the default WordPress login page are lacking from a branding perspective.

So I decided I had to change that.

Since the CannaBiz theme I built for WP Dispensary already has areas in the Customizer for the logo upload and multiple color styles, I knew it wouldn’t be too hard to update the login page style to match the front-end design.

Previous to WordPress version 5.2, the most common way to change the logo on the login screen was with CSS style updates to display yours properly.

These codes can be found in the Codex which shows you how to customize the login form.

With WordPress v5.2 we can now use the newly added logo_headertext filter in the wp-login.php file to display your logo image.

Here’s an example of what you can do with the updated login screen style for WordPress.

Using the new filter added in WP v5.2

You can find the logo_headertext filter in the wp-login.php file in your website’s root directory.

We’ll be looking for this bit of code below.

<?php
/**
* Filters the link text of the header logo above the login form.
*
* @since 5.2.0
*
* @param string $login_header_text The login header logo link text.
*/
$login_header_text = apply_filters( 'login_headertext', $login_header_text );

You can also view the full wp-login.php file on Github at the following link.

Adding your logo with a custom filter

Now that we found the filter, let’s add some code to change out the WordPress logo and replace it with an image of our own.

These changes will go in your theme functions.php file (or a custom plugin).

<?php
/**
* Custom login form logo link title.
* 
* Requires WordPress v5.2+ in order to use the login_headertext filter
*/
function acme_login_logo_image( $login_header_text ) {
$logo_url          = 'YOUR_IMAGE_URL_HERE';
$login_header_text = ''; // clears default output.
$login_header_text = '<img src="' . $logo_url . '" alt="' . get_bloginfo( 'title' ) . '" />';
return $login_header_text;
}
add_filter( 'login_headertext', 'acme_login_logo_image' );

Next, we’re going to want to remove the default CSS styles that WordPress applies to the logo image so ours new logo fits properly within the space and re-sizes automatically depending on logo size.

<?php
/**
* Custom login form logo image styles.
*/
function acme_login_logo_image_styles() { ?>
<style type="text/css">
#login h1 a,
.login h1 a {
background-size: auto;
background-image: none;
background-position: center center;
text-indent: 0;
width: auto;
height: auto;
max-width: 320px;
}
#login h1 a img,
.login h1 a img {
max-width: 100%;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'acme_login_logo_image_styles' );

Extending the code to work with the customizer

Once you have the logo added, your login screen will feel like it’s starting to take shape, but what about the background color, button colors, and link colors?

That’s where your Customizer codes come into place!

In the CannaBiz theme, I have options for button background and text colors, text link colors, plus the logo image upload.

I’ll be using these settings to style the login page of my website, which you can see in the updated codes below.

Adding a logo image from the customizer

Below is the updated filter code which replaces the first piece of code we added earlier in the article.

<?php
/**
* Custom login form logo link title.
* 
* Requires WordPress v5.2+ in order to use the login_headertext filter
*/
function acme_login_logo_image( $login_header_text ) {
// Get default contents (used if no logo is present in customizer)
$login_header_text = $login_header_text;
// Change the login_header_text to display our new logo.
if ( '' != get_theme_mod( 'acme_logo' ) ) {
$login_header_text = '';
$logo_url          = get_theme_mod( 'acme_logo' );
$login_header_text = '<img src="' . $logo_url . '" alt="' . get_bloginfo( 'title' ) . '" />';
}
return $login_header_text;
}
add_filter( 'login_headertext', 'acme_login_logo_image' );

As you can see in the above code, we’re using get_theme_mod and checking to see if the logo file is present.

This way, if no logo is uploaded, none of the code changes will occur, and nothing will be altered on the front-end view.

Next, we’ll be updating the CSS for the text and button links.

Adding text & button link styles from the customizer

I wanted to utilize the text link colors and button colors I added in the CannaBiz theme so the login page matches the website design even more.

The code below adds in text link colors and will be added along with the CSS we added in the second code example in this article.

You can change the get_theme_mod instances to match your color options names.

body.login a,
body.login a:visited,
body.login a:focus,
body.login a:active,
body.login #backtoblog a,
body.login #nav a {
color: <?php echo get_theme_mod( 'acme_link_color' ); ?>;
}
body.login #backtoblog a:hover,
body.login #nav a:hover,
body.login h1 a:hover,
body.login #backtoblog a:focus,
body.login #nav a:focus,
body.login h1 a:focus {
color: <?php echo get_theme_mod( 'acme_link_hover_color' ); ?>;
}

The next step is to update the button on the page to match the colors and style of the buttons added in my theme.

The CSS codes below make the button full width and adds the background color and text colors I have in the theme customizer.

body.login.wp-core-ui .button-primary {
background-color: <?php echo get_theme_mod( 'acme_button_color' ); ?>;
border-color: <?php echo get_theme_mod( 'acme_button_color' ); ?>;
box-shadow: none;
text-shadow: none;
color: <?php echo get_theme_mod( 'acme_button_text_color' ); ?>;
width: 100%;
margin-top: 16px;
padding: 6px 12px 6px 12px;
height: auto;
font-size: 16px;
}
body.login.wp-core-ui .button-primary:hover {
background-color: <?php echo get_theme_mod( 'acme_button_hover_color' ); ?>;
border-color: <?php echo get_theme_mod( 'acme_button_hover_color' ); ?>;
box-shadow: none;
text-shadow: none;
color: <?php echo get_theme_mod( 'acme_button_hover_text_color' ); ?>;
}

Changing the login screen background color

The last step to making the login screen really feel like a part of your website brand is to change the background color to match your website.

The code below uses the background color option added to the theme customizer.

body.login {
background-color: #<?php echo get_theme_mod( 'background_color' ); ?>;
}

See the code in action

Check out the WP Dispensary demo server’s login screen to see the above code’s being used via the CannaBiz theme’s styles.

Hopefully this article helped you get a better looking login screen for your website, without the need to use another plugin.

Comments

One response to “How to customize the style of your WordPress login screen”

Leave a Reply

Your email address will not be published. Required fields are marked *