#152: Styling the WordPress (Lodge) Login Page

(Updated on )

Our “widget” for The Lodge in the sidebar of the site (shows on most pages, including homepage) has two states. One for when a user is logged out and one when a user is logged in. The logged out state has a login form right on it so current members have an easy way to jump in.

We used to be using the built in function wp_login_form(), which is pretty cool for WordPress to provide, but we want to snag some control over the markup. This will allow us to add classes and whatnot to style it how we want.

There are a number of situations, though, in which our custom login form won’t work and we’ll need to use the default WordPress login view. That is, what you see when you visit /wp-login.php. For instance, if you submit an incorrect password, you’ll be redirected to this page. Or if you want to register for the site (without going through Restrict Content Pro), or even reset your password, you’ll do this through this /wp-login.php page. So I think it would be best if we style this page up so it feels, you know, like a professional operation rather than just “some WordPress site.” Plus we can use our branding stuff here, namely our snowy cabin.

In order get control, we use a couple of WordPress “hooks” in our functions.php file in order to load up a custom CSS file. That’s all we need to snag design control.

We spend the rest of the time utilizing that CSS file to brand up the login page. We make the cabin rather blurry, which is a cool looking effect I think. It kind of says “The cabin is back there! Log in and all will become clear!”. As a nice bonus, blurry photos as JPGs can be set to pretty low quality, which is good, because we’re using it rather large as a full page background image.