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.


  1. User Avatar
    Permalink to comment#

    Why not use text elements for “The Lodge” instead of the image? Just because you didn’t want to tweak more html/php?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      The design has the text kind of disappearing behind the trees. That effect could be done I supposed with transparent PNG’s, but then we’re looking at three layers, extra HTTP requests and extra code complication. The way it’s done here looks good and is accessible, so I think it’s the way to go.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.